本片内容
通过Vue实现常见的网页效果
学习Vue指令
V-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id=app> <h1>{{message}}</h1> <div v-text="message2"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ message:"欢迎学习vue", message2:"加油" } }) </script> </body> </html>
对于插值表达式和v-text的值的插入：
这两是一样的
V-text总结：
v-text指令的作用：设置标签的内容（textContext）
默认的写法会全部替换，使用差值表达式可以替换内容
内部支持写表达式
v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-text="context"></div> </br> <div v-html="context"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ context:"<a href='https://cn.vuejs.org/v2/guide/'>Vue官网</a>" } }) </script> </body> </html>
V-html指令作用是，设置元素的innerhtml
内容中html结构会被解析成标签
v-text指令无论什么内容都会被解析文本
解析文本内容使用v-text，需要解析html结构使用v-html
V-on的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" v-on:click="clicked"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", methods:{ clicked:function(){ alert("欢迎学习Vue"); } } }) </script> </body> </html>
这是事件的绑定
这里可以简写：
可以将v-on：换成@
下面就是对数据进行改变，原来js改变需要通过dom获取它的值进行改变，现在可以在当前页面使用this获取需要的值来改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" v-on:click="clicked"/> <h2 @click="click2">{{message}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ message:"欢迎学习vue" }, methods:{ clicked:function(){ alert("欢迎学习Vue"); }, click2:function(){ this.message+="!"; } } }) </script> </body> </html>
v-on总结：
v-on指令的作用是为了绑定事件
事件名不需要on
指令可以简写@
绑定方法在methods里