本地应用
- 通过Vue实现常见的网页效果
- 学习Vue指令,以案例巩固知识点
- Vue指令指的是,以v-开头的一组特殊语法
v-text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-text指令</title> </head>
<body> <div id="app"> <h2 v-text="message+'!'">深圳</h2> <h2 v-text="info+'!'">深圳</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:"黑马程序员!!!", info:"前端与移动教研部" } }) </script> </body>
</html>
|
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式
{{}}
可以替换指定内容
- 内部支持写表达式
v-html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-html指令</title> </head>
<body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ content:"黑马程序员" } }) </script> </body>
</html>
|
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
v-on
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on补充</title> </head>
<body> <div id="app"> <input type="button" value="点击" @click="doIt(666,'老铁')"> <input type="text" @keyup.enter="sayHi"> </div> <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>
</html>
|
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
Summary1
-
创建Vue示例时:el(挂载点),data(数据),methods(方法)
-
v-on指令的作用是绑定事件,简写为@
-
方法中通过this,关键字获取data中的数据
-
v-text指令的作用是:设置元素的文本值,简写为{{}}
-
v-html指令的作用是:设置元素的innerHTML
v-show
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>v-show指令</title> </head> <body> <div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"> <input type="button" value="累加年龄" @click="addAge"> <img v-show="isShow" src="./img/monkey.gif" alt=""> <img v-show="age>=18" src="./img/monkey.gif" alt=""> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/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> </body> </html>
|
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
v-if
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-if指令</title> </head> <body> <div id="app"> <input type="button" value="切换显示" @click="toggleIsShow"> <p v-if="isShow">黑马程序员</p> <p v-show="isShow">黑马程序员 - v-show修饰</p> <h2 v-if="temperature>=35">热死啦</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow:false, temperature:20 }, methods: { toggleIsShow:function(){ this.isShow = !this.isShow; } }, }) </script> </body>
</html>
|
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁的切换v-show,反之使用v-if,前者的切换消耗小
v-else
可以用 v-else 指令给 v-if 添加一个 “else” 块
v-else-if
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用
v-bind
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-bind指令</title> <style> .active{ border: 1px solid red; } </style> </head>
<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>
</html>
|
- v-bind指令的作用是:为元素绑定属性
- 完整写法是 v-bind:属性名
- 简写的话可以直接省略v-bind,只保留 :属性名
- 需要动态的增删class建议使用对象的方式
summary2
- 列表数据使用数组保存
- v-bind指令可以设置元素属性,比如src
- v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
v-for
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-for指令</title> </head>
<body> <div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="移除数据" @click="remove">
<ul> <li v-for="(it,index) in arr"> {{ index+1 }}黑马程序员校区:{{ it }} </li> </ul> <h2 v-for="item in vegetables" v-bind:title="item.name"> {{ item.name }} </h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ arr:["北京","上海","广州","深圳"], vegetables:[ {name:"西兰花炒蛋"}, {name:"蛋炒西蓝花"} ] }, methods: { add:function(){ this.vegetables.push({ name:"花菜炒蛋" }); }, remove:function(){ this.vegetables.shift(); } }, }) </script> </body>
</html>
|
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是( item,index ) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
v-on补充
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on补充</title> </head>
<body> <div id="app"> <input type="button" value="点击" @click="doIt(666,'老铁')"> <input type="text" @keyup.enter="sayHi"> </div> <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>
</html>
|
- 事件绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制触发的按键为回车
- 事件修饰符有多种
v-model
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-model指令</title> </head>
<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>
</html>
|
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值
修饰符
.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
1 2
| <input v-model.lazy="msg" >
|
.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
1
| <input v-model.number="age" type="number">
|
这通常很有用,因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
1
| <input v-model.trim="msg">
|
summary3
- 列表结构可以通过v-for指令结合数据生成
- v-on结合事件修饰符可以对事件进行限制,比如.enter
- v-on在绑定事件时可以传递自定义参数
- 通过v-model可以快速的设置和获取表单元素的值
- 基于数据的开发方式