hi,今天昨天学习了vue的基础,今天我来分享一下vue的指令.
什么是指令?
1.指令的本质就是自定义属性
2.指令的格式:以v开头(比如v-cloak)
指令的分类
1.内容绑定,事件绑定
比如v-text v-html v-on
2.显示切换,属性绑定
比如v-show v-if v-bind
3.列表循环,表单元素绑定
比如v-for v-on v-model
还有好多指令可以去vue官网查看
官网:https://cn.vuejs.org/v2/api/
内容绑定,事件绑定指令
v-text
设置标签的文本值,默认的写法会替换全部内容,使用差值表达式{{}}可以替换指定内容, 内部支持表达式
<div id="app">
<h2 v-text="message+'!'">深圳</h2>
<h2 v-text="info+'!'">深圳</h2>
<h2>{{message}}深圳</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "芜湖",
info: "起飞"
}
})
</script>
2.v-html
设置元素的innerhtml 内容中有html结构会被解析为标签,解析时使用v-text 需要解析html结构使用v-html
<div id="app">
<p v-html="content"></p>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
content: "<a href='http://www.baidu.com'>百度一下 </a>"
}
})
</script>
3.v-on基础
为元素绑定事件,v-on:click 点击事件 v-on:dblick 双击事件 指令可以简写为@ 方法内部通过this关键字可以访问定义在data中的数据
<div id="app">
<input type="button" value="点击一下" v-on:click="doit">
<h2 @click="change">{{ food }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "希沃"
},
methods: {
doit: function () {
alert("芜湖起飞");
},
change: function () {
this.food += "特尔"
}
},
})
</script>
显示切换,属性绑定的指令
v-show
根据表达值的真假,切换元素的显示和隐藏, true为显示 ,flase为隐藏 指令后面的内容,最终都会解析为布尔值
<div id="app">
<input type="button" value="点击一下" @click="changeisshow">
<input type="button" value="18禁" @click="addage">
<img v-show="isshow" src="../img/body背景.jpg" alt="">
<img v-show="age>=18" src="../img/主机游戏.jpg" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isshow: false,
age: 17
},
methods: {
changeisshow: function () {
this.isshow = !this.isshow;
},
addage: function () {
this.age++;
}
},
})
</script>
2.v-if
根据表达式的真假,切换和显示和隐藏(操作dom元素) 表达式值为true时,元素存在dom树中 反之移除 频繁切换使用v-show 反之使用v-if
<div id="app">
<input type="button" value="切换" @click="fanzhuanisshow">
<p v-if="isshow">芜湖起飞</p>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isshow: false
},
methods: {
fanzhuanisshow: function () {
this.isshow = !this.isshow;
}
}
})
</script>
3.v-bind
设置元素的属性,比如(src:title.class) 语法v-bind:属性名=表达式
需要动态的增删class建议使用对象的方法式
<div id="app">
<img v-bind:src="imgsrc" alt="">
<br>
<img :src="imgsrc" alt="" :title="imgtitle">
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgsrc: "这里是图片的地址",
imgtitle: "芜湖"
}
})
</script>
列表循环,表单元素绑定的指令
v-for
根据数据生成列表 数组经常和v-for使用 语法(item,index) in 数据
item和index 可以结合其他指令一起使用
<div id="app">
<input type="button" value="添加" @click="add">
<input type="button" value="删除" @click="remove">
<ul>
<li v-for="(item,index) in arr">
{{ index+1}} 芜湖起飞:{{item }}
</li>
</ul>
<h2 v-for="item in vegeables" v-bind:title="item.name">
{{item.name}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["北京", "上海", "西安", "重庆"],
vegeables: [
{ name: "西瓜" },
{ name: "苹果" }
]
},
methods: {
add: function () {
this.vegeables.push({ name: "苹果" })
},
remove: function () {
this.vegeables.shift();
}
}
})
</script>
v-on补充
传递自定义参数 事件修饰符
事件邦定的方法写成函数调用的形式 可以传入自定义参数 method 方法的意思
事件后面跟上 . 修饰符 可以对事件进行限制 .enter 限制为回车
<div id="app">
<input type="button" value="点击" @click="doit(666,'芜湖')">
<input type="text" @keyup.enter="sayhi">
</div>
<script src=" ../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
doit: function (p1, p2) {
console.log(p1);
console.log(p2);
},
sayhi: function () {
alert("你好")
}
}
})
</script>
v-model
获取和设置表单元素的值 (双向数据绑定) vue的特点
绑定的数据和表单元素值相关联.
<div id="app">
<input type="text" v-model="message" @keyup.enter="getm">
<input type="button" value="修改message" @click="setm">
<h2>{{ message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "芜湖"
},
methods: {
getm: function () {
alert(this.message);
},
setm: function () {
this.message = "起飞";
}
},
})
</script>
结语:
这样vue,js的基本指令就学完啦
期待明天的学习分享 希望大家多多交流,共同进步!