回顾：
```
Object.defineProperty
let obj = {
a:10
}
let a = 10;
Object.defineProperty(obj,‘a‘,{
get(){
// 拦截了 对于 obj对象a属性 获取的操作
return a;
},
set(val){
// 拦截对于obj对象a 赋值的操作
a = val;
}
})
obj.a = 20;
new一个 vue实例
data:{
a:{
a:{
b:{}
}
}
}
vue 自动遍历（递归）,data属性，将所有的 属性都 放到 getter/setter（池），设置 任意一个数据，对于setter就会拦截到，通知 watcher 自动去调用函数 render,生成 虚拟dom,跟上一次 已经缓存的虚拟dom进行比较（diff算法），得到最优渲染方案，尽量较少dom操作
问题？
1，对象， 对象如果是 动态添加的 监听不了 （数据变化不会刷新）
2，数组 arr[下标]=值 arr.length = newLength
Vue.set()
this.$set(对象,属性,值)
this.$set(数组,下标,值)
```
## 表单修饰符 修饰v-model
+ lazy
将 v-model 由原来 input事件改为 change事件触发
+ number
将v-model绑定的值，自动过滤成数字（按照parseFloat 顺序解析）（如果需要开头就是非数字字符，失去功能）
+ trim
去除开头结尾空格
## ref 方便获取dom
```
vue 尽量不要去操作dom，以数据驱动
<div ref="box">
<p ref="op">
实例 this.$refs
{
box:div, //div这个dom对象
op: p //p这个dom对象
}
this.$refs[‘box‘]
this.$refs.box
```
## 侦听器 （监控 数据变化，数据变化时，回调自动触发）
新增 watch属性
什么时候用： 需要 监听一个数据变化，当这个数据变化时，我需要做其他的操作
```
新增 watch属性
let vm = new Vue({
el:‘xx‘,
data:{
msg:"a",
obj:{
a:10,
b:20
}
},
watch:{
// 监听基本数据类型
msg(newVal,oldVal){
},
// 监听对象属性
‘obj.a‘(newVal,oldVal){
},
// 监听对象
obj:{
handler(newVal,oldVal){
},
deep:true //深度监听
}
}
})
```
## 计算属性
```
语法：
新增 computed属性
{
data:{
msg:‘hello world‘
},
computed:{
msg2(){ // 写法是 方法 编译到实例上 是和 data中的属性一样的 值（不是函数）
return this.msg.split(‘‘).reverse().join(‘‘);
}
}
}
注意：
计算属性 名字 不能和 data（methods）中 已存在的 属性 重名
计算不要去修改 计算属性的值 应该去修改 计算属性依赖的值
如果需要修改计算属性
计算属性 需要 使用 get和set的写法
{
data:{
msg:‘hello world‘
},
computed:{
msg2:{
get(){
return this.msg.split(‘‘).reverse().join(‘‘);
},
set(val){
// 每一次修改 计算属性时，set触发，同时，修改的值，通过val传入
this.msg = val;
}
}
}
}
```
## 组件
理解网页上 独立 区域（每一个标签都可以理解为是一个组件）
vue组件 组件 也是 Vue的实例（不是显式new Vue）（new Vue创建实例），实例有的方法组件都有
```
如何创建组件
取决这个组件定义的哪里
全局组件
在任意其他的组件中 都可以使用
Vue.component(组件名,{
template: 指定当前组件的 视图
data,
methods,
watch,
computed
})
eg:
let CommonHead = {
template:`
<div>
<h1>我是公共的头部{{title}}</h1>
<h2>我是组件的副标题</h2>
{{ msg }}
{{ msg2 }}
<button @click="change">改变title</button>
</div>
`,
data(){
return {
title:"我是标题",
msg:‘hello world‘
}
},
methods:{
change(){
this.title = "我是另一个标题"
}
},
computed:{
msg2(){
return this.msg.split(‘‘).reverse().join(‘‘)
}
}
}
// Vue.component(‘CommonHead‘,CommonHead);
Vue.component(‘common-head‘,CommonHead);
局部组件
在其他实例的 components属性中注册
let SubHead = {
template:`
<div>
我是局部组件
</div>
`
}
let CommonHead = {
template:`
<div>
<h1>我是公共的头部</h1>
<sub-head></sub-head>
</div>
`,
components:{
SubHead
}
}
注意：
1，组件的data属性必须是 函数 返回 对象(组件 需要复用，如果直接是对象，那么多次使用，使用的是同一个对象，)，函数返回对象（闭包），让 组件在每一次使用的时候，都一个独立空间
2，组件的template 必须，只有一个根元素
3，每个组件都有自己的作用域（data中数据只能在自己的template渲染，自己template中绑定方法，只能是自己这个组件methods中的）
```
回顾：
```
Object.defineProperty
let obj = {
a:10
}
let a = 10;
Object.defineProperty(obj,‘a‘,{
get(){
// 拦截了 对于 obj对象a属性 获取的操作
return a;
},
set(val){
// 拦截对于obj对象a 赋值的操作
a = val;
}
})
obj.a = 20;
new一个 vue实例
data:{
a:{
a:{
b:{}
}
}
}
vue 自动遍历（递归）,data属性，将所有的 属性都 放到 getter/setter（池），设置 任意一个数据，对于setter就会拦截到，通知 watcher 自动去调用函数 render,生成 虚拟dom,跟上一次 已经缓存的虚拟dom进行比较（diff算法），得到最优渲染方案，尽量较少dom操作
问题？
1，对象， 对象如果是 动态添加的 监听不了 （数据变化不会刷新）
2，数组 arr[下标]=值 arr.length = newLength
Vue.set()
this.$set(对象,属性,值)
this.$set(数组,下标,值)
```
## 表单修饰符 修饰v-model
+ lazy
将 v-model 由原来 input事件改为 change事件触发
+ number
将v-model绑定的值，自动过滤成数字（按照parseFloat 顺序解析）（如果需要开头就是非数字字符，失去功能）
+ trim
去除开头结尾空格
## ref 方便获取dom
```
vue 尽量不要去操作dom，以数据驱动
<div ref="box">
<p ref="op">
实例 this.$refs
{
box:div, //div这个dom对象
op: p //p这个dom对象
}
this.$refs[‘box‘]
this.$refs.box
```
## 侦听器 （监控 数据变化，数据变化时，回调自动触发）
新增 watch属性
什么时候用： 需要 监听一个数据变化，当这个数据变化时，我需要做其他的操作
```
新增 watch属性
let vm = new Vue({
el:‘xx‘,
data:{
msg:"a",
obj:{
a:10,
b:20
}
},
watch:{
// 监听基本数据类型
msg(newVal,oldVal){
},
// 监听对象属性
‘obj.a‘(newVal,oldVal){
},
// 监听对象
obj:{
handler(newVal,oldVal){
},
deep:true //深度监听
}
}
})
```
## 计算属性
```
语法：
新增 computed属性
{
data:{
msg:‘hello world‘
},
computed:{
msg2(){ // 写法是 方法 编译到实例上 是和 data中的属性一样的 值（不是函数）
return this.msg.split(‘‘).reverse().join(‘‘);
}
}
}
注意：
计算属性 名字 不能和 data（methods）中 已存在的 属性 重名
计算不要去修改 计算属性的值 应该去修改 计算属性依赖的值
如果需要修改计算属性
计算属性 需要 使用 get和set的写法
{
data:{
msg:‘hello world‘
},
computed:{
msg2:{
get(){
return this.msg.split(‘‘).reverse().join(‘‘);
},
set(val){
// 每一次修改 计算属性时，set触发，同时，修改的值，通过val传入
this.msg = val;
}
}
}
}
```
## 组件
理解网页上 独立 区域（每一个标签都可以理解为是一个组件）
vue组件 组件 也是 Vue的实例（不是显式new Vue）（new Vue创建实例），实例有的方法组件都有
```
如何创建组件
取决这个组件定义的哪里
全局组件
在任意其他的组件中 都可以使用
Vue.component(组件名,{
template: 指定当前组件的 视图
data,
methods,
watch,
computed
})
eg:
let CommonHead = {
template:`
<div>
<h1>我是公共的头部{{title}}</h1>
<h2>我是组件的副标题</h2>
{{ msg }}
{{ msg2 }}
<button @click="change">改变title</button>
</div>
`,
data(){
return {
title:"我是标题",
msg:‘hello world‘
}
},
methods:{
change(){
this.title = "我是另一个标题"
}
},
computed:{
msg2(){
return this.msg.split(‘‘).reverse().join(‘‘)
}
}
}
// Vue.component(‘CommonHead‘,CommonHead);
Vue.component(‘common-head‘,CommonHead);
局部组件
在其他实例的 components属性中注册
let SubHead = {
template:`
<div>
我是局部组件
</div>
`
}
let CommonHead = {
template:`
<div>
<h1>我是公共的头部</h1>
<sub-head></sub-head>
</div>
`,
components:{
SubHead
}
}
注意：
1，组件的data属性必须是 函数 返回 对象(组件 需要复用，如果直接是对象，那么多次使用，使用的是同一个对象，)，函数返回对象（闭包），让 组件在每一次使用的时候，都一个独立空间
2，组件的template 必须，只有一个根元素
3，每个组件都有自己的作用域（data中数据只能在自己的template渲染，自己template中绑定方法，只能是自己这个组件methods中的）
```
