Vue指令
文章目录
v-text指令
设置标签的文本值(textContent)
-
v-text
<p v-text="数据变象"></p><!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> window.addEventListener('load',function(){ var app = new Vue({ el:'#app', data:{ message:'黑马程序员' } }) }) </script> </head> <body> <div id="app"> <h2 v-text="message"></h2> </div> </body> </html> -
{{数据变象}}
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> window.addEventListener('load',function(){ var app = new Vue({ el:'#app', data:{ message:'黑马程序员' } }) }) </script> </head> <body> <div id="app"> <h2>{{message}}</h2> </div> </body> </html>注意点：使用方法一，无法在html中添加文本，比如
<h2 v-text="message">深圳</h2>，"深圳"在浏览器中是没有显示的。方法二<h2>{{message}}深圳</h2>，这是可以实现的针对方法一的问题解决方法：
<h2 v-text="message+'深圳'"></h2>，加入的内容需要用’ '(单引号)- 修改js中的message，将message的内容改为’黑马程序员深圳’
v-html指令
同js中的innerHTML相似，可以解析html标签，又结合了vue中的渲染
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
window.addEventListener('load',function(){
var app = new Vue({
el:'#app',
data:{
message:'<a href="javascript:;">黑马程序员</a>'
}
})
})
</script>
</head>
<body>
<div id="app">
<h2 v-h="message"></h2>
</div>
</body>
</html>
v-on指令
为元素绑定事件，将函数写于methods对象中
<div id="app">
<input type="button" value="事件绑定" v-on:click="方法">
<input type="button" value="事件绑定" v-on:mouseenter="方法">
<input type="button" value="事件绑定" v-on:dbclick="方法">
</div>
var app = new Vue({
el:'#app',
methods:{
函数名:function(){
//内容
}
}
})
为了代码的简洁，可以@代替v-on:，比如v-on:click="fun"，可以改为@click="fun"
v-show指令
根据表达式的真假，切换元素的显示和隐藏，指令后面的内容都会解析为 布尔值
本质是修改display样式
v-show中内容分类：
- true或者false
- Vue data对象中的变量
- 条件表达式
<div id="app">
<img src="地址" v-show="true"> <!--显示-->
<img src="地址" v-show="isShow"> <!--不显示-->
<img src="地址" v-show="age>=18"> <!--不显示-->
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
}
})
</script>
v-if指令
根据表达值的真假，切换元素的显示和隐藏（操作DOM元素）
本质是DOM元素的移除和增加
v-if中内容分类：
- true或者false
- Vue data对象中的变量
- 条件表达式
用法同v-show相同
v-show与v-if的用法区别
频繁需要切换的元素使用v-show，反之使用v-if,因为操作DOM树对性能的消耗较大
v-bind指令
设置元素的属性（比如:src,title,class等）
v-bind:属性="属性值"或者:属性="属性值"
例子：
<body>
<div id="#app">
<img v-bind:src="imgSrc" v-bind:title="imgTittle+'gfgf'">
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
imgSrc:"./img/01.jpg",
imgTitle:"123"
}
})
</script>
该图片的路径为本地相对路径，当鼠标放在图片上不动时，会显示你设置的title名称
切换class，使用三元表达式，或者{类名:判读条件/boolean}
<body>
<div id="app">
<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive">
<!-- isActive为true，class就为active,否则就为空 -->
<img :src="imgSrc" :title="imgTitle" :class={active:isActive} @click="toggleActive" >
<!-- :class={active:isActive} 该语句的意思是该标签的class值由isActive决定是否active-->
</div>
</body>
【案例】图片的切换
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#app {
width: 600px;
margin: 100px auto;
position: relative;
}
img {
width: 500px;
height: 500px;
border: 1px black solid;
}
#app a {
position: absolute;
top: 243px;
width: 48px;
height: 65px;
font-size: 20px;
background-color: rgba(125, 125, 125, 0.5);
}
.left {
left: 0px;
}
.right {
left: 453px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
window.addEventListener('load',function(){
var app = new Vue({
el:"#app",
data:{
imgSrc:["./img/01.jpg", "./img/02.jpg"],
imgTitle:["现代美女", "古代美女"],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
})
</script>
</head>
<body>
<div id="app">
<img :src="imgSrc[index]" :title="imgTitle[index]">
<a href="javascript:;" class="left" @click="prev" v-show="index!=0"> < </a>
<a href="javascript:;" class="right" @click="next" v-show="index < imgSrc.length-1"> > </a>
</div>
</body>
</html>
v-for指令
我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要item in items形式的特殊语法，其中items是源数据数组，而item是被迭代的数组元素的别名
简单理解：items是Vue对象中的源数据数组，item是自己随意定义的，代表源数据数组的成员，v-for就是将其指定的标签（包含后代标签和内部内容）根据数据的个数，拷贝若干份
注意点：数组长度的更新会同步到页面上，是响应式的
<ul>
<li v-for="item in array">你好</li>
</ul>
像以上的li一样，存在内容的，在使用v-for指令的时候，会将li中的内容——”你好“
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
window.addEventListener('load',function(){
var app = new Vue({
el:"#app",
data:{
array:[1,2,3]
}
})
})
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="i in array">
{{i}}
</li>
</ul>
</div>
</body>
</html>
输出结果：
1
2
3
我们可以带入索引，索引不需要我们再次定义
<ul>
<li v-for="(item,index) in array">
{{index}}和{{item}}
</li>
</ul>
输出结果：
0和1
1和2
2和3
我们可以遍历对象中的数据
<div id="app">
<ul>
<li v-for="i in obj">
{{i.name}}
</li>
</ul>
</div>
<script>
window.addEventListener('load',function(){
var app = new Vue({
el:"#app",
data:{
array:[1,2,3],
obj:[{name:"Lee"},
{name:"hello"}]
}
})
})
</script>
输出结果：
Lee
hello
v-on补充：传递自定义参数，事件修饰符
@keyup.enter="函数名(x,y)"——意思为只有按下然后放开"enter"键的时候才触发事件，并且可以传递参数，否则不会调用该函数
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="addStudent('陈',40)">增加新同学</button>
<ul>
<li v-for="(item,index) in student":title="item.age">
{{index+1}}---->{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
student:[
{name:"赵",age:18},
{name:"钱",age:19},
{name:"孙",age:20},
{name:"李",age:21},
]
},
methods:{
addStudent:function (x,y) {
var o={name:x,age:y};
this.student.push(o);
}
}
})
</script>
</body>
</html>
v-model指令
获取和设置表单元素的值（双向数据绑定）
v-model指令的作用是便捷的设置和获取表单元素的值。
双向绑定——即标签中的数据和Vue中对应的数据是相互绑定的，改变哪一方的数据，另一方的数据也会随着改变
<div id="app">
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"双向数据绑定"
}
})
</script>
【具体例子】
<div id="app">
<button @click="setMessage">修改message</button>
<input type="text" name="文本框" v-model="message" @keydown.enter="getMessage">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"不错"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message = "不知道改成什么";
}
}
})
</script>
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
