黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用
生活随笔
收集整理的這篇文章主要介紹了
黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
黑馬vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用
一、總結(jié)
一句話(huà)總結(jié)：
v-bind等這些東西都是用的vue.data里面的變量
?
1、使用 v-cloak 能夠解決 插值表達(dá)式閃爍的問(wèn)題？
在v-cloak的style里面定義 display: none;
<style> [v-cloak] { /* display: none; */ } </style> <p v-cloak>++++++++ {{ msg }} ----------</p>?
?
2、cloak （v-cloak）？
英 /kl??k/ n. （尤指舊時(shí)的）披風(fēng)，斗篷；
英 /kl??k/? 美 /klo?k/? 全球(英國(guó)) ?
簡(jiǎn)明 牛津 新牛津? 朗文 韋氏? 柯林斯 例句 例句、百科在這里? 百科
n. （尤指舊時(shí)的）披風(fēng)，斗篷；遮蓋物；偽裝，幌子；（復(fù)數(shù)）衣帽間，行李寄存處，盥洗室；（承擔(dān)的）主要角色
v. 遮掩；隱匿；掩蓋（事實(shí)、情感等）；給……披斗篷
n. (Cloak) （美、英）克洛克（人名）
復(fù)數(shù) cloaks過(guò)去式 cloaked過(guò)去分詞 cloaked現(xiàn)在分詞 cloaking第三人稱(chēng)單數(shù) cloaks
?
?
3、v-text和v-cloak的區(qū)別？
$ 默認(rèn) v-text 是沒(méi)有閃爍問(wèn)題的
$ v-text會(huì)覆蓋元素中原本的內(nèi)容，但是 插值表達(dá)式? 只會(huì)替換自己的這個(gè)占位符，不會(huì)把 整個(gè)元素的內(nèi)容清空
<style> [v-cloak] { /* display: none; */ } </style> <p v-cloak>++++++++ {{ msg }} ----------</p> <h4 v-text="msg">==================</h4>?
?
4、v-html的作用？
輸出data中的html的內(nèi)容的
<div v-html="msg2">1212112</div>var vm = new Vue({el: '#app',data: {msg2: '<h1>哈哈，我是一個(gè)大大的H1， 我大，我驕傲</h1>',},})?
?
5、v-bind的作用？
用于綁定屬性的指令：input type="button" value="按鈕" v-bind:title="mytitle + '123'"
v-bind: 指令可以被簡(jiǎn)寫(xiě)為 :要綁定的屬性
?
6、v-on的作用？
* 用于事件綁定機(jī)制：比如click，mouseover等：input type="button" value="按鈕" :title="mytitle + '123'" v-on:click="alert('hello')"
* 縮寫(xiě)是 @
?
7、Vue指令之v-bind的三種用法？
直接使用指令v-bind
使用簡(jiǎn)化指令:
在綁定的時(shí)候，拼接綁定內(nèi)容：:title="btnTitle + ', 這是追加的內(nèi)容'"
?
?
二、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 能夠解決 插值表達(dá)式閃爍的問(wèn)題 --> 19 <p v-cloak>++++++++ {{ msg }} ----------</p> 20 <h4 v-text="msg">==================</h4> 21 <!-- 默認(rèn) v-text 是沒(méi)有閃爍問(wèn)題的 --> 22 <!-- v-text會(huì)覆蓋元素中原本的內(nèi)容，但是 插值表達(dá)式 只會(huì)替換自己的這個(gè)占位符，不會(huì)把 整個(gè)元素的內(nèi)容清空 --> 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: 指令可以被簡(jiǎn)寫(xiě)為 :要綁定的屬性 --> 31 <!-- v-bind 中，可以寫(xiě)合法的JS表達(dá)式 --> 32 33 <!-- Vue 中提供了 v-on: 事件綁定機(jī)制 --> 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>哈哈，我是一個(gè)大大的H1， 我大，我驕傲</h1>', 49 mytitle: '這是一個(gè)自己定義的title' 50 }, 51 methods: { // 這個(gè) methods屬性中定義了當(dāng)前Vue實(shí)例所有可用的方法 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. 如何定義一個(gè)基本的Vue代碼結(jié)構(gòu) --> 71 <!-- 2. 插值表達(dá)式 和 v-text --> 72 <!-- 3. v-cloak --> 73 <!-- 4. v-html --> 74 <!-- 5. v-bind Vue提供的屬性綁定機(jī)制 縮寫(xiě)是 : --> 75 <!-- 6. v-on Vue提供的事件綁定機(jī)制 縮寫(xiě)是 @ -->?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/11618038.html
總結(jié)
以上是生活随笔為你收集整理的黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 石川es6课程---18、ES6 复习
- 下一篇： 黑马vue---10-11、Vue实现跑