v-once
input框时时监控让其中的一个不时时更新指令v-once
v-cloak
在渲染页面是，我么可以使用v-cloak属性 在style样式中设置display：none，在拥有这个属性的div中就不会出现抖动
v-if和v-show
两者都是隐藏标签，但v-if是只在缓存中，不在页面上渲染，但是v-show是在页面上渲染的标签的
他们的变量都是布尔类型
v-if 和v-else-if和v-else 条件指令家族
在满足这里的满足条件过后，不执行其它的和pathon后端是一样的
案列，原理就是通过v-if的显示标签，来达到隐藏标签
我么在button绑定一个统一的事件，然后每一个事件的传入的参数又都不一样
然后我们就可以在app的data中去赋值，然后在div中我们用v-if来判断data中取得值是否是我么button中传入的值，如果是就是ture。，如果不是就是false就不显示
v-pre原义指令
在标签中如果是有了这个指令就会原样输出
{{}msg}
v-for循环指令
循环字符串和列表，有两个参数，第一个是值，第二个是索引
循环字典有三个参数，第一个是value，第二个是key 第三个是key的索引
案例
就是通过input框的v-model指令来时时更新data中的user_msg数据
然后通过button绑定事件，我们就可以将用户留言的数据添加到msg字典中
然后就是通过v-for循环出来得到值和index序号
然后将序号的这个span标签在绑定事件，然后将index传入到事件函数中在函数中取删除掉
data中的msg中的数据
前端页面数据库的保存，关键字localStorage，注意一般我们需要将数据json化
实例属性
为了避免后端与前端页面的数据符号的冲突，我们可以自定义差值表达式的符号
delimiters：['{[',']}']
计算属性
一个变量的值依赖多个变量的值，且任意被依赖的变量的值发生改变。依赖的这个变量也会随之改变
computed是用来声明方法属性的，而且在data中是不能重复定义的，还要在页面渲染使用，才能监控data中的变量属性
computed：{result（）{return 返回的就是页面result变量的值}}
属性监听
多个变量依赖一个变量，在data中都要有变量
通过watch
这里的return返回值是没有什么用的
watch:{ num(){ 修改data里面另外的变量的值 return 返回值是没用的 }}
组件
组件分为跟组件，全局组件，和局部组件
一般只有一个跟组件new Vue，全局组件，不需要注册，局部组件需要注册，都有一个template
局部组件
关键符号{}
需要在components中注册，才能使用
局部组件的定义方式，在script标签中
直接一个变量等于一个大括号
里面有一个template，反引号，里面写标签代码
template中的标签为单标签，不然只渲染一个标签
let 局部组件变量名={template:`标签代码`}
用法，直接就在更标签中使用自定义标签
全局组件
关键字
Vue.component
Vue.component('组件变量名'{ template:{ 单标签 }， data(){ return { num:0 } } methods:{ this.变量 } })
这里的data是一个函数，返回了一个字典
还可有自己的methods
this还是它事件操作的属性
数据的传输父传子
在局部组件中需要用到组件中的data中的数据
然后通过props：[ ],列表中的数据就是局部组件自定义的属性的名称
然后可以通过这个名称获取值
这里注意，在局部组件中的标签，中的属性都需要加冒号
let local_tag = { template:` <div class="box"> <img :src="myfor.image" alt=""> <h3>{{ myfor.title }}</h3> </div> `, props:['myfor']
我们得先要在子的一方触发一个事件，给这个事件传入父组件需要的参数，
然后在在子组件中的methods中的事件中delete_msg中关键字this.$emit('这里的变量就是自定义标签的事件与跟组件的关联，然后在跟组件中通过这个关联，我们就可以得到子组件中传过来的参数')
#子组件代码let local_tag={ template:` <li> <span @click="delete_msg(index)">x</span> <span>第{{index+1}}条</span> <span>{{mymsg}}</span> </li> `, props:['mymsg','index'], methods:{ delete_msg(index){ this.$emit('remove_msg',index) } } };#自定义标签<p><input type="text" v-model="msg"></p> <button @click="fn">留言</button> <hr> <ul> <local_tag @remove_msg="deletemsg" v-for="(i,index) in user_msg" :mymsg="i" :index="index"></local_tag> </ul>#原组件代码new Vue({ el:'#app', data:{ msg:'', user_msg:[] }, components:{ local_tag, }, methods:{ fn(){ this.user_msg.push(this.msg); this.msg='' }, deletemsg(i){ this.user_msg.splice(i,1) } } })