Vue的几个简单的基本指令-CSDN博客

1.指令
什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件。

1.1.插值表达式
1.1.1.大括号
格式：

{{表达式}}
1
说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数
示例：

HTML：

<div id="app">{{name}}</div>
1
JS:

var app = new Vue({
el:"#app",
data:{
name:"奇哥"
}
})
1
2
3
4
5
6
1.1.2.插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：

刷新页面：

1.1.3.v-text和v-html
使用v-text和v-html指令来替代{{}}

说明：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：

HTML:

</div>
1
2
3
4
5
JS:

var vm = new Vue({
el:"#app",
data:{
hello:'大家好，我是奇哥'
}
});
1
2
3
4
5
6
效果：

并且不会出现插值闪烁，当没有数据时，会显示空白。

1.2.v-model
刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。

1.2.1 input
Html:

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
效果：

1.2.2 checkbox
html：

<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了：{{language.join(',')}}
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: []
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和textarea 默认对应的model是字符串
select单选对应字符串，多选对应也是数组
效果：

1.2.3 radio
html：

1.2.4 textarea
html：

###5.2.5 select

html：

</div>

语法：

v-on:事件名="js片段或函数名"

1
2
示例：

<div id="app">

<button v-on:click="num++">增加</button><br/>

<button v-on:click="decrement">减少</button><br/>
<h1>num: {{num}}</h1>
</div>
<script src="vue-2.5.17.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
decrement(){
this.num--;
}
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
效果：

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

1.4.v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

1.4.1.遍历数组
语法：

v-for="item in items"

1
2
items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名
示例：ul显示

<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>

</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
users:[
{name:"张三",gender:"男",age:21},
{name:"李四",gender:"男",age:22},
{name:"王二",gender:"女",age:23},
{name:"赵六",gender:"男",age:24},
{name:"孙七",gender:"男",age:25}
]
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
效果：

示例：表格显示

html代码：

<table border="1" cellpadding="0" cellspacing="0" width="300" height="200">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td>{{user.gender}}</td>
<td>{{user.age}}</td>
</tr>

</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
效果：

1.4.2.数组角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

1
2
items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。
示例

<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
1
2
3
4
5
6
7
效果：

1.5.v-if和v-show
1.5.1.基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

1
2
示例：

<div id="app">

<button v-on:click="show = !show">点击切换</button><br/>
<h1 v-if="show">
你好
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
效果：

1.5.2.与v-for结合
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：

<div id="app">
<ul>
<li v-for="(user,index) in users" v-if="user.gender === '女'">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:"张三",gender:"男",age:21},
{name:"李四",gender:"男",age:22},
{name:"王二",gender:"女",age:23},
{name:"赵六",gender:"男",age:24},
{name:"孙七",gender:"男",age:25}
]
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
效果：

1.5.3.v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”：

1
2
3
4
5
6
7
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

1.5.4.v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

1
2
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

示例：

1.6.v-bind
1.6.1.绑定class样式
假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的：

<div class="{{isAcctive}}"></div>
1
因为插值表达式不能用在属性的值中。

Vue对class属性进行了特殊处理，可以接收数组或对象格式：

数组语法

我们可以借助于v-bind指令来实现：

HTML：

<div v-bind:class="isActive"></div>
1
你的data属性：

data:{
isActive:['active','hasError']
}
1
2
3
渲染后的效果：

1
2
对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>
1
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
1
2
3
和如下 data：

data: {
isActive: true,
hasError: false
}
1
2
3
4
结果渲染为：

<div class="static active"></div>
1
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError的值为 true，class 列表将变为 "static active text-danger"。

1.6.2.简写
v-bind:class可以简写为:class
————————————————
版权声明：本文为CSDN博主「好奇的嫣朵拉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41234832/article/details/84939560