摘要
这是一篇vue框架关于BV1Zy4y1K7SH的观后感，建议有一定web开发基础，微信小程序开发经验的可以学习。
1 Vue安装初始环境
（1） 使用<script>标签引用
（2）NPM安装
ps：使用Vue.config.productionTip=false 关闭生产提示，安装Vuetool
2 模板语法数据绑定
2.1 大胡子语法 {{ }} 绑定标签体内容
2.2 指令语法:属性名绑定属性内容，如:href="url"
ps:表单输入类元素，使用v-model="xxx"实现双向数据绑定，
{{ }}中可以放置表达式和有返回值的函数{{fun()}}
3 el与data的两种写法
el：
1.在new Vue时绑定选择容器元素el:'#root'
2.在new Vue时不绑定容器元素，使用$mount('#root')将Vue挂载到某个容器(灵活性高)
data:
1.以对象形式声明data:{……}
2.以函数形式声明
data:function(){
return{
……
}
}
3 Object.defineProperty方法
Object.definePropertys 是数据代理的基础
let number = 18;
let person = {
name:'张三';
sex:'男';
}
Object.definePropertys(person,'age',{
value: //为key 'age'设置值
enumerable:true //是否可枚举
writable:true, //是否可修改
configurable:true, //是否可被删除
get(){
console.log('age属性被读取时调用');
return number;
},
set(value){
console.log('age属性被修改时调用',value);
},
});
4 事件
使用v-on:xxx或@xxx如@click绑定事件
不要用箭头函数，否则this就不是vm了
this一般指向的是vm或组件实例对象
传参时用@click='fun($event,index,data-xxx)'可携带更多参数, 其中fun为方法名
4.1 事件修饰符：
@click.stop="fun"
prevent：阻止默认事件
stop：阻止事件冒泡
once：事件只触发一次
capture：事件的捕获
self：只有event.target是当前操作元素才触发事件
passive：默认事件立即致谢，无需等待事件自定义回调执行完毕
ps:在嵌套关系中的执行顺序，事件的捕获是从外到内，事件的冒泡是从内到外。
修饰符是可以连着写的@click.prevent.stop="fun"
4.2 键盘事件
键盘事件不得不提e.key键名，键码e.keyCode
（1）通过键名、键别名捕获：如esc键被弹起@keyup.esc
常用按键别名：
enter
delete
esc
space
tab
up、down、left、right
（2）通过键码捕获@keyup.13
不建议使用，因为不同键盘键码可能不一样，不适合多用户程序使用。
ps：系统修饰键ctrl、alt、shift、meta（win、option键）建议搭配keydown使用
5 计算属性
虽然{{ }}大胡子语法内可放置表达式和有返回值的method，但表达式在h5中可能拼接过长不太雅观；后者效率堪忧，每用到method都会调用一次。所以有必要使用计算属性了。
一般地，属性会放置在实例的data:{……}中，计算属性则是位于computed:{……}中
例如此处设置计算属性fullName，通过data属性中的firstName和lastName计算fullName。
computed:{
fullName:{
get(){
return this.firstName + this.lastName;
},
set(value){
//todo
}
}
}
// 计算属性中的get何时执行?
//（1）初始化时会执行一次将计算结果存入缓存，
//（2）或者积木们有被修改后，计算结果被刷新存入缓存
// 计算属性如何双向绑定？
// 在set方法中设法修改积木们的值，达到重新计算的效果
ps：计算属性好处在于，可以通过缓存减少method调用
6 侦听属性
侦听属性用watch:{……}表示，
用来侦听data中的属性和computed中的计算属性
当侦听属性发生变化时，回调函数handler发生调用
（1）可以在初始化实例时配置侦听属性
watch:{
isHot:{
immediate:true, //初始化时调用一次handler
deep:true, // 当isHot属性的值为对象或嵌套多层对象时是否深入侦听
handler(newValue,oldValue){
console.log('isHot has changed',newValue,oldValue)
}
}
}
（2）也可以手动调用$watch实现侦听属性
vm.$watch('isHot',{
immediate:true, //初始化时调用一次handler
deep:true, // 当isHot属性的值为对象或嵌套多层对象时是否深入侦听
handler(newValue,oldValue){
console.log('isHot has changed',newValue,oldValue)
}
})
7 绑定动态样式
//css部分
.qwer{
font-size=666px;
},
.s1{……}, .s2{……}, .s3{……}
//h5部分
:style="t"
:class="cc"
:class="sofArr"
:class="sofObj"
// vue属性
data:{
t:'font-size=666';
cc:'qwer' //可以替换指定为已定义的任意类样式
sofArr:['s1','s2','s3'] //可以增减为多个已定义的任意类样式
sofObj:{
s1:true,
s1:true,
}
}
8 条件渲染
条件渲染，符合布尔boolean表达式值为true的才会渲染，如v-if = true
v-show、v-if、v-else-if、v-else
v-if 后有else判断时，要求结构不能被打断
v-if 效率不如 v-show
如果条件渲染的部分需要用一个盒子包裹，则使用v-if与template标签的组合。
9 列表渲染
（1）遍历数组，数组内多个对象
<li v-for=(p,index) of persons :key="p.id" >
{{p.index}} {{p.name}} {{p.age}}
</li>
// js部分 在data中定义
persons:[
{id:'001',name:'张三',age:15},
{id:'002',name:'李四',age:16},
{id:'003',name:'王五',age:17},
]
（2）遍历对象
这将会输出该对象的所有的键值对
<li v-for=(value,k) of persons >
{{k}} {{value}}
</li>
//js部分
person:{id:'004',name:'赵六',age:18},
（3）遍历字符串
<li v-for=(char,index) of str>
{{char}} {{index}}
</li>
//js部分
str:'helloWorld'
（4）遍历指定次数
<li v-for=(num,index) of 5>
{{num}} {{index}}
</li>
ps：:key的值建议使用对象的id，而不是使用index
10 :key的作用和原理
遍历列表时先遍历:key作比较，
:key参与了，虚拟dom转真实dom的过程，
有新:key的用新:key转真实dom，无新:key则比较新旧:key的文本和元素决定是否服用原真实dom，不再转换
ps:如何正确使用:key ？ （1）使用数据的唯一标识id作为:key（2）以栈的形式顺序无插队增删列表时，仅用于显示时使用默认的index作为key没有问题。
11 列表过滤
列表过滤，模糊查询，使用filter，结合计算属性或者侦听属性的双向绑定实现。
12 列表排序
数组排序使用sort方法
13 表单数据
表单数据双向绑定依赖于v-model属性的值，和h5标签的value属性。
使用v-model绑定的变量接收h5标签中value属性的值。
特例：
（1）单选框没有设置value时，获取的是checked的布尔值，是否选择
（2）多选框v-model绑定数组时，获取的是多选value值组成的数组；
多选框绑定非数组时，获取的是checked布尔值。
v-model三个修饰符：lazy失去焦点再获取，number获取内容转数字，trim去掉首尾空格
14 过滤器
（1）局部过滤器
new Vue(filters:{})
（2）全局过滤器
Vue.filter(name,callback)
使用过滤器：（1）{{xxx | 过滤器}}、（2）:type="xxx | 过滤器"
