第二章:本地应用
通过vue实现常见网页效果。
Vue指令是以v-开头的一组特殊语法。
常见Vue指令
1、内容绑定,事件绑定:v-text、v-html、v-on基础
2、显示切换,属性绑定:v-show、v-if、v-bind
3、列表循环,表单元素绑定:v-for、v-on补充、v-model
本地应用-V-text指令
v-text作用:设置标签内容
使用差值表达式{ {}}可替换指定内容
<body> <div id="app"> <h2 v-text="message+'!'">深圳</h2> <h2>{ { message +'!'}}深圳</h2> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"你好,小黑", } }) </script> </body> </html> |
你好,小黑! 你好,小黑!深圳 |
本地应用-V-html指令
v-html作用:设置标签inner html
内容有html结构会被解析为标签。
<body> <div id="app"> <h2 v-html="content"> </h2> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ content:"<a href=’www.baidu.com>百度</a> ", } }) </script> </body> </html> |
百度 |
本地应用-V-on基础
v-on作用:为元素绑定事件
事件名不行要写on,指令可以简写为@
本地应用案例-计数器
最大值10,最小值0,超出范围会弹窗提示
<body> <div id="app"> <!-- 计数器 --> <div class="input-num"> <button @click="sub"> - </button> <span>{ { num }}</span> <button @click="add"> + </button> </div> <img src="http://www.itheima.com/images/logo.png" alt="" /> </div> </body> </html> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 编码 --> <script> // 创建Vue实例 var app = new Vue({ el: "#app", data: { num: 1, min: 0, max: 10 }, methods: { sub() { if (this.num > this.min) { this.num--; } else { alert("别点啦,到底啦"); } }, add() { if (this.num < this.max) { this.num++; } else { alert("别点啦,到头啦"); } } } }); </script> |
本地应用-V-show
根据表达式真假,切换元素的显示和隐藏
原理是修改元素的display属性,实现隐藏
表达式的值最终都会解析为布尔值。
<body> <div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"> <img v-show="isShow" src="./img/monkey.gif" alt=""> <img v-show="age>=18" src="./img/monkey.gif" alt=""> </div> <!-- 1.开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow:true, age:17 }, methods: { changeIsShow:function(){ this.isShow = !this.isShow; }, }, }) </script> </body> |
本地应用-V-if
根据表达式真假,切换元素的显示和隐藏
原理是操作dom元素来切换显示和隐藏,true存在于dom树,false从dom树删除该元素。
表达式的值最终都会解析为布尔值。
频繁切换显示隐藏用v-show,否则可以用v-if
<body> <div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"> <img v-if="isShow" src="./img/monkey.gif" alt=""> <img v-if="age>=18" src="./img/monkey.gif" alt=""> </div> <!-- 1.开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow:true, age:17 }, methods: { changeIsShow:function(){ this.isShow = !this.isShow; }, }, }) </script> </body> |
本地应用-V-bind
设置元素属性。
格式:v-blind:属性名=表达式,简写为 “:属性名=表达式”
<body> <div id="app"> <img v-bind:src="imgSrc" alt=""> <br> <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"> <br> <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ imgSrc:"http://www.itheima.com/images/logo.png", imgTitle:"标题", isActive:false }, methods: { toggleActive:function(){ this.isActive = !this.isActive; } }, }) </script> </body> |
本地应用-图片切换器
点击切换箭头切换图片,第一张照片无左翻箭头,最后一张无右翻箭头
<body> <div id="mask"> <div class="center"> <h2 class="title"><img src="./images/logo.png" alt=""> 图片切换器</h2> <img :src="imgList[index]" alt="" /> <a href="javascript:void(0)" @click="prev" class="left" v-show="index>0"> <img src="./images/prev.png" alt="" /> </a> <a href="javascript:void(0)" @click="next" class="right" v-show="index<imgList.length-1"> <img src="./images/next.png" alt="" /> </a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#mask", data: { imgList: [ "./images/00.jpg", "./images/01.jpg", "./images/02.jpg", "./images/03.jpg", ], index: 0 }, methods: { prev() { // 上一张 this.index--; }, next() { // 下一张 this.index++; } } }); </script> </body> |
本地应用-v-for
根据数据生成列表结构
v-for常和数组结合使用
语法格式:(index,item) in items item是一个数组
<body> <div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="移除数据" @click="remove"> <ul> <li v-for="item in vegetables" > { { index+1 }} { { item.name }} </li> </ul> </div> <!-- 1.开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ vegetables:[ {name:"西兰花炒蛋"}, {name:"蛋炒西蓝花"} ] }, methods: { add:function(){ this.vegetables.push({ name:"花菜炒蛋" }); //从末尾增加一个 }, remove:function(){ this.vegetables.shift(); //从前端移除一个 } }, }) </script> </body> |
本地应用-v-on补充
自定义参数和事件修饰符,可以对事件触发进行限制 如@keyup.enter
<body> <div id="app"> <input type="button" value="点击" @click="doIt(666,'老铁')"> <input type="text" @keyup.enter="sayHi"> </div> <!-- 1.开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", methods: { doIt:function(p1,p2){ console.log("做it"); console.log(p1); console.log(p2); }, sayHi:function(){ alert("吃了没"); } }, }) </script> </body> |
本地应用-v-model补充
获取和设置表单元素值(双向数据绑定)
绑定数据和表单元素,无论修改谁,另外一个同步修改
<body> <div id="app"> <input type="button" value="修改message" @click="setM"> <input type="text" v-model="message" @keyup.enter="getM"> <h2>{ { message }}</h2> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"黑马程序员" }, methods: { getM:function(){ alert(this.message); }, setM:function(){ this.message ="酷丁鱼"; } }, }) </script> </body> |
小黑记事本-介绍
小黑记事本-新增
输入框输入记事内容,回车即可计入显示列表。
1、生成列表结构(v-for 数组)
2、获取用户输入(v-model)
3、回车,新增数据(v-on.enter 添加数据)
4、通过右键审查元素,在已有成果上快速定位
小黑记事本-删除
在显示列表右侧,点击×号,删除该记录显示。
- 点击根据索引删除指定内容(v-on splice 索引)
×号增加点击事件,调用删除函数,传入list的index
在删除函数中,使用list.splice(index)删除list中的该元素
元素删除,显示自动同步消失
小结:
(v-for 的list)数据改变,和数据绑定的列表元素同步改变
事件自定义参数
小黑记事本-统计
统计列表的记事个数
1、显示列表数组长度{ {list.length}} (V-text的缩写形式,插值表达式)
小黑记事本-清空
点击clear,一次性删除所有元素
1、点击事件,绑定方法为清除所有信息(v-on 清空数组list)
this.list=[]
小黑记事本-隐藏
当没有记事时,页面底部的统计隐藏不显示,更美观。(v-show v-if均可实现)
1、没有数据时,隐藏统计元素(v-show v-if)
v-if=”list.length!=0”
v-show=” list.length!=0”
视频:https://www.bilibili.com/video/BV12J411m7MG?from=search&seid=488807520486206024
笔记:https://gitee.com/ikunsdc/vue-quick-start/blob/master/VUE%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.pdf