1.vm.$data.msg === vm.msg
2.数据绑定: mustache{{}}(插值语法)
从data中获取,不作用在html属性上
3.双相数据绑定(简单的例子)
4.动态添加数据
1 Vue.set(object, key, value) - 适用于添加单个属性
2 Object.assign() - 适用于添加多个属性
5.异步DOM的更新
如果需要那到更新后dom中的数据 则需要通过 Vue.nextTick(callback):在DOM更新后,执行某个操作(属于DOM操作)
实例调用vm.$nextTick(function () {})
6.指令:
v-text
Message is: {{ message }}
v-for{{item}} -- {{index}}
{{item}} -- {{key}}
{{item}}
key属性 6.样式处理 -class和style ===> 解析后 ===>解析后 ===>解析后v-if v-show v-pre v-once
7.过滤器 filter(全局过滤器,局部过滤器)
过滤器可以用在两个地方:{{}}和 v-bind 表达式
通过全局方式创建的过滤器,在任何一个vue实例中都可以使用
注意:使用全局过滤器的时候,需要先创建全局过滤器,再创建Vue实例
显示的内容由过滤器的返回值决定
局部过滤器
说明:局部过滤器是在某一个vue实例的内容创建的,只在当前实例中起作用
{
data: {},
// 通过 filters 属性创建局部过滤器
// 注意:此处为 filters
filters: {
filterName: function(value, format) {}
}
}
8.按键值修饰符
9.监视数据变化
概述:watch是一个对象,键是需要观察的表达式,值是对应回调函数
作用:当表达式的值发生变化后,会调用对应的回调函数完成响应的监视操作
VUE $watch
new Vue({
data: { a: 1, b: { age: 10 } },
watch: {
a: function(val, oldVal) {
// val 表示当前值
// oldVal 表示旧值
console.log('当前值为:' + val, '旧值为:' + oldVal)
},
// 监听对象属性的变化
b: {
handler: function (val, oldVal) { /* ... */ },
// deep : true表示是否监听对象内部属性值的变化
deep: true
},
// 只监视user对象中age属性的变化
'user.age': function (val, oldVal) {
},
}
})
10.计算属性变化
说明:计算属性是基于它们的依赖进行缓存的,只有在它的依赖发生改变时才会重新求值
注意:Mustache语法({{}})中不要放入太多的逻辑,否则会让模板过重、难以理解和维护
注意:computed中的属性不能与data中的属性同名,否则会报错
Vue computed属性原理
var vm = new Vue({
el: '#app',
data: {
firstname: 'jack',
lastname: 'rose'
},
computed: {
fullname() {
return this.firstname + '.' + this.lastname
}
}
})
11.实例生命周期
12.自定义指令
13.组件(全局组件,局部组件)
14.组件通讯
父子组件传值
内容分发
获取组件(或元素) - refs
15.路由
基本使用
重定向
路由其他配置
路由参数
嵌套路由
16.