<!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>Document</title> <script src="./lib/vue.js"></script> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <!-- 使用v-cloak来解决插值表达式{{msg}}的闪烁问题（防止在取到数据以前闪烁出来的msg） --> <!-- v-cloak和v-text之间作用相似，都能表达出msg，但是也有区别 --> <p v-cloak>{{msg}}</p><!-- v-cloak会将标签中的内容全都显示，即使在插值表达式前后加数据也都会显示出来 --> <h4 v-text="msg"></h4><!-- v-text只会显示msg，标签之间如果添加其他东西则会被msg覆盖掉；v-text没有闪烁问题 --> <!-- v-html是将msg2数据中的数据转换为html的页面 --> <div v-html="msg2"></div> <!-- v-bind是提供用于绑定属性的指令，也就是说，如果title中的值是定值则不需要v-bind，如果是一个变量， 则需要绑定v-bind才能显示变量；也可以变量加上一个表达式 --> <input type="button" value="按钮" v-bind:title="mytitle +'123'"> <input type="button" value="按钮" :title="mytitle+'123'"><!-- v-bind的简写形式就是: --> <!-- v-on来提供时间绑定机制（如点击按钮触发弹窗，鼠标覆盖到按钮触发弹窗） --> <input type="button" value="按钮" v-on:click="show"> <input type="button" value="按钮" @mouseover="show"><!-- v-on的简写形式就是@ --> </div> <script> var vm=new Vue({ el:"#app", data:{ msg:"123", msg2:"<h1>我是一个大大的标签，我大，我骄傲</h1>", mytitle:"这是一个自定义title" }, methods:{//这个methods属性中定义了Vue中所有可用的方法 show:function(){ alert("hello") } } }) </script> </body> </html>