3.3.3 {{}} 插值表达式
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"> <p>姓名：{{ username }}</p> <p>性别：{{ gender }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { username: "lisi", gender: "男" } }) </script> </body> </html>
3.3.4 v-html
v-text和{{}}只能渲染纯文本内容，如果要把包含html标签的字符串渲染为页面的html元素，需要使用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-html="content"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { content: "<h1>你好</h1>" } }) </script> </body> </html>
3.4 属性绑定指令
插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中。在vue中可以使用 v-bind:指令为元素的属性动态绑定值。简写为英文的 ：。
用法示例：
<!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="text" v-bind:placeholder="tips"> <input type="text" :placeholder="tips"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
3.5 模板渲染语法中使用JavaScript表达式
在vue提供的模板渲染语法中，除了支持绑定简单的数据值外，还支持JavaScript表达式运算。
用法示例：
<!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"> <!-- 字符串的拼接 --> <p>{{ tips + '1' }}</p> <!-- ok未定义undefined 为false --> <p>{{ ok ? '1' : '2' }}</p> <!-- 字符串的反转 --> <p>{{ tips.split('').reverse().join('') }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
在属性绑定中一样可以使用JavaScript表达式。
在使用属性绑定期间，绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号。
示例：
<!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"> <p :title=" 'tips' + 123 ">nihao</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
3.6 事件绑定指令
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，原生的DOM对象有onclick、oninput等原生事件，在vue中为v-on:click、v-on:input等。v-on 简写为 @。
通过v-on绑定的事件处理函数，需要在methods节点中声明。
示例：
<!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="add"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." }, methods: { //声明方法1 // add: function() { // alert('11111') // } // 或 //声明方法2 add() { alert('1111') } } }) </script> </body> </html>
3.6.1 事件对象
在原生的DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。在v-on指令所绑定的事件处理函数中，同样可以接收事件对象event。没有任何传参，会默认有一个事件对象。
获取产生事件的组件， 事件对象.target。
示例：
<!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="add"> <p>{{ num }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { //e为事件对象，没有任何传参，会默认有一个事件对象。 add(e) { this.num++; e.target.style.backgroundColor = "red"; } } }) </script> </body> </html>
点击了两次按钮
3.6.2 绑定事件并传参
在使用v-on指令绑定事件时，可以使用（）进行传参。
当有主动进行传参时，事件参数对象会被覆盖，所以vue提供了$event来表示原生的事件参数对象event，$event可以解决事件参数对象被覆盖的问题。
示例：
<!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"> <!-- add事件处理函数中传入参数 --> <input type="button" value="点击" v-on:click="add(10, $event)"> <p>{{ num }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { //事件处理函数 add(a, e) { this.num+=a; e.target.style.backgroundColor = "red"; } } }) </script> </body> </html>
点击了一次按钮
