### 1vue的雙向綁定： 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> ~~~ ### 2vue的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，通過父組件，改變子組件的值： 首先必須使用 **2.傳遞給組件的值會覆蓋組件本身設定的值** 如： ~~~ ~~~ 二$emit，通過子組件改變父組件的值 如：