指令
指令 (Directives) 是带有 v-
前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for
是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。参考文档
v-html/v-text
v-text
- v-text
v-text和插值表达式的区别
- v-text 标签的指令更新整个标签中的内容
- 差值表达式,可以更新标签中局部的内容
v-html
- 可以渲染内容中的HTML标签
- 尽量避免使用,否则会带来危险(XSS攻击 跨站脚本攻击)
v-bind
可以绑定标签上的任何属性
动态绑定图片的路径
<img v-bind:src="src" />
<script>
var vm = new Vue({
el: '#app',
data: {
src: '1.jpg'
}
});
</script>
绑定a标签上的id
<a v-bind:href="'del.php?id=' + id">删除</a>
<script>
var vm = new Vue({
el: '#app',
data: {
id: 11
}
});
</script>
绑定class
对象语法和数组语法
- 对象语法
如果isActive为true,则返回的结果为<div class="active"></div>
<div v-bind:class="{active: isActive}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>
数组语法
渲染的结果 <div class="active text-danger"></div>
<div v-bind:class="[activeClass, dangerClass]">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
dangerClass: 'text-danger'
}
});
</script>
绑定style
对象语法和数组语法
- 对象语法
渲染的结果<div style="color: red; font-size: 18px;"></div>
<div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
redColor: 'red',
font18: 18
}
});
</script>
- 数组语法
<div v-bind:style="[color, fontSize]">abc</div>
<script>
var vm = new Vue({
el: '#app',
data: {
color: {
color: 'red'
},
fontSize: {
'font-size': '18px'
}
}
});
</script>
v-model
表单元素的绑定
-
双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据
-
绑定文本框
当文本框的值发生边框后,div中的内容也会发生变化
<input type="text" v-model="name">
<div>{{ name }}</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
}
});
</script>
-
绑定多行文本框
<textarea v-model="name"></textarea>
<div>{{ name }}</div>
注意:多行文本框中不能使用{{ name }}的方式绑定
绑定复选框
- 绑定一个复选框
<input type="checkbox" v-model="checked">
<div>{{ checked }}</div>
绑定多个复选框
- 此种方式需要input标签提供value属性
吃饭:<input type="checkbox" value="eat" v-model="checklist"><br>
睡觉:<input type="checkbox" value="sleep" v-model="checklist"><br>
打豆豆:<input type="checkbox" value="ddd" v-model="checklist"><br>
{{ checklist }}
<script>
var vm = new Vue({
el: '#app',
data: {
checklist: []
}
});
</script>
-
绑定单选框
男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
var vm = new Vue({
el: '#app',
data: {
sex: ''
}
});
</script>
-
绑定下拉框
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
v-on
-
绑定事件
<div id="app">
<!-- 设置一个元素,并且给这个元素设置一个点击事件 -->
<!-- <button v-on:click="doThis">点我有惊喜</button> -->
<button @click="doThis">点我有惊喜</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
doThis: function(){
alert('这就是传说中的惊喜');
}
}
});
</script>
-
事件修饰符:
- .prevent 阻止默认时间发生
- .once 只触发一次
<div id="app">
<a href="http://www.baidu.com" @click.prevent="go">我是一个a标签</a>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
go() {
console.log('a标签');
}
}
});
</script>
v-show
- 作用:控制元素的显示和隐藏
<div id="app">
<button @click="show">控制元素的显示和隐藏</button>
<p v-show="isShow">{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello vue",
isShow: false
},
methods: {
show() {
// this指向的是vm对象
this.isShow = !this.isShow;
}
}
});
</script>
v-if
- 作用:有着与v-show一样的功能,根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
- 注意:当和 v-if 一起使用时,v-for 的优先级比 v-if 更高
<div id="app">
<button @click="show">控制元素的显示和隐藏</button>
<p v-if="isShow">{{ msg }}</p>
<hr>
<p v-if="score === 'A'" >A</p>
<p v-else-if="score ==='B'">B</p>
<p v-else-if="score ==='C'">C</p>
<p v-else>其它</p>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello vue",
isShow: false,
score: "D"//输出内容:其他
},
methods: {
show() {
// this指向的是vm对象
this.isShow = !this.isShow;
}
}
});
</script>
v-for
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:
<div id="app">
<!-- 使用 v-for 来遍历数组 -->
<ul>
<li v-for="(item,index) in arr">{{item}}---{{index}}</li>
</ul>
<!-- 使用 v-for 来遍历对象 -->
<ul>
<li v-for="(item,key) in obj">{{item}}---{{key}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
arr: ["a","b","c"],
obj: {
id: 1,
name: '张三',
age: 18
}
}
});
</script>
v-clock
- 不需要表达式
作用:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>
{{ message }}
</div>
不会显示,直到编译结束。
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<div id="app">
有v-once的div
<div v-once>{{msg}}</div>
没有v-once的div
<div>{{msg}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello Vue"
}
});
</script>
v-model给表单元素绑定数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.0 使用v-model给文本框绑定数据: 双向数据绑定-->
<input type="text" v-model="msg">
<br>
{{msg}}
<hr>
<!-- 2.0 使用v-model给多行文本框绑定数据 -->
<textarea v-model="msg1"></textarea>
<br>
{{msg1}}
<hr>
<!-- 3.0 使用v-model给复选框绑定数据 -->
<!-- 3.1 绑定的是一个复选框 -->
<input type="checkbox" v-model="checkbox">
<br>
{{checkbox}}
<hr>
<!-- 3.2 绑定的是多个复选框 -->
<input type="checkbox" value="eat" v-model="checkboxArr">吃饭
<input type="checkbox" value="sleep" v-model="checkboxArr">睡觉
<input type="checkbox" value="ddd" v-model="checkboxArr">打豆豆
<br>
{{checkboxArr}}
<hr>
<!-- 4.0 绑定单选框 -->
<input type="radio" value="男" name="gender" v-model="radio">男
<input type="radio" value="女" name="gender" v-model="radio">女
<br>
{{radio}}
<hr>
<!-- 5.0 给下拉框绑定数据 -->
<select v-model="selected">
<option value="-1">请选择</option>
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
<br>
{{selected}}
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "abc",
msg1: "one",
checkbox: "", // 值为true / false
checkboxArr: ["eat","ddd"],
radio: "女",
selected: -1
}
});
</script>
</html>
具体其他指令可以参考官网 www.vuejs.org
网友评论