①组件的注册
全局组件注册
Vue.component('组件名',{
data() {
return {
}
},
template: '<div></div>'
})
通过props向子元素传递数据
子组件通过$emit('xxx')向父组件发起通信
②计算属性和侦听器
计算属性的使用，如果是对象，则可以提供get和set方法类似于Object.defineProperty,如果是函数，默认是get方法
computed: {
fullName: {
get(){
return this.firstName + '-' + this.lastName
},
set(){
}
},
fullName(){
}
}
计算属性缓存vs方法
计算属性是基于响应式依赖进行缓存，效率更高。
侦听器
对象形式可以配置是否立即执行函数，是否深度监听，如果不需要可以直接写成函数形式
watch: {
number: {
handler(newValue,oldValue) {
//处理函数 固定
console.log('处理函数',newValue,oldValue)
},
immediate: true, //是否立即执行
deep: true //深度监听，适用于对象
},
//简写形式
number(){
}
}
计算属性vs侦听属性
计算属性不需要在data里定义属性，直接使用。侦听属性写的代码相对复杂。计算属性不能开启异步任务维护数据，比如定时器
③Class和Style的绑定
Class的绑定
注意""中字符如果没加''会被当成data中的数据解析
<!-- 对象写法 -->
<div class="basic" :class="{active:isActive,error:isError}"></div>
<!-- 数组写法 -->
<div class="basic" :class="['active','error']"></div>
<div class="basic" :class="[{active:isActive},'error']"></div>
isActive: true,
isError: true
Style绑定
注意：例如font-size这种写法应写成fontSize小驼峰形式
<!-- 对象写法 -->
<div :style="{width:'100px',height:'100px',background:'blue',fontSize:'20px'}">好的</div>
<!-- 数组写法 -->
<div :style="[{width:'100px',height:'100px'},{background:'blue',fontSize:'20px'}]">好的</div>
④条件渲染
v-if v-else-if v-else
配合使用需连续
v-show
切换频繁时推荐使用，不用频繁的增加、删除dom。v-show和template不能同时使用。
不推荐v-for和v-if一起使用v-for的优先级高
⑤列表渲染
v-for的使用
<div v-for="(item,index) in items">{{item.message}}-{{index}}</div>
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
在v-for中使用key
key要求可以唯一标识，有利于vm的复用，当data中数据发生改变时,生成vm与上次的vm进行对比，用key标识的数据没变动的直接复用。不建议用index做为key，index可能顺序发生改变导致vm不能复用，在form表单中不对比用户输入的值，用户输入的 值不属于vm
⑥事件处理
使用v-on指令监听dom事件v-on可简写为@
事件修饰符
.prevent //阻止默认事件
.stop //阻止事件冒泡
.once //事件只触发一次
.capture //事件捕获时触发
.self //e.target是自己时触发
.passive //默认行为先执行，再触发回调函数
⑦vue监测数据改变原理
问题
<div id="app">
{{student.name}}-{{student.age}}-{{student.sex}}
</div>
const vm = new Vue({
el: '#app',
data() {
return {
student:{
name:'zqf',
age: 18
}
}
},
})
vm.student.sex = '男'
此时在对象上增加属性，不能发生响应式的改变。
原因：初始化,vue会对data中的数据做一层代理，对每一个变量和属性会有一个get和set方法，然后放在vm上和vm._data中，其实vm._data和data中的数据是一个东西。
解决方法：vm.$set()或者Vue.set()
vm.$set(vm.student,'sex','男')
注意：必须像响应式的对象上添加新property，vue无法探测普通的新增property比如this.myObject.newProperty = 'hi')
数组
在_data属性中发现vue对数组中的项没有实现set和get方法，但是vue实现了对数组的
push(、
pop()
unshift()
shift()
sort()
reverse()
slice()
方法的监听,数组调用这些方法会触发视图的更新。
⑧在对象上对每个属性实现监听简易实现
let data = {
firstName: '',
lastName: '',
number: 1,
isActive: true,
}
function Obvious(data){
var arr = Object.keys(data)
arr.forEach( k => {
Object.defineProperty(this,k,{
get() {
return data[k]
},
set(val){
//触发视图更新
data[k] = val
}
})
});
}
let obs = new Obvious(data)
