1. vue的雙向綁定：
vue的雙向綁定可以插入表達式，
如：
~~~
<div id="app">
{{message}}
<span :title="message2">鼠標懸停看信息</span>
</div>
<script>
let app =new Vue({
el:'#app',
data() {
return {
message:'hello Vue',
message2:'hello Vue'+new Date().getDate()//表達式
}
}
})
</script>
~~~
2. vue的`component` 在js中的順序：
`component`在js中的順序必須要比在實例化之前：
如：
~~~
Vue.component('todo-item',{
template:'<li>這是一個組件</li>'
}); //在vue的實例之前
let app = new Vue({
el: '#app',
data() {
return {
message: 'hello Vue',
message2: 'hello Vue' + new Date().getDate(),
vif: false,
lists: ['zhongchujiong', 'zhangjun', 'jilao']
}
},
methods: {
reverseMessage()
{
this.message = this.message.split('').reverse().join('')
}
},
});
~~~
3. vue的響應式：
當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。
~~~
// 我們的數據對象
var data = { a: 1 }
// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
data: data
})
// 獲得這個實例上的屬性
// 返回源數據中對應的字段
vm.a == data.a // => true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
~~~
**當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時 data 中存在的屬性才是響應式的。也就是說如果你添加一個新的屬性，比如：**
~~~
vm.b = 'hi'
~~~
那么對 b 的改動將不會觸發任何視圖的更新。
除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。例如：
~~~
let data = {a: 0};
var vm = new Vue({
el: '#example',
data() {
return {
data: data
}
}
});
vm.$data.data = data //true
~~~
生命周期
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
比如 created 鉤子可以用來在一個實例被創建之后執行代碼：
~~~
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
~~~
vue的計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
~~~
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
~~~
在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 `message` 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。
所以，對于任何復雜邏輯，你都應當使用計算屬性。
~~~
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
~~~
當然，我們同樣可以在{{}}表達式執行一個方法也能達到同樣的效果：
~~~
<div>{{reversedMessage()}}</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}，
methods:{
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
~~~
computed 和 methods的不一樣的地方是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。
**v-else:**
你可以使用 v-else 指令來表示 v-if 的“else 塊”：
~~~
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
~~~
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續使用：
~~~
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
~~~
`v-if`和`v-show`的區別：
`v-if`的使用：
~~~
<div id="app" class="gray">
<h3>v-if ,v-else的使用</h3>
<template v-if="name">
<label>Username</label>
<input placeholder="Enter you userName" key="user">
</template>
<template v-else>
<label>password</label>
<input placeholder="Enter you password" key="password">//key值的使用
</template>
<button @click="reverse">切換</button>
</div>
~~~
在不加key之前，輸入的內容在切換的時候，是不會重新渲染的。
* v-show不允許引用在template中，也不允許使用v-else
v的修飾符：
說說vue中常用的修飾符：
首先是enter,
我們可以在一個keyup事件綁定一個修飾符.enter，當鍵盤最后點擊enter鍵的時候才會觸發，語法如下：
~~~
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
~~~
對于鍵盤事件，vue一共封裝了一下幾個按鍵修飾符：
每當輸入特定按鍵時才會觸發事件；
對于v-model，vue也提供了一些修飾符，其中常用的就是number修飾符，比如
~~~
<input v-model.number="age" type="number">
~~~
它會把輸入的文本，自動轉換為number類型，而這是我們經常需要的。
父子組件之間的通訊
* 使用props，通過父組件，改變子組件的值：
首先必須使用
* 傳遞給組件的值會覆蓋組件本身設定的值
如：
~~~
~~~
二$emit，通過子組件改變父組件的值
如：
~~~
~~~
