目录
VUE指令指的是:
以 v- 开头的一组特殊语法称为 Vue指令;
v-text指令:
可以将指令的值渲染在标签内部,但是v-text不会解析标签 相当与直接把变量的值当成字符串渲染 在页面上;
语法:
<h2 v-text = "message"></h2>
<!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>Vue指令</title>
</head>
<body>
<div id="app">
{{message}}
<h2 v-text = "message"></h2> <!--可以将指令的值渲染在标签内部,但是v-text不会解析标签 相当与直接把变量的值当成字符串渲染 在页面上-->
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message: '<div>你好</div>',
},
methods:{}
});
</script>
</body>
</html>
v-html 指令:
会把字符串中的标签解析出来页面上不会显示内容中的标签 但是会显示标签中的内容,v-html在项目中通常用来解析富文本;
语法:
<h2 v-html = "str"></h2>
<!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>Vue指令</title>
</head>
<body>
<div id="app">
{{message}}
<h2 v-text = "message"></h2> <!--可以将指令的值渲染在标签内部,但是v-text不会解析标签 相当与直接把变量的值当成字符串渲染 在页面上-->
<h3 v-html="str"></h3> <!--会把字符串中的标签解析出来页面上不会显示内容中的标签 但是会显示标签中的内容,v-html在项目中通常用来解析富文本-->
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message: '<div>你好</div>',
str: '<div>我是v-html指令</div>'
},
methods:{}
});
</script>
</body>
</html>
v-on 指令:
为元素绑定事件指令,可以将 v-on 缩写成 @ ,比如点击事件 (@click)、按下键盘(@keydown) 、滚动鼠标事件等;绑定的方法定义在methods中,方法内部可以通过 this关键字可以访问定义在data中的数据;
事件绑定中如果不传任何参数则函数有一个默认参数就是事件对象,如果传递参数并且仍然需要事件对象,可以使用 $event 作为事件的参数,该参数就是事件对象。
语法:
<input type="button" value="v-on指令" v-on:click= "click"> <br><!--标准写法-->
<input type="button" value="v-on指令简写" @click= "DoClick"> <!--VUE中提供简写方法;可以直接将v-on:替换成 @-->
<!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">
<input type="button" value="v-on指令" v-on:click= "click"> <br><!--标准写法-->
<input type="button" value="v-on指令简写" @click= "DoClick"> <!--VUE中提供简写方法;可以直接将v-on:替换成 @-->
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
click: function(){
alert('我是Vue中v-on指令,我的作用是为元素绑定事件,v-on:click= ""');
},
DoClick: function(){
alert('我是Vue中v-on指令,我的作用是为元素绑定事件,简写方法 @click=""');
}
}
});
</script>
</body>
</html>
问题:当双击h1标签的时候一次往后面加字?
<!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>
<!-- 问题:当双击h1标签的时候一次往后面加字? -->
<div id="app">
<h1 v-on:dblclick="dbl">{{str}}</h1>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
str: '我',
},
methods:{
dbl:function(){
this.str+= '真帅'
}
}
});
</script>
</body>
</html>
经典案例:计数器
当点击减号时span中的值依次减1,当span的值为0,弹出对话框提醒用户 已经到底了,当点击加号时span中的值依次加1,当span的值为10,弹出对话框提醒用户 已经到头了?
<!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>
<style>
#app {
font-size: 0;
}
button {
width: 50px;
height: 22px;
background-color: rgb(131, 147, 177);
outline: none ;
color: #a10303;
vertical-align: middle;
}
span {
display: inline-block;
width: 40px;
height: 20px;
line-height: 20px;
font-size: 20px;
text-align: center;
background-color: rgb(226, 225, 225);
vertical-align: middle;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="left">-</button>
<span>{{num}}</span>
<button v-on:click="right">+</button>
</div>
<script src="../../js/vue.js"></script>
<script>
var num;
var vm = new Vue({
el:'#app',
data:{
num: 0
},
methods:{
left:function(){
if(this.num > 0){
this.num--;
}else{
alert('我也是有底线的');
}
},
right:function(){
if(this.num<10){
this.num++;
}else{
alert('可以了 ,要不然下个月要吃土了');
}
}
}
});
</script>
</body>
</html>
另一种方法:
<!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">
<h2>当前数字为:{{num}}</h2>
<button @click="min">-</button>
<button @click="num++">+</button>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num : 0
},
methods:{
min:function(){
this.num--;
if( this.num < 0){
this.num = 0;
}
}
}
});
</script>
</body>
</html>
v-on指令补充:
1.事件绑定的方法可以写成函数调用的形式,可以传入自定义参数,但是定义方法时需要定义 形参 来接受传入的实参;
<!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. 事件绑定的方法可以写成函数调用的形式,可以传入自定义参数,
定义方法时需要定义 形参 来接受传入的实参; -->
<button @click="doit('已经点过了','不要在点了')">点我</button> <!-- 这里传递的参数时实参 -->
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
doit:function(O,T){ // 定义方法时,这是定义的形参
alert('已提交');
console.log(O);
console.log(T);
}
});
</script>
</body>
</html>
2. 事件的修饰符
事件的后面跟上 . 修饰符 可以对事件触发的对象进项限制,事件的修饰符有多种
<!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">
<!-- 2. 事件的修饰符 -->
事件的后面跟上 .修饰符 可以对事件触发的对象进行限制,这里的.enter可以限制触发的按键为回车键,事件的修饰符有多种
<input type="text" @keyup.enter="n" placeholder="请输入你的用户名"> <!--当按下键盘的回车键才会执行 n 方法-->
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
n:function(){
alert('恭喜你');
}
}
});
</script>
</body>
</html>
v-bind 指令:
设置元素的属性,是一个绑定指令,它可以绑定任何一个标签的任何属性;如果需要动态的增删 class,建议使用对象的方式!
语法格式:
v-bind: 属性名 = "表达式"
在vue中 我们可以简写成 :属性名 = "表达式"
<!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>
<style>
img {
width: 700px;
height: 400px;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind 是一个绑定指令,他可以绑定任何一个标签的任何属性 -->
<img v-bind:src="src" alt="" :title="imgTitle">
<input type="text" :placeholder = "str">
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
src: '../../img/1.jpg',
imgTitle:'我想和你在一起',
str:"请输入你的账户名和密码",
},
methods:{ //是vue中存储函数和方法的地方
}
});
</script>
</body>
</html>
v-bind 指令还可以用来绑定 类名class(特殊类名)
<!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>
<style>
.T {
width: 200px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<!-- 问题:当鼠标点击的时候添加类名 -->
<div id="app">
<!-- v-bind 是一个绑定指令,他可以绑定任何一个标签的任何属性 -->
<div :class="{T:classT}" @click="classC">
你在干什么呢?
</div>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
classT: false
},
methods:{ //是vue中存储函数和方法的地方
classC() {
this.classT = !this.classT;
}
}
});
</script>
</body>
</html>
v-model 指令(双向数据绑定):
获取和设置表单元素的值(双向数据绑定);监听用户的输入事件以更新数据,无论修改谁的值 另外一个都会同步更新!
作用体现在绑定的变量的值跟在浏览器上显示的内容保持一值;
实现原理:
其核心就是,一方面modal层通过defineProperty来劫持每个属性,一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件,为控件的v-model绑定input事件,从而页面输入能实时更新相关data属性值。
<!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">
<!-- v-model 是为表单双向绑定属性;
其实是双向绑定的value属性,value在表单元素中使用;
作用体现在绑定的变量的值跟在浏览器上显示的内容保持一值 -->
<input type="text" v-model="message">
<h2>{{ message }}</h2>
<button @click="xg">我是老大 我要修改你们里面的所有内容</button> <br>
<!-- <button @click="dj">请提交你的内容</button> -->
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'这里是你输入的内容',
},
methods:{
dj:function(){
alert(this.message)
},
xg:function(){
this.message='秀儿,是你吗???'
}
}
});
</script>
</body>
</html>
v-show 指令:
v-show指令的作用是:根据元素值的真假切换元素的显示状态,值为true元素显示(display: block),值为false元素隐藏(display: none);
原理是修改元素的display属性,实现显示隐藏;
指令后面的内容,最终都会解析为布尔值,数据改变之后,对应元素的显示状态会同步更新;
<!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>
<style>
img {
width: 1250px;
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<img :src="imgSrc" :title="imgTit" v-show="show"> <!-- 利用v-bind指令绑定img图片的地址和title属性 -->
<button @click="change">切换显示与隐藏</button>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
imgSrc: '../../img/High Sierra.jpg',
imgTit: '这是一张风景照片',
show: true,
},
methods:{
change:function(){
this.show = !this.show
}
}
});
</script>
</body>
</html>
v-show 中不光可以调用方法,还可以写条件表达式;
例如:v-show=“show >= 20”
<!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>
<style>
img {
width: 1250px;
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<!-- v-show还可以写条件表达式哦,当show大于20或等于时 才让图片显示 -->
<img :src="imgSrc" :title="imgTit" v-show="show >= 20"> <!-- 利用v-bind指令绑定img图片的地址和title属性 -->
<button @click="change">当我大于20时,会有惊喜哦!!!{{show}}</button>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
imgSrc: '../../img/High Sierra.jpg',
imgTit: '这是一张风景照片',
show: 10,
},
methods:{
change:function(){
this.show++; // 当button按钮点击时,不断增加
}
}
});
</script>
</body>
</html>
v-if 指令:
v-if 指令的作用:根据表达式的真假切换元素的显示与隐藏 ,和v-show的作用差不多,但区别在于 v-if 操作的是 dom 树元素,而 v-show 则是操作元素的 display属性 , 进行元素的显示与隐藏;
v-if 和 v-show 的区别?
1. v-if 和 v-show 都可以控住元素的显示与隐藏
2. v-if 操作的是 dom 树元素,是否渲染到页面;
3. v-show 控制元素是否显示(其实已经渲染到页面了,操作的是display属性)
表达式的值为true , 元素存在与dom树中 , 为false时 , 元素从dom树中移除;
频繁的切换元素的显示与隐藏 , 建议用v-show , 因为消耗小,反之使用 v-if ;
<!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">
<button @click="change">点击切换显示于隐藏</button>
<p v-if="show">我是v-if指令</p>
<!-- v-if 中也是可以写条件表达式 -->
<button @click="t">当我大于10时,我会对你说一句话{{math}}</button>
<p v-if="math > 10">你是傻逼</p>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
show: false,
math: 6,
},
methods:{
change:function(){
this.show=!this.show;
},
t:function(){
this.math++;
}
}
});
</script>
</body>
</html>