02-vue基本指令
阿新 • • 發佈:2020-12-08
1、v-cloak 解決插值表示式的閃爍問題
2、v-text 文字,沒有閃爍問題
3、v-html 會解析文字內容
4、v-bind用於繫結屬性的指令
5、v-on 用於事件繫結的指令
6、v-model 用於資料的雙向繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> [v-cloak] { /* display: none; */ } </style> </head> <body> <div id="app"> <!-- 使用 v-cloak 能夠解決 插值表示式閃爍的問題 --> <p v-cloak>++++++++ {{ msg }} ----------</p> <h4 v-text="msg">==================</h4> <!-- 預設 v-text 是沒有閃爍問題的 --> <!-- v-text會覆蓋元素中原本的內容,但是 插值表示式 只會替換自己的這個佔位符,不會把 整個元素的內容清空 --> <div>{{msg2}}</div> <div v-text="msg2"></div> <div v-html="msg2">1212112</div> <!-- v-bind: 是 Vue中,提供的用於繫結屬性的指令 --> <!-- <input type="button" value="按鈕" v-bind:title="mytitle + '123'"> --> <!-- 注意: v-bind: 指令可以被簡寫為 :要繫結的屬性 --> <!-- v-bind 中,可以寫合法的JS表示式 --> <!-- Vue 中提供了 v-on: 事件繫結機制 --> <!-- <input type="button" value="按鈕" :title="mytitle + '123'" v-on:click="alert('hello')"> --> <input type="button" value="按鈕" @click="show"> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: '123', msg2: '<h1>哈哈,我是一個大大的H1, 我大,我驕傲</h1>', mytitle: '這是一個自己定義的title' }, methods: { // 這個 methods屬性中定義了當前Vue例項所有可用的方法 show: function () { alert('Hello') } } }) /* document.getElementById('btn').onclick = function(){ alert('Hello') } */ </script> </body> </html> <!-- 1. 如何定義一個基本的Vue程式碼結構 --> <!-- 2. 插值表示式 和 v-text --> <!-- 3. v-cloak --> <!-- 4. v-html --> <!-- 5. v-bind Vue提供的屬性繫結機制 縮寫是 : --> <!-- 6. v-on Vue提供的事件繫結機制 縮寫是 @ -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <h4>{{ msg }}</h4> <!-- v-bind 只能實現資料的單向繫結,從 M 自動繫結到 V, 無法實現資料的雙向繫結 --> <!-- <input type="text" v-bind:value="msg" style="width:100%;"> --> <!-- 使用 v-model 指令,可以實現 表單元素和 Model 中資料的雙向資料繫結 --> <!-- 注意: v-model 只能運用在 表單元素中 --> <!-- input(radio, text, address, email....) select checkbox textarea --> <input type="text" style="width:100%;" v-model="msg"> </div> <script> // 建立 Vue 例項,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '大家都是好學生,愛敲程式碼,愛學習,愛思考,簡直是完美,沒瑕疵!' }, methods: { } }); </script> </body> </html>