04 Vue 指令操作
一、文本指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1、插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) -->
<p>{{ msg }}</p>
<p>{{ msg + '拼接内容' }}</p>
<p>{{ msg[1] }}</p> <!--这里是索引取值，dom对象索引也是从0开始的-->
<p>{{ msg.slice(2, 4) }}</p> <!--和pyhton中一样，可以支持切片取值-->
<hr>
<!--2、v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!--3、v-html：可以解析html语法标签的文本 -->
<p v-text="'<b>' + msg + '</b>'"></p> <!--v-text 不能解析html标签语言-->
<p v-html="'<b>' + msg + '</b>'"></p>
<p v-text="`<b>${msg}</b>`"></p> <!--v-text不能解析html标签语言-->
<p v-html="`<b>${msg}</b>`"></p>
<!--v-once控制的标签只能被赋值一次-->
<p v-once={{msg}} @click="f"></p>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
},
methods:{
f:function(){
this.msg='lalalal'
},
}
})
</script>
</html>
在这里我们会发现v-once控制的标签触发不了鼠标点击事件
二、事件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!--事件指令-->
<!--完整的语法 v-on:事件名='事件函数'-->
<p v-on:click="click1">{{count}}</p>
<!--简写 @click='click2'-->
<!--@事件名='事件函数'-->
<p @click="click2">{{p2}}</p>
<!--绑定的事件函数可以添加()，添加括号就代表要传递参数-->
<ul>
<li @click="f3(100)">{{ arr[0] }}</li>
<li @click="f3(200)">{{ arr[1] }}</li>
<li @click="f3(300)">{{ arr[2] }}</li>
</ul>
<ul>
<li @click="f4(0)">{{ arr[0] }}</li>
<li @click="f4(1)">{{ arr[1] }}</li>
<li @click="f4(2)">{{ arr[2] }}</li>
</ul>
<hr>
<!--绑定的事件函数如果没有传递参数，默认传入 事件对象 -->
<div class="box" @click="f5"></div>
<hr>
<!--事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event -->
<div class="box" @click="f6(10,$event)"></div>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
count:0,
p2:'这是第二个p标签',
arr:[1,2,3]
},
methods:{
click1(){
this.count++
},
click2(){
this.p2 = '第二个p标签被点击了'
},
f3(num) {
console.log(num);
},
f4(index) {
console.log(this.arr[index]);
},
f5(ev){
console.log(ev)
},
f6(num,ev){
console.log(num);
console.log(ev); //这里的ev就是Vue的鼠标事件
}
},
});
</script>
</html>
三、属性指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.b1 {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
width: 150px;
height: 150px;
background-color: darkturquoise;
/*transition: .3s;*/
}
.box2 {
width: 300px;
height: 100px;
background-color: darkgoldenrod;
/*transition: .3s;*/
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<!--1.下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的-->
<!--2.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量" -->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--3.属性指令操作 style 属性-->
<div style="width: 200px;height: 200px;background-color: greenyellow">我是正常的style样式</div>
<div :style="mysy1">我是第一种以字符串方式变形的style</div>
<div :style="mysy2">我是第二种以字典的方式变形的style</div>
<!-- 了解：{中可以用多个变量控制多个属性细节} -->
<div :style="{width: w,height: h,backgroundColor: color}">我是以多个变量的方式变形的style</div>
<!--重点：一般vue都是结合原生css来完成样式控制 -->
<div :class="c1">我的类属性值为插值表达式c1 它的值为Box1</div>
<!--class可以写两份，一份写死，一份有vue控制-->
<div class="box1" :class="c2">我的类属性值为插值表达式c2 它的值为Box2</div>
<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box1:true, circle:flag}" @mouseover="changeCable(1)" @mouseout="changeCable(0)">我的类属性还不知道</div>
<!--[]控制多个类名-->
<div :class="[c3, c4]">我的类属性为{{c3}}--{{c4}}</div>
<div :class="[c3, {c4:c5}]">我的类属性为{{c3}}--{{c4}}</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
<script src="Vue_js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
title:'我是title',
xyz:'我是xyz',
mysy1:'width: 200px;height: 200px;background-color: yellow',//可以直接将style样式以字符串的形式赋给mysy
//也可以以字典的形式赋值给mysy2
// 所有-连接的样式名，对应的都是-符号去掉，第二个单词大写
mysy2:{
width: '200px',
height:'200px',
backgroundColor:'pink'
},
//用多个变量的方式去修改style样式
w:'300px',
h:'150px',
color:'blue',
c1:'box1',
c2:'box2',
flag:false,
c3:'box1',
c4:'box2',
// c5:false,
},
methods:{
changeCable(num){
this.flag = num;
}
},
});
//这里是定时的切换标签的类属性
// setInterval(function () {
// // app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
// if (app.c1 === 'box1') {
// app.c1 = 'box2';
// } else {
// app.c1 = 'box1';
// }
// }, 1000)
</script>
</html>
四、表单指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单指令</title>
</head>
<body>
<div id="app">
<h2>文本输入框双向绑定</h2>
<!--文本框的实时获取内容-->
<!--双向绑定：服务于文本输入框-->
<p><input type="text" v-model="v1"></p>
<p><input type="text" v-model="v1"></p>
<p><textarea v-model="v1"></textarea></p>
<hr>
<div>
<h2>单选框</h2>
<!--单选框时以name进行分组，同组中只能发生单选-->
<!--v-model 存储的值为单选框的value值-->
<!--在Vue实例中的data中的变量的值时单选框value的值-->
<p><input type="radio" name="sex" value="男" v-model="v2">男</p>
<p><input type="radio" name="sex" value="女" v-model="v2">女</p>
{{v2}}
</div>
<hr>
<div>
<h2>单复选框</h2>
<!--v-model 存储的值为true|false-->
<!--或者定义为替换的值-->
<input type="checkbox" v-model="v3" true-value="选中" false-value="未选中"/>
{{v3}}
</div>
<hr>
<div>
<h2>复选框</h2>
<!--多复选框时以name进行分组，同组中只能发生单选-->
<!--v-model 存储的值为单选框的value的数组-->
<!--在Vue实例中的data中的变量的值时单选框value的数组-->
<p><input type="checkbox" name="hobbies" value="read" v-model="v4">read</p>
<p><input type="checkbox" name="hobbies" value="run" v-model="v4">run</p>
<p><input type="checkbox" name="hobbies" value="sing" v-model="v4">sing</p>
{{v3}}
</div>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
v1:'',
v2:'女',
v3:'',
v4:['read','sing']
}
})
</script>
</html>
五、斗篷指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>斗篷指令</title>
<style>
/*属性选择器，将属于这个属性值的标签设为不显示*/
/*当Vue实例加载成功后，这个属性值的标签会自动显示*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--给这个挂载点添加一个v-cloak属性-->
<!--避免页面的闪烁-->
<div id="app" v-cloak>
<p>{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:100
}
})
</script>
</html>
六、条件指令
1. 基础语法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--条件指令：
v-if="true|false"，为假时，在页面上不渲染，可以隐藏标签中的信息
v-show="true|false"，为假时，在页面中用display:none渲染，虽然没展示，但是任在页面结构中
-->
<p v-if="true">if指令</p>
<p v-show="true">show指令</p>
<hr>
<!-- v-if是一个家族
v-if
v-else-if
v-else
1、上分支成立，下分支会被屏蔽
2、else分支只要在所有上分支都为假时显示，且不需要条件
-->
<p v-if="v2 === 1">if分支</p>
<p v-else-if="v2 === 2">elif分支1</p>
<p v-else-if="v2 === 3">elif分支2</p>
<p v-else>else分支</p>
<hr>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: 100,
v2:5
}
})
</script>
</html>
2. 条件指令实例（重要）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件指令</title>
<style>
.c1{
width: 200px;
height: 200px;
}
.b1{
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="c1" :style="{backgroundColor:color}"></div>
<button @click="clickEvent('red')" :class="color==='red'? 'b1':''">红</button>
<button @click="clickEvent('yellow')" :class="color==='yellow'? 'b1':''">黄</button>
<button @click="clickEvent('blue')" :class="color==='blue'? 'b1':''">蓝</button>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
// 页面重新加载的时候，先从前台数据库中查看是否有记录的color的值,
// 如果有取前台数据库中的color值，没有则默认red
color:localStorage.color?localStorage.color:'red',
// color:'red',
},
methods:{
clickEvent(color){
// 各个按钮的点击事件，当按钮点击是，颜色换为对应的按钮的规定的颜色，并且按钮显示高亮
this.color=color;
// 并且再前台数据库中记录（key：value的形式）
// localStorage:是前台可以永久保存数据的数据库
// sessionStorage的生命周期与页面标签绑定，当标签页被关闭，数据库被清空
localStorage.color = this.color
}
}
})
</script>
</html>
七、循环指令
1. 基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
</head>
<body>
<div id="app">
<!--1. 循环字符串-->
<div>
<h2>循环字符串</h2>
<!--1. 当 v-for="value in str"时，v就是字符串的每一个的元素-->
<h2>1. 当 v-for="value in str"时，value就是字符串的每一个的元素</h2>
<div v-for="value in str">{{value}}</div>
<h2>2. 当 v-for="(value,index) in str"时，value就是字符串的每一个的元素---index是字符串每一个字符对应的索引</h2>
<div v-for="(value,index) in str">我是字符串的索引{{index}}--我是索引对应的字符串值：{{value}}</div>
</div>
<hr>
<!--2. 循环列表-->
<div>
<h2>循环列表</h2>
<!--在Vue实例中的data我们定义一个列表-->
<!--for循环指令的基本语法 v-for="value in list"-->
<!--1. 当v-for="value in list"时，value就是列表的元素-->
<h2>1. 当 v-for="value in list"时，value就是列表的元素</h2>
<div v-for="v in list " >
<ul>
<li>{{v}}</li>
</ul>
</div>
<!--2. 当v-for="(value,index) in list"时，value就是列表的元素---index是列表的索引-->
<h2>2. 当 v-for="(value,index) in list"时，value就是列表的元素---index是列表的索引</h2>
<div v-for="(value,index) in list">
<ul>
<li>我是索引{{index}}---列表索引对应的值为{{value}}</li>
</ul>
</div>
</div>
<hr>
<!--3. 循环字典-->
<h2>循环字典</h2>
<h2>1. 当v-for="value in dic"时，value就是字典元素的value</h2>
<!--1. 当v-for="value in dic"时，value就是字典元素的value-->
<div v-for="value in dic">我是字典的key对应的---{{value}}</div>
<h2>2. 当v-for="(value,index) in dic"时，value就是字典元素的key对应的value，index是字典的key</h2>
<!--2. 当v-for="(value,key) in dic"时，value就是字典元素的key对应的value，key是字典的key-->
<div v-for="(value,key) in dic">我是字典的key:{{key}}--我是字典key对应的value值:{{value}}</div>
<h2>3. 当v-for="(value,key,index) in dic"时，value就是字典元素的key对应的value，key是字典的key,index是索引</h2>
<!--2. 当v-for="(value,key,index) in dic"时，value就是字典元素的key对应的value，key是字典的key,index是索引-->
<div v-for="(value,key,index) in dic">我是字典的key:{{key}}--我是字典key对应的value值:{{value}}----我是索引{{index}}</div>
<h2>循环列表中的字典，并对字典进行操作</h2>
<!--4. 循环列表中的字典，并对字典进行操作-->
<div v-for="(div,i) in list_dic">
<hr v-if="i != 0">
<div v-for="(value,index) in dic">
<p>{{index}}:{{value}}</p>
</div>
</div>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
str:'我是字符串',
list:[1,2,3,4,5],
dic:{
name:'cecilia',
age:18,
sex:'女',
},
list_dic:[
{
name:'cecilia',
age:18,
sex:'女'
},
{
name:'xichen',
age:18,
sex:'女'
},
{
name:'xucheng',
age:18,
sex:'男'
}
]
}
})
</script>
</html>
2.循环指令的实例（重要）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="click">留言</button>
<ul >
<li v-for="(value,index) in comment_list" @click="deletemsg(index)">{{value}}</li>
</ul>
</div>
</body>
<script src="Vue_js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'',
comment_list:[]
},
methods:{
click(){
if (this.msg){
this.comment_list.push(this.msg);
this.msg='';
}
},
deletemsg(index){
this.comment_list.splice(index,1)
}
}
})
</script>
</html>
