实例元素 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');
}
}
}