黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用
一、总结
一句话总结：
v-bind等这些东西都是用的vue.data里面的变量
1、使用 v-cloak 能够解决 插值表达式闪烁的问题？
在v-cloak的style里面定义 display: none;
<style> [v-cloak] { /* display: none; */ } </style> <p v-cloak>++++++++ {{ msg }} ----------</p>
2、cloak （v-cloak）？
英 /kləʊk/ n. （尤指旧时的）披风，斗篷；
英 /kləʊk/ 美 /kloʊk/ 全球(英国)
简明 牛津 新牛津 朗文 韦氏 柯林斯 例句 例句、百科在这里 百科
n. （尤指旧时的）披风，斗篷；遮盖物；伪装，幌子；（复数）衣帽间，行李寄存处，盥洗室；（承担的）主要角色
v. 遮掩；隐匿；掩盖（事实、情感等）；给……披斗篷
n. (Cloak) （美、英）克洛克（人名）
复数 cloaks过去式 cloaked过去分词 cloaked现在分词 cloaking第三人称单数 cloaks
3、v-text和v-cloak的区别？
$ 默认 v-text 是没有闪烁问题的
$ v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
<style> [v-cloak] { /* display: none; */ } </style> <p v-cloak>++++++++ {{ msg }} ----------</p> <h4 v-text="msg">==================</h4>
4、v-html的作用？
输出data中的html的内容的
<div v-html="msg2">1212112</div> var vm = new Vue({ el: '#app', data: { msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>', }, })
5、v-bind的作用？
用于绑定属性的指令：input type="button" value="按钮" v-bind:title="mytitle + '123'"
v-bind: 指令可以被简写为 :要绑定的属性
6、v-on的作用？
* 用于事件绑定机制：比如click，mouseover等：input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"
* 缩写是 @
7、Vue指令之v-bind的三种用法？
直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"
二、v-cloak、v-text、v-html的基本使用
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 36 37 <input type="button" value="按钮" @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提供的事件绑定机制 缩写是 @ -->