1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>vue指令v-cloak</title> 7 </head> 8 <style> 9 10 [v-cloak]{ 11 display: none; 12 } 13 14 </style> 15 16 <body> 17 <!-- v-cloak解决插值闪烁问题 --> 18 <div id="app"> 19 <p v-cloak>{{msg}}</p> 20 <p v-text="msg"></p> 21 <!-- v-html转化代码 --> 22 <p v-html="msg1"></p> 23 <!-- v:bind--绑定属性值 v-bind可以简写: 变量名可以添加属性--> 24 <!-- <input type="button" value="按钮" v-bind:title="mytitle +'1234'"> --> 25 <input type="button" value="按钮" :title="mytitle +'1234'"> 26 <!-- v-on 指令 vue事件/鼠标点击事件 --> 27 <input type="button" value="点击我" v-on:click="show"> 28 </div> 29 30 <script src="../js/vue.js"></script> 31 <script> 32 var vm = new Vue({ 33 el: "#app", 34 data: { 35 msg: '我是一只小猫', 36 msg1:'<h2>我是一只小猫</h2>', 37 mytitle:"我是标题" 38 }, 39 methods:{ 40 //定义函数可以和微信小程序相似 41 show:function(){ 42 alert("我是一只小鸟") 43 } 44 } 45 }) 46 </script> 47 </body> 48 </html>