黑马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的基本使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
黑馬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提供的事件綁定機制 縮寫是 @ -->?
?
?
?
?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/11618038.html
總結
以上是生活随笔為你收集整理的黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 石川es6课程---18、ES6 复习
- 下一篇： 黑马vue---10-11、Vue实现跑