一、Vue基本使用
| el的两种写法 | el:'#root'，t.$mount('#root') |
| data的两种写法 | 对象式data:{} 函数式 data(){ return{ } } |
| 插值语法 | {{name}} |
| 指令语法 | <a v-bind:href='vue实例地址'> |
| Vue.config.productionTip = false | 阻止vue在启动时生成生产提示 |
| v-text | 不识别html标签 |
| v-html | 识别html标签 慎用容易透露个人信息等 |
v-on:click ,@click |
绑定事件 简写 |
v-show |
根据真假值切换元素的显示状态 操作样式显示隐藏 |
| v-if | 根据真假值切换元素的显示状态 操作元素删除或插入 |
| v-bind | 单向绑定 v-bind 简写 : ，双向绑定 v-model="name" |
| v-for | 遍历 |
| v-cloak | v-cloak 指令未解析存在解析消失 [v-cloak] {display: none; } |
| v-once | 初始化的元素 |
| v-pre | 跳过节点不解析 |
二、Vue MVVM模型 数据代理
MVVM模型
| M | Model data中的数据 |
| V | View 模板代码 |
| VM | 视图模型ViewModel vue实例 |
| data中的所有属性 最后都在 vm身上 vm指的vue | |
| vm身上的所有属性及Vue原型身上的所有属性 在Vue模板中可以直接使用 | |
三、数据代理
数据代理:通过一个对象代理对另一个对象中属性的操作（读/写）
Object.defineProperty方法
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})vue中的事件修饰符:
1.prevent:阻止默认事件（常用);2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素是才触发事件;
6.passive:事件的欧认行为立即执行,无需等待事件回调执行完毕;
计算属性setter getter
绑定样式我们可以传给 v-bind:class 一个对象，以动态地切换 class：可以为字符串 对象 数组
对象语法<div class='static' v-bind:class="{ active: isActive, 'text-danger': hasError }"data:{isActive:true,hasError:false}结果为<div class='static active’>
<div id="root">
姓:<input type="text" v-model="firstName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
全名:<span> {{fullName}}</span>
<!-- 只读取三个.sclic(0,3) -->
<!-- 全名:<span> {{fullName.sclic(0,3)}}</span> -->
<!-- <button @click="fullName()">点我啊</button> -->
</div> <script>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
},
computed: {
fullName: {
// 完整写法
//get有什么作用?当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时
get() {
console.log('调用get');
return this.firstName + '-' + this.lastName
},
// set有什么作用?当有人修改fullName时
set(value) {
console.log('set', value);
const arr = value
this.firstName = arr[0]
this.lastName = arr[1]
}
// 简写
// fullName(){
// console.log('调用get');
// return this.firstName +'-'+ this.lastName
// }
}
}
})监听属性
// 监视属性watch 可以异步 :
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch:{ }配置(2).通过vm.$watch监视
数组监听在Vue修改数组中的某个元素—定要用如下方法
push()pop()unshift()shift()splice()sort()reverse()这几个方法被Vue重写了Vue.set()或vm.$set()
特别注意:Vue.set()和vm.$set()不能给vm 或vm 的根数据对象(data等)添加属性
深度监视:
(1).vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注:
(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视。 -->
watch:{ } 简写vm.$watch
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成，例如: watch可以进行异步操作。两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等）
最写成箭头函数,这样this的指向才是vm或组什实例对象。
四、Vue生命周期
可理解为 创建 挂载 更新 销毁
