vue指令总结
## 一.文本操作指令
#### 1.v-text
```html
v-text <==> {{}}
<p v-text="msg"></p>
```
#### 2.v-html
```html
<p v-html="msg"></p>
// <b>123</b> => 加粗的123
```
#### 3.v-once
```html
<p v-once>
{{msg}}
</p>
// 只能被赋值一次
```
#### 4.v-model
```html
<input type="text" v-model="val">
// v-model控制的是表单元素的value值
```
#### 5.v-cloak
- 解决页面闪烁
```html
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
</div>
```
## 二.关键指令
#### 1.v-bind
```html
操作的是属性,绑定属性后,属性值可以由变量来控制
操作title
v-bind:title="'my_title'" => title="my_title"
v-bind:title="title"
data: {
title: "my_title"
}
=> title="my_title"
操作class
v-bind:class="my_class"
data: {
my_class: active
}
=> class="active"
v-bind:class="[c1, c2]"
data: {
c1: C1,
c2: C2
}
=> class="C1 C2"
v-bind:class="{abc: abc_able}"
data: {
abc_able: ture
}
=> class="abc"
data: {
abc_able: false
}
=> class=""
操作style
:style="{width:'200px', height:'200px'}"
:style="my_style"
data: {
my_style: {
width: "200px",
height: "200px"
}
}
```
#### 2.v-on指令
```
1.简写 v-on:click <=> @click
2.默认绑定 @click="fn" => 回调方法可以获取ev
3.带参绑定 @click="fn(10)" => 回调参数只能获取自定义参数10
4.带参绑定 @click="fn(10, $event)" => 回调参数可以获取自定义参数10即事件参数ev
```
```html
<div id="app">
<p @click="fn1"></p>
<p @click="fn2"></p>
<p @click="fn3(10)"></p>
<p @click="fn4($event, 10, 20)"></p>
<p @click="fn5(10, $event, 20)"></p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
methods: {
fn1: function () {
console.log("click event");
},
fn2 (ev) {
console.log(ev);
},
fn3 (num) {
console.log(num);
},
fn4 (ev, n1, n2) {
console.log(ev);
console.log(n1);
console.log(n2);
},
fn5 (n1, ev, n2) {
console.log(ev);
}
}
})
</script>
```
#### 3.v-model指令
- 操作的是表单元素的value值
```
// 双向绑定
<input type="text" v-model="val" name="txt1">
<input type="text" v-model="val" name="txt2">
// 两个输入框绑定的是同一个val,那么其中一个input的内容改变会直接映射到另一个input上
```
```
// 单个复选框
// val默认为true(选框选中,提交给后台的为ck=on)
// val默认为false(选框未选中,不向后台提交该数据)
<input type="checkbox" v-model="val" name="ck">
```
```
// 多个复选框
// v-model绑定的是同一个变量
// 该变量的值为数组形式
// 出现在数组中的value对应的复选框默认为选中状态,eg: val: ['ppqiu', 'zqiu'] => 乒乓球,足球复选框默认选中
// 提交给后台数据: ck=ppqiu&ck=zqiu
篮球<input type="checkbox" value="lqiu" v-model="val" name="ck">
足球<input type="checkbox" value="zqiu" v-model="val" name="ck">
乒乓球<input type="checkbox" value="ppqiu" v-model="val" name="ck">
```
```
// 多个单选框
// v-model绑定的是同一个变量
// 该变量的值为每个单选框的value值,那么该单选框默认选中 eg: val: famale => 女单选框默认选中
// 提交给后台数据: sex=famale
男:<input type="radio" value="male" v-model="val" name="sex">
女:<input type="radio" value="famale" v-model="val" name="sex">
```
## 三.条件渲染指令
- v-show
```html
<div v-show="isShow"></div>
// 变量isShow值为true(显示,display: block)|false(隐藏,display: none)
```
- v-if
```html
<div v-if="isShow"></div>
// 变量isShow值为true(显示,渲染到页面)|false(隐藏,不渲染到页面)
```
- v-if v-else-if v-else
```html
<div v-if="tag == 0" key="0"></div>
<div v-else-if="tag == 1" key="1"></div>
<div v-else="tag == 2" key="2"></div>
// v-else逻辑可言省略
// 变量tag取值在0~2之间,可以决定具体渲染那个div
// 全局属性key是为渲染过的分支建立缓存,加快该分支下一次被渲染的速度,key的值具有唯一性
```
## 四.列表渲染指令
- v-for 遍历数组[]
```html
<ul>
<li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
// list为提供的数组数据
// n为遍历的数组元素值,i为遍历的元素索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作
<script>
new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4, 5],
}
})
</script>
```
- v-for变量对象{}
```html
<ul>
<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
// dic为提供的对象(字典)数据
// v为遍历的对象值,k为对象值的键,i为对象值的索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作
<script>
new Vue({
el: "#app",
data: {
dic: {
name: '张三',
age: 18,
gender: '男'
}
}
})
</script>
```
- 遍历的嵌套
```html
<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
<div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }} </div>
</div>
<script>
new Vue({
el: "#app",
data: {
persons: [
{name: "zero", age: 8},
{name: "egon", age: 78},
{name: "liuXX", age: 77},
{name: "yXX", age: 38}
]
}
})
</script>
```
