第二章：本地应用
通过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