前言
本章讲解Vue的相关指令的学习，包括了内容绑定和事件绑定
方法
1.内容绑定之v-text
该指令的作用在于设置标签的文本值，相当于前面所看到的设值表达式（双大括号），但是也有些许不同。
应用实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <h2 v-text="message"></h2> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
相信大家已经发现了，这个不是和前面的插值表达式是一样的吗？到底它们有什么不同呢？
当我们使用v-text属性进行设值的话，上面示例中的h2标签之前不管有什么内容都将被替换掉，如果要想部分的显示，那么我们还是要使用插值表达式的，请看下面的示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <h2 v-text="message">I Love You!</h2> <h2>{{message}} I Love You!</h2> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
当然了，无论是v-text指令还是插值表达式，都是支持一些基本的js操作的，比如字符串的拼接，请看下面示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <h2 v-text="message + ' I Love You!'"></h2> <h2>{{message + " I Love You!"}}</h2> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
运行结果：
2.内容绑定之v-html
该指令的作用在于设置标签的innerHTML，相信学过jq的同学应该不陌生，它的作用在于可以将文本解析为html的方式进行一个显示，这也是它和v-text的本质区别。
应用实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <h2 v-html="message"></h2> <h2>{{message}}</h2> <h2 v-html="info"></h2> <h2>{{info}}</h2> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', info:'<a href="http://www.baidu.com">百度一下</a>' } }) </script> </body> </html>
显示结果如下：
我们发现，当显示基本内容的时候，v-text和v-html显示的效果其实是一样的。但是一旦显示html，那么v-html会将其解析为html语句进行显示，例如上面的百度一下。
3.事件绑定之v-on
该指令的作用在于为元素绑定常见的事件，如单击、双击、鼠标移入移出等，触发的方法绑定在vue实例的methods中
应用实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <input type="button" value="事件绑定" v-on:click="text"/> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods:{ text:function(){ alert(this.message); } } }) </script> </body> </html>
运行结果如下：
当我们点击事件绑定按钮的时候，将出发text事件的方法，弹出message的值！
当然了，每次我们为元素绑定事件的时候都需要写这个v-on:事件名比较繁琐，vue给我们提供了一个简便的写法，那就是@:事件名，请看如下示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <input type="button" value="事件绑定" @click="text"/> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods:{ text:function(){ alert(this.message); } } }) </script> </body> </html>
这样可以和v-on:达到同样的效果！
————————————————
智一面|前端开发编程试题vue