设置框架基本属性
将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){}