一.文本操作指令
采用文本指令后，页面标签的内容由vue实例来控制。
1.v-text
<!-- 原文本会被msg替换 -->
<p v-text='msg'></p>
2.v-html
<!-- 可以解析带html标签的文本信息 -->
<p v-html='msg'></p>
3.v-once
<!-- v-once只能被赋值一次 -->
<p v-once>{{ msg }}</p>
4.v-model
<!-- v_model vue进行数据双向绑定的指令 -->
<input type="text" v-model='msg'name="">
<p v-text='msg'></p>
5.v-cloak
- 解决页面闪烁
<!-- 方式一 -->
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app" v-cloak>
{{ msg }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'message'
}
})
</script>
<!-- 方式二 -->
<head>
<script src="js/vue-2.5.17.js"></script>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'message'
}
})
</script>
二.关键指令
1.v-bind
<!-- 该指令绑定的是HTML标签的全局属性，绑定获得属性值可以由变量决定 -->
<!-- 自定义全局属性abc的属性值是变量abc -->
<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]'>p4p4p4p4p4p4p4</p>
<!-- 操作类名的显隐 -->
<!-- {}语法：{key:value} -->
<!-- key:实际类名 value(类名的显隐)： true | false -->
<p v-bind:class='{abc:t5}' v-on:click='fn'>p5p5p5p5p5p5p5</p>
<!-- []、{} 的结合使用 -->
<p v-bind:class='[{p6:t6},{pp6:tt6}]'>p6p6p6p6p6p6p6</p>
<!-- v-bind: 简写成 : -->
<!-- 操作Style -->
<div :style='div_style'></div>
<!-- 以上操作相对应的vue -->
<script>
new Vue({
el:'#app',
data:{
abc:'ABC',
t1:'p1~title',
t3:'p pp',
t4:'p',
tt4:'pp',
t5:true,
t6:true,
tt6:true,
div_style:{
backgroundColor:'cyan',
'200px',
height:'200px'
}
},
methods:{
fn(){
this.t5 = !this.t5
}
}
})
</script>
2.v-on指令
1.简写 v-on:click <=> @click
2.默认绑定 @click="fn" => 回调方法可以获取ev
3.带参绑定 @click="fn(10)" => 回调参数只能获取自定义参数10
4.带参绑定 @click="fn(10, $event)" => 回调参数可以获取自定义参数10即事件参数ev
<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值
<!-- 数据的双向绑定 -->
<!-- 两个输入框绑定的是同一个val,那么其中一个input的内容改变会直接映射到另一个input上。-->
<!-- 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值对应的复选框默认为选中状态 -->
<!-- 提交给后台数据: 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
<div v-show="isShow"></div>
<!-- 变量isShow值为true(显示,display: block)|false(隐藏,display: none) ->
- v-if
<div v-if="isShow"></div>
<!-- 变量isShow值为true(显示,渲染到页面)|false(隐藏,不渲染到页面) -->
- v-if v-else-if v-else
<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 遍历数组[]
<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变量对象{}
<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>
- 遍历的嵌套
<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>
今日所学实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
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>