配置对象：
1.methods:
fun()
2.watch:
监视属性:
1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
2. 监视的两种写法:
(1)new Vue时传入watch配置
(2)通过vm.$watch监视
computed: ...
methods: ...
watch:{
name:{
immediate:true,
deep: true,
handler (newValue, oldValue){
console. log( 'name 被修改了', '修改前的值：' + oldValue, '修改后的值：' + newValue)
}
}
name(newValue, oldValue){
console.log('name被修改了', newValue, oldValue)
}
vm.$watch('name', {
immediate:true,
handler(newValue, oldValue) {
console.log('name 被修改了', newValue，oldValue)
}
}
3.computed:
fun
4.filters:
过滤器:
定义:
对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法:
1. 注册过滤器: Vue.filter(name, callback)或new Vue{filters:{}}
2. 使用过滤器: {{xxx|过滤器名}} 2.v-bind:属性="xxx|过滤器名"
备注:
1. 过滤器也可以接收额外参数、多个过滤器也可以串联
2. 并没有改变原本的数据，是产生新的对应的数据
内置指令：
v-bind:
1.单向绑定解析表达式，可简写为“:xxx”
2.🔺v-bind:a='1'指令动态属性绑定是作为JS表达式运行，(在后期CLI子级中接收数据时可以进行运算等，如：{{a + 1}})
而不使用v-bind的静态属性赋值a="1"即“1”为字符串形式赋值给“a”
v-model:
1.双向绑定一般只应用在表单类元素上(如: input、select等)
2.此指令默认收集的为value值，所以v-model:value='xxx(被绑定的属性)'可简写为v-model='xxx'
v-for:
遍历数组/对象/字符串
v-on:
1.绑定事件监听，可简写为@
2.事件修饰符：
(1)prevent:阻止默认事件(常用);
(2)stop:阻止事件冒泡(常用);
(3)once:事件只触发一次(常用);
(4)capture:使用事件的捕获模式;
(5)self:只有event、target是当前操作的元素时才触发事件;
(6)passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
<button @click.stop="fun">点击事件</button>
methods:{
fun(event){
console.log(event.target(事件目标元素).innerText)
console.log(this)
3.传参：防止事件参数丢失用$event标记事件形参
<button @click="fun($event, 123)">传参“123”</button>
fun(event, num){
console.log(event, num)
v-if:
条件渲染(动态控制节点是否存存在)
v-else:
条件渲染(动态控制节点是否存存在)
v-show:
条件渲染(动态控制节点是否展示)
v-text:
1. 向其所在的节点中渲染文本内容
2. 与插值语法的区别: v-text会替换掉节点中的内容，{{xxx}}则不会
<div>你好，{{name}}</div>
<div v-text="name"></div>
v-html:
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
(1)v-html会替换掉节点中所有的内容，{{xxx}}则不会
(2)v-html可以识别html结构
3.严重注意: v-html有安全性问题
(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
(2)要在可信的内容上使用v-html,永不要用在用户提交的内容上
<div>你好，{{name }}</div>
<div v-html="str"></div>
v-cloak(没有值):
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<style>
[v-cloak]{
display:none
}
</style>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
v-once(没有值):
1.v-once所在节点在初次动态渲染后，就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
<div id="root">
<h2 v-once>初始n值是:{{n}}</h2>
v-pre:
1.跳过其所在节点的编译过程
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译
