一、文档类指令操作
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本类指令</title>
<style type="text/css">
p {
line-height: 21px;
background-color: orange
}
</style>
</head>
<body>
<div id="app">
<!-- html全局属性语法: 全局属性名="属性值" -->
<p v-bind:title="title" a="a" b="b">你是p</p>
<!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 -->
<input type="text" v-model="msg">
<!-- 采用文本指令后,页面标签的内容由vue实例控制,原来用于表示标签的文本均会被替换 -->
<p>{{ msg }}</p>
<!-- eg:原文本会被msg替换 -->
<p v-text='msg'>原文本</p>
<!-- 可以解析带html标签的文本信息 -->
<p v-html='msg'></p>
<!-- v-once控制的标签只能被赋值一次 -->
<p v-once>{{ msg }}</p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 指令: 出现在html标签中可以被vue解析处理的全局属性
new Vue({
el: "#app",
data: {
title: "",
msg: "message"
}
})
</script>
</html>
<p v-text='msg'></p>
<p>{{ msg }}</p>
<p v-once>{{ msg }}</p>
<p v-html='msg'></p>
<script>
new Vue({
el: '#app',
data: {
msg: '<b>文本</b>'
}
})
</script>
<div id="app">
<img v-bind:src='imgSrc' />
<!-- 简写 -->
<img :src='imgSrc' />
</div>
<script>
new Vue({
el: '#app',
data: {
imgSrc: 'https://www.baidu.com/favicon.ico'
}
})
</script>
<div id="app">
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
</div>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{ msg }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
</html>
<div id="app" v-cloak>
<p>{{ 1 + 1 }}</p>
<p>{{ [1, 2, 3].join('@') }}</p>
</div>
二、重要指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style type="text/css">
.abc {
background-color: red
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind: -->
<!-- 该指令 绑定 的是属性(html标签的全局属性) -->
<!-- 绑定后的属性的属性值可以由变量控制 -->
<p v-bind:abc="abc"></p>
<!-- 绑定后 操作单一变量 -->
<p v-bind:title="t1">p1p1p1p1p1p1p1</p>
<!-- 绑定后 操作普通字符串 -->
<p v-bind:title="'t2'">p2p2p2p2p2p2p2</p>
<!-- 多类名 单一变量操作 -->
<p v-bind:class="t3">p3p3p3p3p3p3p3</p>
<p v-bind:class="[t4, tt4]">p4p4p4p4p4p4</p>
<!-- 绑定class的{}语法 {key: value} key就是实际的类名,value是该类名的显隐(true就是起作用,false就是不起作用) -->
<p v-bind:class="{abc: false}">p5p5p5p5p5p5</p>
<p v-bind:class="{abc: t5}" v-on:click="fn">p5p5p5p5p5p5</p>
<!-- class的[] {} 结合使用 -->
<!-- class的值为p6 pp6, t6 tt6是值为true|false的变量,控制p6 pp6是否起作用 -->
<p v-bind:class="[{p6: t6}, {pp6: tt6}]">p6p6p6p6p6p6p6p6</p>
<!-- v-bind操作class -->
<!-- [a, b] a,b为变量,对其赋值的是class的具体值 -->
<!-- eg: a:active b:red => class="active red" -->
<!-- {a: b} a为class值, b为值为true|false的变量,控制a的显隐 -->
<!-- eg: b:true => class="a" -->
<!-- eg: b:false => class="" -->
<!-- v-bind:指令可以简写 : -->
<p :class="'simple'">简写</p>
<!-- 操作style -->
<!-- style一般都是多条样式 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data: {
abc: "ABC",
t1: "p1的title",
t3: "p pp",
t4: "p",
tt4: "pp",
t5: false,
t6: true,
tt6: true,
div_style: {
width: "200px",
height: "200px",
backgroundColor: "cyan"
}
},
methods: {
fn () {
this.t5 = !this.t5;
}
}
})
</script>
</html>
<!-- 值a -->
<div v-bind:class='"a"'></div>
<!-- 变量a -->
<div v-bind:class='a'></div>
<!-- 变量a, b -->
<div v-bind:class='[a, b]'></div>
<!-- a为class值，isA决定a是否存在(ture | false) -->
<div v-bind:class='{a: isA}'></div>
<!-- 多class值，是否存在 -->
<div v-bind:class='{a: isA, b: isB}'></div>
<!-- 多style值，my_color为变量，cyan为普通值 -->
<div :style='{color:my_color, background:"cyan"}'></div>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>v-on指令</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: orange
}
</style>
</head>
<body>
<div id="app">
<!-- v-on: 指令 -->
<!-- 简写: @ -->
<!-- 绑定的是事件,操作的是事件对应的方法名 -->
<p @click="fn1"></p>
<!-- 直接绑定方法名,不会携带自定义参数,但回调时能取到事件参数ev -->
<p @click="fn2"></p>
<!-- 带()的方法绑定,只传自定义参数,回调时只能取到自定义参数,事件参数ev丢失 -->
<p @click="fn3(10)"></p>
<!-- 带()的方法绑定,传入自定义参数同时,显式传入事件$event,回调时可以取到自定义参数及事件参数ev -->
<p @click="fn4($event, 10, 20)"></p>
<p @click="fn5(10, $event, 20)"></p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<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>
</html>
<!-- 绑定函数fn1，并将事件event传递过去 -->
<div v-on:click='fn1'></div>
<!-- 绑定函数fn2，并将自定义参数10传递过去 -->
<div v-on:click='fn2(10)'></div>
<!-- 绑定函数fn3，并将事件event与自定义参数10传递过去 -->
<div v-on:click='fn2($event, 10)'></div>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<form action="">
<!-- 数据的双向绑定 -->
<!-- v-model绑定的是value,所以省略 -->
<input type="text" v-model="val1" name="usr">
<textarea v-model="val1"></textarea>
<p v-text="val1"></p>
<!-- 单一复选框 -->
<!-- val2值为true|false的变量,控制单选框是否被选中 -->
<input type="checkbox" v-model="val2" name="ck1">
<!-- val3值为自定义"选中"|"未选中",控制单选框是否被选中 -->
<!-- 选中状态,提交给后台可以对应的value为on,为选中状态,不向后台提交value值 -->
<input type="checkbox" v-model='val3' true-value="选中" false-value="未选中" name="ck2" />
<!-- 多复选框 -->
<!-- 多个复选框的v-model绑定一个变量 -->
<!-- 该变量为数组数据,存放的是复选框的value值(value值必须明确) -->
<!-- 出现在数组中的value值对应的复选框默认为选中状态 -->
<div>
篮球<input type="checkbox" value="lq" v-model="val4" name="ck3">
足球<input type="checkbox" value="zq" v-model="val4" name="ck3">
乒乓球<input type="checkbox" value="ppq" v-model="val4" name="ck3">
</div>
<!-- 多单选框 -->
<!-- 多个单选框的v-model绑定一个变量 -->
<!-- 变量值为多个单选框中一个的value值,则该单选框为默认选中状态 -->
<div>
男:<input type="radio" value="男" v-model='val5' name="sex" />
女:<input type="radio" value="女" v-model='val5' name="sex" />
</div>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
val1: "",
val2: false,
val3: "选中",
val4: ['lq', 'ppq'],
val5: "女",
}
})
</script>
</html>
<!-- 文本输入框：数据的双向绑定 -->
<input type="text" v-model='val' />
<textarea v-model='val'></textarea>
<!-- 单个复选框：选中与否val默认值为true|false -->
<input type="checkbox" v-model='val' />
<!-- 通过true-value|false-value修改默认值为true|false -->
<input type="checkbox" v-model='val' true-value="选中" false-value="未选中" />
<!-- 多个复选框：val作为数组[]来使用，可以存储选中元素的value值，反之数组有对应value代表该选框选中 -->
<input type="checkbox" value="男" v-model='val' />
<input type="checkbox" value="女" v-model='val' />
<!-- 单选框：val存储选中的单选框的value值 -->
<input type="radio" value="男" v-model='val' />
<input type="radio" value="女" v-model='val' />
三、todoList案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>todoList案例</title>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="val">
<button type="button" @click="submitMsg">提交</button>
</div>
<ul>
<li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
</ul>
{{ list }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
val: "",
list: []
},
methods: {
submitMsg () {
// 往list中添加input框中的value
if (this.val) {
this.list.push(this.val);
this.val = ""
}
},
removeMsg(index) {
this.list.splice(index, 1)
}
}
})
</script>
</html>
四、条件渲染
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="js/vue-2.5.17.js"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.o {background-color: orange}
</style>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap, .main {
width: 500px;
height: 240px;
}
li {
float: left;
background-color: #666;
margin-right: 20px;
}
ul:after {
content: "";
display: block;
clear: both;
}
.red {background-color: red}
.green {background-color: green}
.blue {background-color: blue}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">显隐切换</button>
<!-- v-if -->
<div class="box r" v-if="isShow"></div>
<!-- v-show -->
<div class="box o" v-show="isShow"></div>
<!-- 1.条件渲染的值为true|false -->
<!-- 2.true代表标签显示方式渲染 -->
<!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->
<!-- v-if v-else-if v-else -->
<ul>
<li @mouseover="changeWrap(0)">red</li>
<li @mouseover="changeWrap(1)">green</li>
<li @mouseover="changeWrap(2)">blue</li>
</ul>
<!-- red页面逻辑结构 -->
<div class="wrap red" v-if="tag == 0" key="0">...</div>
<!-- green页面逻辑结构 -->
<div class="wrap green" v-else-if="tag == 1" key="1">...</div>
<!-- blue页面逻辑结构 -->
<div class="wrap blue" v-else key="2">...</div>
<!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
<!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
<ul>
<li @mouseover="changeMain(0)">red</li>
<li @mouseover="changeMain(1)">green</li>
<li @mouseover="changeMain(2)">blue</li>
</ul>
<!-- red页面逻辑结构 -->
<div class="main red" v-show="whoShow(0)">...</div>
<!-- green页面逻辑结构 -->
<div class="main green" v-show="whoShow(1)">...</div>
<!-- blue页面逻辑结构 -->
<div class="main blue" v-show="whoShow(2)">...</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
isShow: false,
tag: 0,
flag: 0
},
methods: {
toggle () {
this.isShow = !this.isShow;
},
changeWrap (num) {
this.tag = num;
},
changeMain (num) {
// this.flag num
this.flag = num;
},
whoShow (num) {
// this.flag num
return this.flag == num;
}
}
})
</script>
</html>
- v-if：值true会被渲染，值false不会被渲染
<div id="app">
<div v-if='isShow'>div div div</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
<div id="app">
<div v-if='isShow'>div div div</div>
<div v-else='isShow'>DIV DIV DIV</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
<div id="app">
<div v-if='tag == 0'>if if if</div>
<div v-else-if='tag == 1'>else if else</div>
<div v-else='tag == 2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
<template v-if="isShow">
<p>用template嵌套</p>
<p>可以为多行文本</p>
<p>同时显隐</p>
<p>且template标签不会被vue渲染到页面</p>
</template>
- v-show：一定会被渲染到页面，以display属性控制显隐
- key：为v-if方式的显隐创建缓存，提高效率
<div id="app">
<div v-if='tag == 0' key='0'>if if if</div>
<div v-else-if='tag == 1' key='1'>else if else</div>
<div v-else='tag == 2' key='2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
五、列表渲染
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<div id="app">
<h1>{{ msg }}</h1>
<!-- v-for="item in items" -->
<!-- 遍历的对象: 数组[] 对象(字典){} -->
<ul>
<li>{{ list[0] }}</li>
<li>{{ list[1] }}</li>
<li>{{ list[2] }}</li>
<li>{{ list[3] }}</li>
<li>{{ list[4] }}</li>
</ul>
<!-- n为遍历的元素值 -->
<ul>
<li v-for="n in list">{{ n }}</li>
</ul>
<!-- 一般列表渲染需要建立缓存 -->
<!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
<!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
<ul>
<li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
<ul>
<li>{{ dic['name'] }}</li>
<li>{{ dic.age }}</li>
<li>{{ dic.gender }}</li>
</ul>
<!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
<ul>
<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
<!-- 遍历的嵌套 -->
<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>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "列表渲染",
list: [1, 2, 3, 4, 5],
dic: {
name: '小VV',
age: 88888,
gender: '神'
},
persons: [
{name: "zero", age: 8},
{name: "egon", age: 78},
{name: "liuXX", age: 77},
{name: "yXX", age: 38}
]
}
})
</script>
</html>
<div id="app">
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
<button @click='click'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['张三', '李四', '王五']
}，
methods: {
click: function () {
this.items.splice(1, 1, '李大大');
this.items.pop();
this.items.push('赵六')
}
}
})
</script>
// items: ['张三', '李四', '王五']
// 值
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
// 值, 索引
<ul>
<li v-for='(item, index) in items'>{{ index }} - {{ item }}</li>
</ul>
// {'name': '张三', 'age': 18, 'sex': '男'}
// 值
<div v-for="value in object">
{{ value }}
</div>
// 值, 键
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
// 值, 键, 索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
<div>
<div>{{ items[0].name }}</div>
<div>{{ items[1].age }}</div>
<div>{{ items[2].sex }}</div>
</div>
