数据和方法
1:只有当实例被创建时 data 中存在的属性才是响应式的,也可以预定义一些空的属性,唯一的意外就是Object.freeze(obj),这会阻止修改现有的属性;也就是说一个数据在放到根实例的data对象之前被Object.freeze操作过，那么就不在动态响应
//存在的属性是响应式的,预定义空的属性
//Object.freeze(obj) 不再响应
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
obj:{
foo: 'bar'
}
error: null
}
注意:Vue 不允许在已经创建的实例上动态添加新的根级响应式属性（root-level reactive properties）。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
data:{
obj:{
a:1
}
}
//添加了一个响应属性了
Vue.set(vm.obj,b,2)
模板语法
1:原始HTML
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
//rawHtml :是一段html代码,双{{}}会把他当做一段文本进行输出,v-html则会将他当做html代码
2:{{}}的语法不能作用在html标签的特性上面,通过v-bind指令,可以绑定标签的特性(特性就是指元素的一些属性)
3:不管是标签文本的绑定,还是特性的绑定,都是支持表达式的,但是只能包含单个表达式
指令:指令特性的值预期是单个 JavaScript 表达式（结果还是个值）(v-for 是例外情况）
<p v-if="seen">现在你看到我了</p>//seen就是表达式
1:一些指令可以带参数和修饰符
//带参数
//v-bind指令的参数就是标签的特性
<a v-bind:href="url">...</a>
//v-on指令的参数就是事件名
<a v-on:click="doSomething">...</a> //带修饰符
<form v-on:submit.prevent="onSubmit">...</form>
计算属性与侦听器
计算属性出现的目的:不管是文本,还是标签的特性,都属于模板的绑定,而且可以是单个js表达式,但是当表达式的逻辑太复杂就不易维护
1:计算属性vs方法
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessageA() }}"</p>
</div>
//效果是一样的,一个是计算属性,一个是方法,除了调用方式不一样之外,最大的区别就是计算属性是基于他们的依赖进行缓存的,简而言之就是message的值不改变,
那么reversedMessage的就不会改变,但是方法不同,每次重新渲染,方法都是执行一次
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessageA: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
2:计算属性看似只能被动的根据他所依赖的属性值改变,那是因为计算属性默认只有getter,你可以给他提供setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
vm.fullName = 'pan rui'; 一般情况下没有效果,但是设置setter以后,就会改变计算属性的值
3:侦听器watch只有才数据发生改变,执行异步或开销较大的操作的时候使用
class与style的绑定
1:对象语法:作用似乎和addCLass和removeClass作用很像哦,不需要再去调用方法,直接切换布尔值就可以切换标签的class,
结合返回对象的计算属性方法更加哦,就是将classObject设置为一个计算属性,返回值是一个对象
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
isActive: true,
hasError: false
}
//{ active: isActive, 'text-danger': hasError } 完全可以由一个对象去代替
<div v-bind:class="classObject"></div> 那么data那里相应的也用classObject
2:数组语法:感觉没什么卵用
<div v-bind:class="[activeClass, errorClass]"></div>
//这里似乎只是为了设置class,那我干脆直接写calss,不知道有什么用
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
3:style的使用
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject"></div>
//参照上面的对象语法,并且也可以结合返回对象的计算属性使用更加