v-text
不能解析标签,会替换标签内的内容,相当于innerText
<div v-text="d"></div>
v-html
与v-text相似但可以解析标签,相当于innerHTML
<div v-html="d"></div>
v-show
根据表达式的真假,切换元素的显示和隐藏(v-show后可以接布尔值 data中的变量 表达式等)
<!-- v-show 引起的是 redraw 性能消耗比 reflow更小 -->
<div v-show="c" style="display: flex;"> 是否显示 </div>
v-if
- 根据表达式的真假,切换元素的显示和隐藏(操控dom元素)
- v-if 后可接布尔值 data中的变量 表达式等
- 与v-show类似,区别为v-show是display显示与隐藏
- v-if 直接在dom文档中将元素注销,因此需要更多的内存
<!-- v-if 根据状态的布尔值来决定是否渲染 -->
<!-- v-if 因引起reflow -->
<div v-if="b"> 是否渲染 </div>
v-else-if
- 充当v-if的else if,可以连续使用
- 必须配合v-if 一起使用 ,否则不会被识别
v-else
当前面的v-if,v-else-if均不符合条件时执行,所以v-else后不需要跟判断条件
<!-- v-if 和 v-else-if 和v-else的条件判断一定要组合使用 不能中间穿插有其他的没有绑定条件的节点 -->
<div v-if="g1"> place1 </div>
<div v-else-if="g2"> place3 </div>
<div v-else> place2 </div>
v-for
- 根据数据生成列表结构,相当于js中的for in循环,可以根据数据多次渲染元素
- 特点:可以遍历数组、字符串、数字、对象
- 使用v-for必须要配合:key使用,提升性能,防止列表状态紊乱(key的值只能是字符串或数字,且必须具有唯一性)
- 建议把id作为key,使用index作为key没有意义(index会变动)
列表渲染
<!-- v-for 里面可以是 in 也可以是 of -->
<!-- 使用 v-for一定要有 key的绑定!!! -->
<div v-for="item in m" :key="item.id">
{{ item.id }} - {{ item.title }}
</div>
<div v-for="(item,index) in m" :key="item.id">
{{ item.id }} - {{ item.title }} - 索引 {{ index }}
</div>
<!-- v-for 可以循环一个字符串 -->
<div v-for="it in 'abcdefg'" :key="it">
{{ it }}
</div>
<!-- v-for 还可以循环一个整数 -->
<div v-for="it in 5">
{{ it }}
</div>
data{
m: [
{ id:1,title: '我是标题1' },
{ id:2, title: '我是标题2' },
{ id:3, title: '我是标题3' },
]
}
v-for与v-if无法连用 如果需要一起使用需要模板
<template v-for="(item, index) in arr" :key="index">
<li v-if="item.checked">
<input type="checkbox">
</li>
</template>
v-on
为元素绑定事件
<div v-on:click="fn1"> 事件的绑定1 </div>
使用v-on进行绑定或简写成@ 事件执行函数则在Vue实例的methods中
当methods中的函数需要对data中的变量进行修改时,this.变量就能读取
可以携带参数,在调用的函数名后传入形参
事件对象
当v-on绑定事件需要使用事件对象时
当调用函数没有传参,那可以在函数内部直接使用e事件对象(与事件监听相同)
当调用函数需要传参时,则需要在传参时使用$event传入并在函数内部进行接收
事件修饰符
事件修饰符 | 说明 |
---|---|
.prevent | 阻止默认行为 |
.stop | 阻止事件冒泡 |
.capture | 捕获阶段处理事件函数 |
.once | 只触发一次 |
.self | 只会触发自己范围内的事件,不会包含子元素 |
.native | 监听组件根元素的原生事件 |
.left | 只有点击鼠标左键触发 |
.right | 只有点击鼠标右键触发 |
.middle | 只有点击鼠标中键触发 |
.passive | 以 { passive: true } 模式添加侦听器 |
. { keyCode | keyAlias} | 只当事件是从特定键触发时才会触发回调 |
键盘事件修饰符
事件修饰符 | 说明 |
---|---|
.enter | 回车键 |
.tab | 制表键 |
.delete | 含delete和backspace键 |
.esc | 返回键 |
.space | 空格键 |
.up | 向上键 |
.down | 向下键 |
.left | 向左键 |
.right | 向右键 |
鼠标事件修饰符
事件修饰符 | 说明 |
---|---|
.left | 鼠标左键 |
.middle | 鼠标中间滚轮 |
.right | 鼠标右键 |
修饰键
可以用修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应
事件修饰键 | 说明 |
---|---|
.ctrl | ctrl键 |
.alt | alt键 |
.shift | shift键 |
.meta | mac 的 command 键 (⌘) |
.exact | 控制由精确的系统修饰符组合触发事件(有且仅有加入的修饰符才有效) |
详细用法介绍
- 绑定事件如果是等于函数名的写法 那么第一个参数就是event对象
<div v-on:click="fn1"> 事件的绑定1 </div>
methods:{
fn1(ev){
console.log('fn1 fired',ev)
}
}
// 在methods当中可以声明自定义的函数
// 这里声明的函数也会挂在在 vue实例上
- 如果绑定的值是函数执行 那么需要手动的传入$event才能获取event对象
<div v-on:click="fn2($event,'abc')"> 事件的绑定2</div>
methods:{
fn2(arg1,arg2){
console.log('fn2 fired')
console.log('参数1',arg1)
console.log('参数2',arg2)
}
}
- 一个标签绑定多个同类型事件有两种方式
<div v-on:click="fn1(),fn2()"> 事件的绑定3-1 一次事件指定过个函数</div>
<div v-on:click="fn1();fn2()"> 事件的绑定3-2 一次事件指定过个函数</div>
- 单次绑定(点击一次触发后不再触发)
<div @click.once="fn1">事件的绑定3-3 单次绑定 </div>`
- 同时绑定多个不同类型的事件
<div v-on="{ click:fn1,mouseover:fn2 }"> 事件的绑定3-4 对象方法 </div>
- 修改状态
<div @click="fn6"> 事件的绑定3-5 修改状态1 </div>
<!-- vue当中允许我们在事件的绑定当中等于简单的语句 -->
<div @click="a='hi我也是新的值'"> 事件的绑定3-5 修改状态2 </div>
data:{ // vue当中的状态 data生命的状态会挂在Vue实例上面
a:' hi vue',
}
methods:{
fn6(){
// this 可以直接访问实例
this.a = 'hi 我是新的值'
},
}
<div @click.ctrl.alt.exact="fn1"> 事件的绑定3-6 </div>
- 阻止默认行为(.prevent)、阻止事件冒泡(.stop)
<a href="http://baidu.com" @click.prevent="fn3">跳转到百度</a>
<div class="out" @click.stop="fn4">
<div class="in" @click="fn5"></div>
</div>
v-bind
设置元素属性(比如:src,title,class)
<div v-bind:id="f" class="c" v-bind:class="f3"></div>
<!-- v-bind:xxx 可以简写成 :xxx -->
<div :style="e"> style的绑定 </div>
data:{ // vue当中的状态 data生命的状态会挂在Vue实例上面
c: true,
f: 'kfc',
f1: ['a','b','e'],
f2: 'abc',
f3: {
a: 1,
b: true,
e:'',
d:0
},
e:{
fontSize:'50px',
color:'red'
}
v-model
双向绑定
<div> v-model</div>
<div>
<div> h : {{ h }} </div>
<!-- react 受控空间 vue 当中称之为数据的双向绑定 -->
<input type="text" v-bind:value="h" @input="ev=>h=ev.target.value">
<input type="text" v-model="h">
</div>
<hr />
<div>
<div> i: {{ i }} </div>
<select :value="i" @change="ev=>i=ev.target.value">
<option value="a"> 选项1</option>
<option value="b"> 选项2</option>
<option value="c"> 选项3</option>
</select>
<select v-model="i">
<option value="a"> 选项1</option>
<option value="b"> 选项2</option>
<option value="c"> 选项3</option>
</select>
</div>
<hr />
<div>
<div> j: {{ j }} </div>
<!-- <input type="radio" :checked="j" @change="ev=> j = ev.target.checked "> -->
<!-- <input type="radio" v-model="j" value="123"> -->
<div> k: {{ k }}</div>
<input type="checkbox" :checked="k" @change="ev=> k = ev.target.checked ">
<input type="checkbox" v-model="k">
</div>
v-model修饰符
对用户输入的内容进行处理
事件修饰键 | 作用 |
---|---|
.number | 自动将用户输入的值转为数字类型 |
.trim | 自动过滤用户输入的首尾空格 |
.lazy | 在change时input时更新 |
v-once
单次数据绑定(只读取一次data中数据,后续data数据变化视图不变)
<div v-once> {{ a }} </div>
v-pre
页面中直接显示标签内的内容(不进行vue的编译)
<div v-pre> {{ 1+1 }} </div>
v-cloak
不会显示 直到编译结束
[v-cloak]{
display:none;
}
<div v-cloak>
{{ message }}
</div>