Vue：學習筆記-介紹
摘要：
17年上半年，學習了一些Vue的知識，但是現在反觀回去，感覺在那個時候，因為著急做專案，很多東西消化的不夠清楚，這一點同樣體現在對angular的學習上，現在有點時間進行修整，那就花點時間去好好整理一下。
正文
Vue (pronounced /vjuː/, like view) ...
17年上半年，學習了一些Vue的知識，但是現在反觀回去，感覺在那個時候，因為著急做專案，很多東西消化的不夠清楚，這一點同樣體現在對angular的學習上，現在有點時間進行修整，那就花點時間去好好整理一下。
正文
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
大體翻譯：Vue是一個進步的框架（progressive framework），用來構建使用者介面。它不像別的大而全的框架，由很小的部分，逐步增量吸收完善。它的核心庫僅僅專注於view層，很容易使用，或者說是和專案的其他庫整合。
這段前言，好像是第一次這麼清楚地讀明白，枉費了作者的一番心血。
如何引入
在你的index.html中引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
這個是開發版本，在控制檯會有一些有用的輸出。
或者：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
生產版本，優化了大小和速度。
還有一些別的安裝幫助，在ofollow,noindex">Installation
，初學者不建議立刻使用vue-cli
（類似一個腳手架），這樣你會搞不清原理，但我相信，大多數的人還是會立刻去使用這個，因為立刻可以做出一些東西來，能做出東西來就行，誰會在意什麼原理不原理呢？
陳述式的渲染
直接渲染資料到DOM樹：
html檔案中（下文中，上面的程式碼段都表示是在html檔案中，下面的程式碼段表示是在js檔案中，可以在這個線上模擬器 上進行嘗試）：
<div id="app">
{{ message }}
</div>
js檔案中：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
繫結元素屬性
<div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
條件和迴圈
條件
<div id="app-3"> <span v-if="seen">Now you see me</span> </div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
迴圈
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
處理使用者輸入
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
用元件來構成
元件的概念，是一個預定義好的一些選項的Vue的例項。
定義一個元件，語法如下：
// Define a new component called todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
其實，這個就相當於自定義了一個HTTP元素，並且這個元素是在js中得到解釋的，解釋成HTML原生的元素。這樣可以把它組裝在另外一個元件的模板裡：
<ol> <!-- Create an instance of the todo-item component --> <todo-item></todo-item> </ol>
但是這樣，這個元件的內容是固定的，這樣沒有太大意義，所以，這個內容應該是一個變數，由使用者來定義，所以，這裡又設計一個props
，來定義這個變數，如下：
Vue.component('todo-item', {
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
<div id="app-7"> <ol> <!-- Now we provide each todo-item with the todo object it's representing, so that its content can be dynamic. We also need to provide each component with a "key", which will be explained later. --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})