赞
踩
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的基本指令就学完啦
期待明天的学习分享 希望大家多多交流,共同进步!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。