一.文本操作指令
1.v-text
v-text <==> {{}}
<p v-text="msg"></p>
2.v-html
<p v-html="msg"></p>
// <b>123</b> => 加粗的123
3.v-once
<p v-once>
{{msg}}
</p>
// 只能被赋值一次
4.v-model
<input type="text" v-model="val">
// v-model控制的是表单元素的value值
v-bind v-text v-html v-once
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
background-color: orange;
line-height: 12px;
}
</style>
</head>
<body>
<div id="app">
<!--html全局属性语法：全局属性名=‘属性值’-->
<p v-bind:title="title" a="a" b="b">擦不掉</p>
<!--v-model也是对文本操作的指令-->
<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.js"></script>
<script type="text/javascript">
//指令：出现在html标签中可以被vue解析处理的全局属性
new Vue({
el:'#app',
data:{
title:'',
msg:'message'
}
})
</script>
</html>
5.v-cloak
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
</div>
也可以将导入Vue的语句放在上面来避免页面闪烁 不过不推荐这样做
<script src="js/Vue.js"></script>
<style type="text/css">
[v-cloak]{
/*display: none;*/
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{ msg }}
</div>
</body>
<!--<script src="js/Vue.js"></script>-->
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'message'
}
})
</script>
二.关键指令
1.v-bind
操作的是属性,绑定属性后,属性值可以由变量来控制
操作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="{'200px', height:'200px'}"
:style="my_style"
data: {
my_style: {
"200px",
height: "200px"
}
}
课堂案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</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">[1p1p1p1p1p</p>
<!--绑定后，操作普通字字符串-->
<p v-bind:title="t2">[2p2p2p2p2p2p2p</p>
<!--多类名，单一变量操作-->
<p v-bind:class="t3">p3p3p3p3p3</p>
<p v-bind:class="[t4,tt4]">p4p4p4p4p4</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="[{t6:t6},{pp6:pp6}]">p6p6p6p6p6p6</p>
<!--v-bind操作class-->
<!--[a,b] a,b为变量 对其赋值的是class的具体值，如： a:active b:red=> class="active red"-->
<!--{a:b} a为class值 b为true|false的变量，控制a的显隐，如： b:true => class='a' b:false => class=''-->
<!--v-bind:指令可以简写-->
<p :class="'simple'">简写</p>
<!-- 操作style -->
<!-- style一般都是多条样式 -->
<div :style="div_style"></div>
<div :style="{ '100px', height: '100px', backgroundColor: 'blue'}"></div>
</div>
</body>
<script src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
abc: 'ABC',
t1: "title",
t3: 'p3',
p4: 'p4',
tt4: 'pp4',
t5:false,
t6:true,
tt6:true,
div_style:{
'200px',
height:'200px',
backgroundColor:'pink'
}
},
methods:{
fn() {
this.t5 = !this.t5;
}
}
})
</script>
</html>
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>
课堂案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<!--v-on指令-->
<!--简写： @ -->
<!--绑定的是事件，操作的是事件对应的方法名-->
<p @click="fn"></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.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
methods:{
fn:function () {
console.log('click fn')
},
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>
3.v-model指令
// 双向绑定
<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">
课堂案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form action="">
<!-- 数据的双向绑定 -->
<!-- v-model 绑定的是value，所以省略 -->
<input type="text" v-model="val">
<textarea v-model="val"></textarea>
<p v-text="val"></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="bbq" v-model="val4" name="ck3">
</div>
<!--多单选框-->
<!--多个单选框的v-model绑定一个变量-->
<!--变量值为多个单选框中一个的value值，则该单选框为默认选中状态-->
<div>
男<input type="radio" value="man" v-model="val5" name="sex">
女<input type="radio" value="woman" v-model="val5" name="sex">
</div>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
val:'',
val2:false,
val3:'选中',
val4:[],
val5:'man',
}
})
</script>
</html>
三.条件渲染指令
<div v-show="isShow"></div>
// 变量isShow值为true(显示,display: block)|false(隐藏,display: none)
<div v-if="isShow"></div>
// 变量isShow值为true(显示,渲染到页面)|false(隐藏,不渲染到页面)
<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的值具有唯一性
课堂案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
200px;
height: 200px;
}
.r {
background-color: red;
}
.or {
background-color: orange;
}
[v-cloak] {
display: none;
}
</style>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
500px;
height: 300px;
}
.main {
500px;
height: 300px;
}
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" v-cloak>
<button @click="toggle">显隐切换</button>
<!--v-if-->
<div class="box r" v-if="isShow"></div>
<!-- v-show -->
<div class="box or" 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="change(0)">red</li>
<li @mouseover="change(1)">green</li>
<li @mouseover="change(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="tag==2" key="2"></div>
<!-- v-show -->
<ul>
<li @mouseover="changeMain(0)">red</li>
<li @mouseover="changeMain(1)">green</li>
<li @mouseover="changeMain(2)">blue</li>
</ul>
<div class="main red" v-show="whoShow(0)"></div>
<div class="main green" v-show="whoShow(1)"></div>
<div class="main blue" v-show="whoShow(2)"></div>
</div>
</body>
<script src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isShow: false,
tag:0,
flag:0
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
change(num) {
this.tag = num
},
changeMain(num){
this.flag=num
},
whoShow(num){
return this.flag == num;
}
}
})
</script>
</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>
<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="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<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">value:{{v}} key:{{k}} index:{{i}}</li>
</ul>
<!--遍历的嵌套-->
<ul>
<li v-for="(person,index) in persons" :key="index">
<div v-for="(v,k) in person" :key="k" style="float: left">{{k}}:{{v}} </div>
</li>
</ul>
</div>
</body>
<script src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '常威打来福，一个愿打一个愿挨',
list: [1, 2, 3, 4, 5],
dic: {
name: 'changwei',
age: 88,
gender: '？？？',
},
persons:[
{name:'zero',age:56},
{name:'egon',age:78},
{name:'yyh',age:58}
]
},
})
</script>
</html>
todolist案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<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.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>