1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 8 <title>Document</title> 9 <style> 10 [v-clock]{ 11 display: none; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="myApp"> 17 <!--v-clock能够解决插值表达式闪烁的问题--> 18 <p v-clock>----{{ message }}++++</p> 19 20 <!--v-text 默认是没有闪烁问题--> 21 <h5 v-text="message">++++</h5> 22 23 <!--v-text 会覆盖元素中原本的内容,但是插值表达式,只会替换自己的占位符,不会把整个元素的内容清空--> 24 25 <p>{{ message2 }}</p> 26 <!--v-html 把内容当做html输出--> 27 <div v-html="message2"></div> 28 29 <!--v-bind是提供用于绑定属性的指令 v-bind中可以写合法的js表达式--> 30 <input type="button" value="按钮" v-bind:title="mytitle + '123' "> 31 <!--v-bind的第二种写法(简写)--> 32 <input type="button" value="按钮" :title="mytitle + '123' "> 33 <!--v-on:事件绑定机制--> 34 <input type="button" v-on:click="show" value="按钮3" name="" id=""> 35 36 </div> 37 38 <script> 39 var myApp = new Vue({//导入包之后,就有了Vue构造函数 40 el: '#myApp',//表示我们new的这个Vue控制页面上的哪个区域 41 data: {//data属性中,存放的是el中要用到的数据 42 message:'hellow Vue.js',//通过vue提供的指令,很方便的把数据渲染到页面上 43 message2:'<h1>我是messages2</h1>', 44 mytitle:'这是一个自己定义的title', 45 46 }, 47 methods:{ 48 show:function(){ 49 alert(1) 50 } 51 } 52 }) 53 </script> 54 </body> 55 </html>
补充:
v-clock:解决插值表达式闪烁问题
<p>{{ message }}</p>
假设网络很慢页面渲染的时候数据还没出来,则先出来{{}},对用户体验则不好,这时候使用v-clock或者v-text则可以解决