實例元素 el

實例元素指的是 Vue 實例化時編譯的容器元素，或者說是 Vue 作用的元素容器

<div id="app"></div> var vm = new Vue({el: '#app'})

也可以為實例元素指定其它選擇器

<div class="app"></div> var vm = new Vue({el: '.app'})

可以有多個實例元素

<div id="app1"></div><div id="app2"></div> var vm = new Vue({el: '#app1'})var vm = new Vue({el: '#app2'})

如果有多個相同的實例元素則只有第一個起效

<div id="app"></div><!--這個只當普通 html 輸出，不會被 Vue 編譯--><div id="app"></div> var vm = new Vue({el: '#app'})

也可以在實例化的時候不指定實例元素，后面用 $mount() 手動進行掛載

<div id="app"></div> var vm = new Vue({//option})vm.$mount("#app");

可以通過實例獲取實例元素

var vm = new Vue({el: '#app'})console.log(vm.$el)

數據對象 data

在 MVVM 模式中充當著 M(Model) 數據模型層，更多的體現于將 M 層映射到 V 層

<div id="app"><!--結果為：文本--><span>{{key1}}</span><!--結果為：11--><span>{{key2 + key3}}</span><!--結果為：key4_1--><span>{{key4.key4_1}}</span><!--結果為：{"key5_1": "key5_1"}--><span>{{JSON.stringify(key5[0])}}</span></div> var array = [{key5_1: "key5_1"}];var vm = new Vue({el: '#app',data: {key1: '文本',key2: 1,key3: 10,key4: {key4_1: 'key4_1'},key5: array}}

可以通過實例獲取數據對象

var vm = new Vue({el: '#app',data: {}})console.log(vm.$data)

事件處理器 methods

元素可以通過 v-on:事件 || @事件 進行綁定事件，事件中的 this 默認指向實例 vm

<div id="app"><input type="button" @click="count += 1" value="監聽事件"><span>{{count}}</span></div> var vm = new Vue({el: '#app',data: {count: 0}})

上面的情況僅適用于很簡單的處理，復雜的處理可以需要單獨處理上面的情況僅適用于很簡單的處理，復雜的處理可以需要單獨處理

<div id="app"><input type="button" value="確認" @click="counter"/><p>確認按鈕被點擊了 {{ counter }} 次。</p></div> var vm = new Vue({el: '#app',data: {count: 0},methods: {counter: function(){this.count += 1;}}})

在 js 的事件中默認會有個 event 對象，Vue 在事件上對 event 對象進行繼承二次封裝，改名為 $event，在事件當中默認傳過去

<div id="app"><input type="button" @click="eventer" count="1" value="event 對象"><span>{{count}}</span></div> var vm = new Vue({el: '#app',data: {count: 0},methods: {eventer: function(event){var _count = event.target.getAttribute('count') * 1;this.count += _count;event.target.setAttribute('count', _count);}}})

在事件中很多情況下要傳參數，Vue 也可以在事件中傳參數

<div id="app"><input type="button" @click="parameter(10, $event)" value="事件傳參數"><span>{{count}}</span></div> var vm = new Vue({el: '#app',data: {count: 0},methods: {parameter: function(n, event){this.count += n;event.target.setAttribute('disabled', true);}}})

事件效果預覽

計算屬性 computed

computed 主要是針對 data 的屬性進行操作，this 的指針默認指向實例 vm

<p>{{reversedMessage}}</p> data: {message: 'ABC'},computed: {reversedMessage: function(){return this.message.split('').reverse().join('')}}

渲染結果為

<p>CBA</p>

在 computed 的屬性中默認有兩個屬性，一個是 get，我們稱之為 getter，另一個是 set，我們稱之為 setter，所以也可以這樣寫：

data: {message: 'ABC'},computed: {reversedMessage: {get: function(){return this.message.split('').reverse().join('')}}}

當我們在 V 層調用 {{reversedMessage}} 的時候會自動觸發 reversedMessage.get()

setter 的邏輯也是一樣，當改變對應的屬性時，會自動觸發 set 方法

<div id="app"><!--調用了 fullName.get()--><p>{{fullName}}</p><input type="text" v-model="newName"><!--changeName 事件改變了 fullName 的值，所以會自動觸發 fullName.set()--><input type="button" value="changeName" @click="changeName"></div> var vm = new Vue({el: '#app',data: {firstName:'DK',lastName: 'Lan',newName: ''},computed: {fullName:{get: function(){return this.firstName + '.' + this.lastName},set: function(newValue){this.firstName = newValue}}},methods: {changeName: function(){this.fullName = this.newName;}}})

Vue 在 getter 上面作了基于對應屬性的依賴緩存，也就是說多次調用同一個屬性，get 只會執行一次。而事件在每次觸發時都會被調用，當然在改變該屬性值的時候會再次被調用

<div id="app"><!--fullName.get 只被調用一次--><p>{{fullName}}</p><p>{{fullName}}</p><p>{{fullName}}</p><!--每次點擊都會調用 changeName--><input type="button" value="changeName" @click="changeName('Vue')"></div> var vm = new Vue({el: '#app',data: {firstName:'DK',lastName: 'Lan',newName: ''},computed: {fullName:{get: function(){return this.firstName + '.' + this.lastName},set: function(newValue){this.firstName = newValue}}},methods: {changeName: function(txt){this.newName = txt;//如果在這里改變 this.fullName 的值，則會再次自動觸發對應的 getter}}})

計算屬性效果預覽

監聽器 watch

Vue 提供了對單個屬性的監聽器，當該屬性發生改變的時候，自動觸發，此項使用不當會影響性能，所以慎用。

<input type="text" v-model="a"><p>舊值：{{aOldVal}}</p><p>新值：{{aNewVal}}</p> {data: {a: 1},watch: {a: function (newVal, oldVal) {//自動觸發此方法console.log('new: %s, old: %s', newVal, oldVal)},} }

也可以把方法放到 data 對象中

{data: {a: 1,changeA: function (newVal, oldVal) {//自動觸發此方法console.log('new: %s, old: %s', newVal, oldVal)}},watch: {a: 'changeA'} }

watch 與 compute 區別：

computed 創建新的屬性， watch 監聽 data 已有的屬性

compute 會產生依賴緩存

當 watch 監聽 computed 時，watch 在這種情況下無效，僅會觸發 computed.setter

{computed: {a: {get: function(){return '';},set: function(newVal){//會觸發此項console.log('set val %s', newVal);}} },watch: {a: function(){//不會被觸發console.log('watch');}} }

監聽器效果預覽

總結

以上是生活随笔為你收集整理的Vue 教程第四篇—— Vue 实例化时基本属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。