Vue.js基本程式碼及基本指令
目錄
Tips
1.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> <!-- 1. 匯入Vue的包 --> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <!-- 將來 new 的Vue例項，會控制這個 元素中的所有內容 --> <!-- Vue 例項所控制的這個元素區域，就是我們的 V --> <div id="app"> <p>{{ msg }}</p> </div> <script> // 2. 建立一個Vue的例項 // 當我們匯入包之後，在瀏覽器的記憶體中，就多了一個 Vue 建構函式 // 注意：我們 new 出來的這個 vm 物件，就是我們 MVVM中的 VM排程者 var vm = new Vue({ el: '#app', // 表示，當前我們 new 的這個 Vue 例項，要控制頁面上的哪個區域 // 這裡的 data 就是 MVVM中的 M，專門用來儲存 每個頁面的資料的 data: { // data 屬性中，存放的是 el 中要用到的資料 msg: '歡迎學習Vue' // 通過 Vue 提供的指令，很方便的就能把資料渲染到頁面上，程式設計師不再手動操作DOM元素了【前端的Vue之類的框架，不提倡我們去手動操作DOM元素了】 } }) </script> </body> </html>
2.Vue的基本表示式
插值表示式 和 v-text
<p v-cloak>++++++++ {{ msg }} ----------</p>
<h4 v-text="msg">==================</h4>
v-text會覆蓋元素中原本的內容，但是 插值表示式 只會替換自己的這個佔位符，不會把 整個元素的內容清空
v-cloak：使用 v-cloak 能夠解決 插值表示式閃爍的問題
v-html：將msg中的內容當作html來解析
v-bind Vue提供的屬性繫結機制 縮寫是 :
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> <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>
3.幾點注意事項
注意：在 VM例項中，如果想要獲取 data 上的資料，或者 想要呼叫 methods 中的 方法，必須通過 this.資料屬性名 或 this.方法名 來進行訪問，這裡的this，就表示 我們 new 出來的 VM 例項物件
VM例項，會監聽自己身上 data 中所有資料的改變，只要資料一發生變化，就會自動把 最新的資料，從data 上同步到頁面中去；【好處：程式設計師只需要關心資料，不需要考慮如何重新渲染DOM頁面】
4.事件修飾符
使用 .stop 阻止冒泡
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
使用 .prevent 阻止預設行為
<a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a>
使用 .capture 實現捕獲觸發事件的機制
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
使用 .self 實現只有點選當前元素時候，才會觸發事件處理函式
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
使用 .once 只觸發一次事件處理函式
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a>
.stop 和 .self 的區別
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
.self 只會阻止自己身上冒泡行為的觸發，並不會真正阻止 冒泡的行為
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
5.v-model指令的學習
<!-- 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">
6.Vue中的樣式
6.1class:
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<!-- 第一種使用方式，直接傳遞一個數組，注意： 這裡的 class 需要使用 v-bind 做資料繫結 -->
<!-- <h1 :class="['thin', 'italic']">這是一個很大很大的H1，大到你無法想象！！！</h1> -->
<!-- 在陣列中使用三元表示式 -->
<!-- <h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1，大到你無法想象！！！</h1> -->
<!-- 在陣列中使用 物件來代替三元表示式，提高程式碼的可讀性 -->
<!-- <h1 :class="['thin', 'italic', {'active':flag} ]">這是一個很大很大的H1，大到你無法想象！！！</h1> -->
<!-- 在為 class 使用 v-bind 繫結 物件的時候，物件的屬性是類名，由於 物件的屬性可帶引號，也可不帶引號，所以 這裡我沒寫引號； 屬性的值 是一個識別符號 -->
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
</script>
6.2 style
<div id="app">
<!-- 物件就是無序鍵值對的集合 -->
<!-- <h1 :style="styleObj1">這是一個h1</h1> -->
<h1 :style="[ styleObj1, styleObj2 ]">這是一個h1</h1>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>
7.v-for
7.1迴圈普通陣列
<div id="app">
<p v-for="(item, i) in list">索引值：{{i}} --- 每一項：{{item}}</p>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});
</script>
7.2迴圈物件陣列
<div id="app">
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
methods: {}
});
</script>
7.3迴圈物件
<div id="app">
<!-- 注意：在遍歷物件身上的鍵值對的時候， 除了 有 val key ,在第三個位置還有 一個 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}</p>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '託尼·屎大顆',
gender: '男'
}
},
methods: {}
});
</script>
7.4迭代數字
<div id="app">
<!-- in 後面我們放過 普通陣列，物件陣列，物件， 還可以放數字 -->
<!-- 注意：如果使用 v-for 迭代數字的話，前面的 count 值從 1 開始 -->
<p v-for="count in 10">這是第 {{ count }} 次迴圈</p>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
7.5v-for中的key
<!-- 注意： v-for 迴圈的時候，key 屬性只能使用 number獲取string -->
<!-- 注意： key 在使用的時候，必須使用 v-bind 屬性繫結的形式，指定 key 的值 -->
<!-- 在元件中，使用v-for迴圈的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字串/數字 型別 :key 值 -->
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="新增" @click="add">
</div>
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '趙高' },
{ id: 4, name: '韓非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 新增方法
this.list.unshift({ id: this.id, name: this.name })
}
}
});
</script>
8.v-if和v-show
<!-- v-if 的特點：每次都會重新刪除或建立元素 -->
<!-- v-show 的特點： 每次不會重新進行DOM的刪除和建立操作，只是切換了元素的 display:none 樣式 -->
<!-- v-if 有較高的切換效能消耗 -->
<!-- v-show 有較高的初始渲染消耗 -->
<!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show -->
<!-- 如果元素可能永遠也不會被顯示出來被使用者看到，則推薦使用 v-if -->
<div id="app">
<!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">這是用v-if控制的元素</h3>
<h3 v-show="flag">這是用v-show控制的元素</h3>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>