從零開始的vue學習筆記（二）
資料與方法
- 當一個 Vue 例項被建立時，它將 data 物件中的所有的屬性加入到 Vue 的響應式系統中。data的資料和檢視同步更新。
- 例項建立後新增一個新的屬性，對這個屬性的的改動將不會觸發任何檢視的更新。
- 如果需要一個屬性，但是一開始它為空或不存在，僅需要設定一些初始值。
- Object.freeze()方法可以阻止修改現有的屬性
- 除了資料屬性，Vue 例項還包含例項屬性與方法，字首為
$，例如：vm.$data，vm.$el，vm.$watch()(這裡假設vm是某個例項名)，詳情可以參考API
例項生命週期鉤子
Vue例項有自己的生命週期，提供了一些鉤子函式給我們寫自己的邏輯程式碼：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
ps：不要在選項屬性或回撥上使用箭頭函式，即這些鉤子函式不要用箭頭函式的寫法，因為他們沒有this
生命週期圖
模板語法
文字
資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文字插值<span>Message: {{ msg }}</span>v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新
<span v-once>這個將不會改變: {{ msg }}</span>原始 HTML
v-html 指令輸出真正的html，而不是字串<p>Using mustaches: {{ rawHtml }}</p> 輸出字串 <p>Using v-html directive: <span v-html="rawHtml"></span></p> 輸出rawHtml變數代表的HTML使用 JavaScript 表示式
所有的資料繫結，Vue.js 都提供了完全的 JavaScript 表示式支援{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>指令
常見有v-if,v-on,v-bind,v-for。
引數：<a v-bind:href="url">...</a>在這裡 href 是引數，告知 v-bind 指令將該元素的 href 特性與表示式 url 的值繫結
動態引數：<a v-bind:[attributeName]="url"> ... </a>這裡的 attributeName 會被作為一個 JavaScript 表示式進行動態求值，求得的值將會作為最終的引數來使用
修飾符：<form v-on:submit.prevent="onSubmit">...</form>修飾符 (modifier) 是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結，例子的
.prevent就是修飾符
縮寫：<!-- 完整語法 --> <a v-bind:href="url">...</a> <!-- 縮寫 --> <a :href="url">...</a> <!-- 完整語法 --> <a v-on:click="doSomething">...</a> <!-- 縮寫 --> <a @click="doSomething">...</a>
計算屬性和偵聽器
模板一般不要加入過多的邏輯，只是用來渲染會職責分明一些，把邏輯處理防盜計算屬性，會更加合理；
<p>Computed reversed message: "{{ reversedMessage }}"</p>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 例項
return this.message.split('').reverse().join('')
}
}
})這裡的reversedMessage就是計算屬性，可以逆序一個字串。
定義一個方法，能夠達到同樣的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p><p>
// 在元件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}兩者區別：計算屬性是基於它們的響應式依賴進行快取的，方法總會再次執行函式；在不同場景下選擇不同的方式吧~
tips：使用計算屬性，而不是偵聽屬性（watch裡定義的方法）；計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter；自定義的偵聽器watch在資料變化時執行非同步或開銷較大的操作時是最有用的
Class 與 Style 繫結
v-bind 用於 class 和 style，表示式結果的型別除了字串之外，還可以是物件或陣列
先介紹Class繫結
繫結物件
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> data: { isActive: true, hasError: false }當 isActive 或者 hasError 變化時，class 列表將相應地更新,也可以讓繫結物件不內聯定義在模板裡，結果也是一致的：
繫結<div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } }計算屬性也可以更靈活的展現（不舉例子了）繫結陣列
<div v-bind:class="[activeClass, errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' }繫結元件（語法和前面完全類似）
Style繫結
v-bind:style 的物件語法
繫結物件
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 }或者直接寫
<div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } }繫結陣列
<div v-bind:style="[baseStyles, overridingStyles]"></div>
條件渲染
v-if、v-else-if、v-else可以配合使用：
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else="type == 'C'">
C
</div>
data : {
type : "B"
}
在<template> 元素上使用 v-if 條件渲染分組，顯示多個元素
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>用key管理重複元素
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>使用key標示元素後，Vue不會採用偷懶的複用，而會重新渲染元素
v-show：只有顯示和不顯示兩種
<h1 v-show="ok">Hello!</h1>v-if vs v-show：需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好
列表渲染
v-for用於列表渲染
迭代陣列
ps:index從0開始，<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })in可以替換為of
迭代物件
<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })使用唯一key配合v-for保證渲染正確（刪除、排序、過濾等場景用得到）
<div v-for="item in items" v-bind:key="item.id"> <!-- 內容 --> </div>陣列變異方法 (mutation method)
push()、pop()、shift()、unshift()、splice()、sort()、reverse()，例子：
這些方法會直接改變陣列本身example1.items.push({ message: 'Baz' })
非變異 (non-mutating method) 方法
filter()、concat()、slice()
這些方法不會改變傳入的陣列本身，但是方法的example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })返回值是一個新陣列，可以把這個陣列賦值給原來的陣列達到同樣的效果
注意事項
陣列的一些錯誤寫法：var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的正確寫法：
//第一個問題 // Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) //例項寫法 vm.$set(vm.items, indexOfItem, newValue) //第二個問題 vm.items.splice(newLength)物件的一些錯誤寫法：
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 現在是響應式的 vm.b = 2 // `vm.b` 不是響應式的對於已經建立的例項，Vue 不允許動態新增
根級別的響應式屬性，但是，可以使用 Vue.set(object, propertyName, value) 方法向巢狀物件新增響應式屬性：var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) Vue.set(vm.userProfile, 'age', 27) //或者 vm.$set(vm.userProfile, 'age', 27)
表單輸入繫結
v-model指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結,本質上是語法糖。
文字
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>多行文字
tips: (<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea><textarea>{{text}}</textarea>) 並不會生效，應用 v-model 來代替。複選框
多個複選框，繫結到同一個陣列，例子：<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div>new Vue({ el: '#example-3', data: { checkedNames: ['Jack'] } })單選按鈕
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div>new Vue({ el: '#example-4', data: { picked: 'Two' } })選擇框
單選：<div id="example-5"> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>new Vue({ el: '...', data: { selected: 'A' } })多選時 (繫結到一個數組):
<div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div>new Vue({ el: '#example-6', data: { selected: ['A','B'] } })v-for顯示下拉框例子：
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span>new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })- 值繫結
單選按鈕，複選框及選擇框的選項，v-model 繫結的值通常是靜態字串，有時我們可能想把值繫結到 Vue 例項的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字串（不舉例子了） - 修飾符
- .lazy
在預設情況下，v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步，你可以新增 lazy 修飾符，從而轉變為使用 change 事件進行同步
<!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="msg" >- .number
如果想自動將使用者的輸入值轉為數值型別，可以給 v-model 新增 number 修飾符
<input v-model.number="age" type="number">- .trim
如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符：
<input v-model.trim="msg"> - .lazy