1.v-指令
//1.绑定类
1.1 v-bind="" 可缩写为 :="" （数据只能从data流向页面）
:=""
绑定样式：1.class样式
写法：class="xxx" xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2.style样式
:style="{fontSize:xxx}"其中xxx是动态值
:style="[a,b]"，其中a、b是样式对象
1.2 v-model="" （双向数据绑定，一般都应用在表单类元素上，如input、select等）
v-model:value 此处可简写为v-model，因为v-model默认收集的就是value值
收集表单数据：若<input type="text"/>，则v-model收集的是value的值，用户输入的就是value值
若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
若<input type="checkbox"
1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
2.配置input的value属性：
（1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
（2）v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
1.3 v-on="" （绑定事件，可简写为 @事件绑定类型="" ,例如@click=""）
//2.页面类
2.1 v-text=""
2.2 v-html="" v-html有安全性问题！！！
（1）在网站上动态渲染任意HTML是危险的，容易导致XSS攻击
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
//3.显示类
3.1 v-if="" （当v-if的值为false时，会将此元素直接从DOM树上清除，v-if有更高的切换开销）
3.2 v-show="" （当v-show的值为false时，会调用display:none，v-show有更高的初始渲染开销）
//4.条件判断类
v-if=""
v-else-if=""
v-else=""
//5.循环类
写法一：v-for="item in items"
写法二：v-for="(item, index) in items" :key="item.id"
//6.v-once：
1.v-once所在节点在初次动态渲染后，就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
//7.v-pre 1.跳过该元素及其所有子元素的编译
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
//8.v-cloak(没有值)
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
2.Object.defineProperty()
let number = 18
let person = {
name:'张三',
sex:'男'
}
Object.defineProperty(person,'age',{
value:18,
enumerable:true, //控制属性是否可以枚举，默认值为false
writable:true, //控制属性是否可以被修改，默认值为false
configurable:true //控制属性是否可以被删除，默认值为false
get(){
console.log('有人读取age属性了')
return number
},
set(value){
console.log('有人修改了age属性，且值为',value)
number = value
}
})3.vue中数据代理初识
4.事件修饰符
vue中的事件修饰符
1.prevent：阻止默认事件
2.stop：阻止事件冒泡
3.once：事件只触发一次
4.capture：使用时间的捕获模式
5.self：只有event.target是当前操作的元素是才触发事件
6.passive：时间的默认行为立即执行，无需等待事件回调执行完毕5.键盘事件
1.vue中常用的按键别名：
回车 => enter
删除 => delete （捕获"删除"和"退格键"）
退出 => esc
空格 => space
换行 => tab
上 => up
下 => dowm
左 => left
右 => right
2.vue未提供别名的按键，可以使用原始的key值去绑定，但注意要转为kekab-case （短横线命名）
3.系统修饰符（用法特殊）：ctrl、alt、shift、meta
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，时间才被触发
（2）配合keydowm使用：正常触发事件
4.也可以使用keyCode去指定具体的按键（不推荐）
5.vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
6.计算属性
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
}
computed:{ //计算属性完整写法
fullName:{
get(){
return this.firstName+'-'+this.lastName
},
set(value){ //注意此处有一个value值
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
},
fullName(){ //当我们只考虑get时，不考虑set时，我们可以使用简写方式
return this.firstName+'-'+this.lastName
}
}
})
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
（1）初次读取时会执行一次
（2）当依赖的数据发生改变时会被再次调用
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可
2.如果计算属性要被改变，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变7.监视属性
监视的第一种方式：new Vue({
el:'#root',
data:{
},
watch:{ //监视属性完整写法
isHot:{
immediate:true, //初始化时让handler调用一下
deep:true, //开启深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
isHot(newValue,oldValue){ //监视的简写形式
console.log('isHot被修改了',newValue,oldValue)
}
}
})
监视的第二种方式：vm.$watch('isHot',{ //vm.$watch完整版写法
immediate:true,
deep:true
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
vm.$watch('isHot',function(newValue,oldValue){ //vm.$watch简写形式
console.log('isHot被修改了',newValue,oldValue)
})
注意：1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种方法：
（1）new Vue时传入watch配置
（2）通过vm.$watch监视
深度监视：
（1）Vue中的watch默认不监测对象内部值得改变（一层）
（2）配置deep：true可以监测对象内部值改变（多层）
备注：
（1）Vue本身可以监测对象内部值的改变，但Vue提供的watch默认不可以
（2）使用watch时根据数据的具体结构，决定是否采用深度监视8.computed和watch直接的区别
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成
2.watch能实现的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样的this指向才是vm或组件实例对象
2.所有不被Vue所管理的函数（定时器的回调函数、Ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象9.Vue如何监视数据？
1.vue会监视data中所有层次的数据
2.如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要检测的数据
（1）对象中后追加的属性，Vue默认不做响应式处理
（2）如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value) 或
vm.$set(target,propertyName/index,value)
3.如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set()或vm.$set()
特别注意：Vue.set()和vm.$set() 不能给vm或vm根数据对象添加属性！！！10.过滤器
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1.注册过滤器：Vue.filter(name,callback)或new Vue(filters:{})
2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接受额外参数，多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据11.自定义指令
自定义指令
一、定义语法：
（1）局部指令：
new Vue({
directives:{指令名:配置对象}
})
或
new Vue({
directives:{指令名:回调函数}
})
（2）全局指令：
Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调
（1）bind：指令与元素成功绑定时调用
（2）inserted：指令所在元素被插入页面时调用
（3）update：指令所在模板结构被重新解析时调用
三、备注：
1.指令定义时不加v-，但使用时要加v-
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名12.生命周期初识
13.非单文件组件
非单文件组件：一个文件中包含有n个组件
单文件组件：一个文件中只包含有一个组件
Vue中使用组件的三大步骤：
一、定义组件（创建组件）
二、注册组件
三、使用组件（写组件标签）
一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个option几乎一样，但也有区别
区别如下：
1.el不要写，为什么？
最终的所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
2.data必须写成函数，为什么？
避免组件被服用时，数据存在引用关系
备注：使用template可以配置组件结构
二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签
<School></School>
关于VueComponent：
1.School组件本质上是一个名叫VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写<School></School>或<School/>，vue解析时会帮我们创建School组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！
4.关于this指向：
（1）组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象
（2）new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的指向均是Vue实例对象
5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
Vue的实例对象，以后简称vm
14.Vue与VueComponent的关系
一个重要的内置关系 ：VueComponent.prototype.__proto__===Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
