2 Vue（基本用法 ）

设置框架基本属性
将data值显示到HTML内容中（文本/input）
将data值显示到HTML属性中
条件判断
循环data中的数组/对象显示到HTML内容中
事件监听

设置框架基本属性

名称	HTML代码	定义
取消data响应式	<div v-once> {{ 字段名 }} <idv>	改成非响应式结构，数据变了当前页不动
处理JS加载	不常用	利用css和js处理数据没加载完毕页面出现代码{{字段名}}

将data值显示到HTML内容中

（1）文本

名称	HTML代码	定义
Mustache语法	{{ 字段名 }}	可以设置简单的表达式
替换文本	<div v-text="data中的字段名"> 空 </div>	不常用，会把元素中间的固定字符串覆盖
转译符	<div v-prel="data中的字段名"> 任何内容都可以 </div>	让浏览器不解析关键字
设置内容为标签	<div v-html="data中的字段名"> 空 <idv>	让浏览器解析标签

（2）input双向绑定

• 双向绑定原理：input有个input事件，动态监听用户输入的内容，利用event实现
• 非vue的逻辑是将name传递进服务器，vue是将value传递进服务器

定义	设置
解除响应式，在用户离开input时同步	v-model.lazy=“data对象中的属性值”
只允许输入数字	v-model.number=“data对象中的属性值”
去除input左右两端空格	v-model…trim=“data对象中的属性值”

//input=text
<input type="text" v-model="data对象中的属性值" />

//input=radio （data对象中的属性值和value的值双向绑定）
<input type="radio" v-model="data对象中的属性值"  value="值"/>

//input=checkbox
//单选（data对象中的属性值为true/false）
//多选（data对象中的属性值为数组类型，data对象中的属性值和value的值双向绑定）
<input type="checkbox" v-model="data对象中的属性值" />

//input=select（multiple为多选）
//固定值，单选：data对象中的属性值为变量，多选：data对象中的属性值为数组
<select v-model="data对象中的属性值"  multiple>
<option value="固定值">固定值</option>
</select>

//动态
<select v-model="data对象中的属性值"  multiple>
<option for i in data对象中的属性值  value=i >固定值</option>
</select>

将data值显示到HTML属性中

书写规范	代码
完整写法	<img v-bind：src=“ data对象中的属性值 ”> </img>
语法糖	<img ： src=“ data对象中的属性值 ”> </img>

显示内容	代码	定义
src / href	<img v-bind：src=“ data对象中的属性值 ”> </img>
class	<div v-bind：class="{ class类名：data中的属性名，class类名：data中的属性名 }"> </div>	设置标签多个class通过data确定显示哪个，class类名是css文件的类名，data中的属性名为true/false
style	<div v-bind ：style="{ css属性名：“css属性值”，css属性名：css属性值 }"> </div>	行内样式表，css属性名为color等固定内容，css属性值为加引号为值，不加引号去data中找变量

条件判断

1.解决虚拟dom中间层问题：<div key=“自定义值 ” ></div>

//if （data中的值为true / false ，如果为false时没有这些代码）
<div  v-if=“data中的变量”>  
</div>

//if-else
<div  v-if=“data中的变量”>  
内容
</div>
<div  v-else>  
内容
</div>

//if-else-if    （1.需要判断区间，2.很少用）
<div  v-if=“变量>20”>  
内容
</div>
<div  v-else-if>50>  
内容
</div>

//v-show当条件为false时，仅仅是将元素的display属性设置为none而已
//当需要在显示与隐藏之间切片很频繁时，使用v-show当只有一次切换时，通过使用v-if
<div  v-show=“变量”>  
内容
</div>

循环data中的数组/对象显示到HTML内容中

定义：数组/对象变动时，页面实时刷新，因为是响应式
数组
1.key：底层虚拟dom，让每个key不同，提高性能，key只能等于data中的字段名
2.通过索引修改data数组不会响应式到页面

//正常
<div  v-for="自定义循环名 in data中的字段名">  
{{data中的字段名}}
</div>
//加索引值
<div  v-for="（自定义循环名，index） in data中的字段名 ">  
{{data中的字段名 +index}}
</div>
//提高性能加key
<div  v-for="自定义循环名 in data中的字段名 "  :key="data中的字段名">  
{{data中的字段名}}
</div>

对象
1.因为value比key重要，所以value写在前面
2.对象中的index一般没啥用

//正常
<div  v-for="（value，key） in 变量 ">  
{{value +key}}
</div>

//索引
<div  v-for="（value，key，index） in 变量 ">  
{{value +key+index}}
</div>

事件监听

定义	解释	代码
阻止冒泡事件	阻止多重html嵌套时，点击冒泡作用	<div v-on：click.stop="方法名"> </div>
阻止默认事件	例如a标签，默认自带跳转	<div v-on：click.prevent="方法名"> </div>
点击某一组件		<lzy v-on：click.native="方法名"> </lzy>
点击按钮只调用一次函数	点击按钮后治灰	<div v-on：click.once="方法名"> </div>

//正常写法
<div  v-on:click="方法名">  </div>
//语法糖
<div  @click="方法名">  </div>
//监听键盘
<div  v-on：keyup.键盘按键="方法名">  </div>
//携带参数
<div  v-on:click="方法名(参数1,$event)">  </div>
methods(a,b){}