Vue基础

本文最后更新于:2022年5月27日 晚上

指令

🥝指令基础

指令以v-为前缀的属性

指令可以接受一个单句表达式(除了v-for,v-on)

v-???:参数=""

1
<tag v-on:click="clickFunction"></tag>

v-???:[动态参数]=""

1
<tag v-on:[eventType]="eventFunction"></tag>

🥝指令语法糖

v-bind:等价于:

v-on:等价于@

🥝指令修饰符

插值

双花括号内输入插值变量(单个js表达式)

1
2
<tag>{{ msg }}</tag>
<tag>{{ (conditions) ? msgT : msgF }}</tag>

使用v-once指令数据只响应一次

1
<tag v-once>{{ msg }}</tag>

使用v-html指令插入html代码

1
<tag v-html="htmlCode"></tag>

使用v-bind指令绑定标签属性值

1
<tag v-bind: title="titleMsg"></tag>

data选项

1
2
3
4
5
6
const app = {
data() {
// 业务处理
return { } // 返回需求内容对象
}
}

methods选项

this指向组件实例

1
2
3
4
5
6
7
8
9
10
11
const app = {
methods: {
methodOne(){
// 业务处理
},
methodTwo(){
// 业务处理
},
// ......
}
}

computed选项

当数据没有变化时返回缓存

watch选项

被侦听数据改变时执行

1
2
3
4
5
6
7
8
9
10
11
const app = {
data() {
let msg = 'Jonathan'
return { Jonathan }
},
watch: {
msg(oldMsg, newMsg){
// 业务代码
}
}
}

绑定class

v-bind:class=""指令来绑定动态class属性

🥬对象绑定

1
<tag :class="{ className1 : isTrue1 }"></tag>
1
2
3
4
const app = {
let isTrue1 = // 是否应用className1
return { isTrue1 }
}

可绑定多个类

1
<tag :class="{ className1 : isTrue1, className2 : isTrue2, ... }"></tag>

🥬数组绑定

绑定内联style

vue可自动匹配css前缀

条件渲染

🍉v-if系列指令

可用v-if,v-else-if,v-else指令来指定不同条件下的显示组件

v-if初始化不会全部渲染,故初始化开销较小,但频繁切换开销大不适合频繁切换的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<div v-if=" ch >= 'a' && ch <= 'z' ">
<span>ch是小写字符</span>
</div>
<div v-else-if=" ch >= 'A' && ch <= 'Z' ">
<span>ch是大写字符</span>
</div>
<div v-else-if=" ch >= '0' && ch <= '9' ">
<span>ch是阿拉伯数字</span>
</div>
<!-- ...可多个v-else-if -->
<div v-else>
<span>ch既不是字母也不是阿拉伯数字</span>
</div>

🍉v-show指令

v-show会全部渲染后再改变css来条件显示组件

v-show初始化开销大,适合应用于需频繁切换的组件

1
2
3
4
5
6
7
8
9
<div v-show=" ch >= 'a' && ch <= 'z' ">
<span>ch是小写字符</span>
</div>
<div v-show=" ch >= 'A' && ch <= 'Z' ">
<span>ch是大写字符</span>
</div>
<div v-show=" ch >= '0' && ch <= '9' ">
<span>ch是阿拉伯数字</span>
</div>

列表渲染

v-for="item in/of items"指令

🥦遍历正整数

从1开始遍历

1
<tag v-for="i of n"></tag>

🥦遍历数组

可选两个参数(value[值], index[索引])

1
<tag v-for="(value, index) of ['a', 'b', 'c']">第{{ index }}个元素是{{ value }}</tag>

🥦遍历对象

可选三个参数(value[值], key[键名], index[索引])

1
<tag v-for="(vlaue, key, index) in obj">{{ index }}-{{ key }}:{{ value }}</tag>

事件监听

v-on:event="method"指令绑定事件

1
<tag v-on:click="count++">{{ count }}</tag>

缩写

1
<tag @click="count++">{{ count }}</tag>

绑定多个事件

1
<tag @click="count++, count *= 2">{{ count }}</tag>

🍠事件修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

🍠按键修饰符

🍠事件名

表单绑定

v-model指令实现双向绑定

中文等拼写时不会绑定

1
2
3
4
<input type="text" v-model="msg" />
<p>
Your input is {{ msg }}
</p>

🥑复选元素

对于复选元素v-model返回一个数组

🥑修饰符

1
2
3
v-model.lazy                 // 确认时再渲染
v-model.number // 用parseFloat()转数字,失败则返回原始值
v-model.trim // 去除格式符

Vue基础
https://qingshaner.com/vue基础/
作者
清山
发布于
2022年1月17日
许可协议