大话Vue之v-cloak学习
# 大话Vue之v-cloak
## 代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 [v-cloak] { 11 display: none; 12 } 13 </style> 14 </head> 15 16 <body> 17 <div id="app"> 18 <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 --> 19 <p v-cloak>++++++++ {{ msg }} ----------</p> 20 <h4 v-text="msg">==================</h4> 21 <!-- 默认 v-text 是没有闪烁问题的 --> 22 <!-- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 --> 23 24 <div>{{msg2}}</div> 25 <div v-text="msg2"></div> 26 <div v-html="msg2">1212112</div> 27 28 <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 --> 29 <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> --> 30 <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 --> 31 <!-- v-bind 中，可以写合法的JS表达式 --> 32 33 <!-- Vue 中提供了 v-on: 事件绑定机制 --> 34 <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> --> 35 <!-- mouseover 鼠标覆盖事件 --> 36 37 <input type="button" value="按钮" v-bind:title="mytitle" @click="show"> 38 </div> 39 40 41 <script src="./lib/vue-2.4.0.js"></script> 42 43 <script> 44 var vm = new Vue({ 45 el: '#app', 46 data: { 47 msg: '123', 48 msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>', 49 mytitle: '这是一个自己定义的title' 50 }, 51 methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法 52 show: function () { 53 alert('Hello') 54 } 55 } 56 }) 57 58 59 /* document.getElementById('btn').onclick = function(){ 60 alert('Hello') 61 } */ 62 </script> 63 </body> 64 65 </html> 66 67 68 69 70 <!-- 1. 如何定义一个基本的Vue代码结构 --> 71 <!-- 2. 插值表达式 和 v-text --> 72 <!-- 3. v-cloak --> 73 <!-- 4. v-html --> 74 <!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : --> 75 <!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ -->
将在CSDN同时更新：
地址：https://blog.csdn.net/Jamesaonier
