Vue基本指令

v-html 解析html相关语法

什么时候使用？ 变量的内容是一段甚至一大段带有标签的字符串

v-text 直接输出文本

没有用到{{}}插值表达式，解决了闪屏问题

v-bind: 动态数据绑定

可以简写成 冒号 ：

v-cloak 专门解决闪屏问题

全局解决用法：
这是页面：

<div  id ='app'  v-cloak>
	容器内容
</div>

css样式：

[v-cloak]{
	display:none;
}

v-if 与 v-show 都可以控制显示隐藏

区别:v-if没有加载DOM结构 可以叫做惰性加载
v-show 是在行内样式上添加了display:none 来隐藏信息
使用场景：频繁操作DOM结构的时候用v-show 极少操作的时候用v-if

v-if v-else 必须同时使用，中间不能夹杂其他内容

v-on：可以简写成@

事件

v-for 事件循环

在数组中，item 代表数组每一项的内容，index代表索引（下标）
在json中，item代表对象的值，第二个参数代表key值，index代表索引
Vue中key值的作用
在vue中用v-for循环渲染数据的时候，它采用“就地复用”的原则，已经存在的值，它不会移动它的DOM结构，所以为每一项绑定一个唯一值去区分，提高虚拟dom的渲染速率。唯一值尽量不去采用索引而是选用数据中的唯一值。
v-if 和v-for一般不会放在一个标签上面！因为for的优先级要高于if
如果v-if和v-for放在一起是对数据进行筛选展示

v-model 双向数据绑定（表单指令）

js实现方法

<div>
	请输入日期：<input type="text" @keyup='enter($event)'>
</div>
<h2>日期:{{day}}</h2>
script中:
data: {
	day: '',
 },
 methods: {
	 enter(e) {
		this.day = e.target.value;
	 }
},

Vue v-model方法

请输入日期：<input type="text" v-model='val'>
<h2>日期：{{val}}</h2>
script中：
data:{
	val:''
},

vue在渲染的过程中 如何解决快速刷新出现{{}}的问题

1. v-text 直接文本输出
2. v-cloak 专门解决闪屏

方法写法

methods：{
	//第一种
	fun1:funcion(){
		console.log("aaa");
	},
	//第二种
	fun2(){
		console.log("bbb");
	},
	//第三种  不可行 this改变了
	fun3:()=>{
		console.log("ccc");
	}
}