Vue中的v-text,v-html,v-clock,v-bind

 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则可以解决

Vue中的v-text,v-html,v-clock,v-bind

补充：

v-clock：解决插值表达式闪烁问题

猜你喜欢