一.vue的基本代碼
<div id="app">
<p>{{ msg }}</p>
</div>
desc:id爲app的元素區域的所有內容，是將來new的vue實例所要控制的
<script>
var vm = new Vue({
el:'app',
data:{
msg:'HelloWorld'
}
})
</script>
desc:
1.new出來的這個vm對象，就是mvvm中vm的調度者
2.data:{ }就是mvvm中的M,用來保存每個頁面的數據
3.message:‘HelloWorld’:通過vue指令 v-bind 屬性綁定渲染到頁面，不需要再手動操作dom
二.v-指令
1.v-cloak:解決插值表達式閃爍的問題
<p>{{msg}}</p>
<p v-cloak>{{ msg }}</p>
2.v-text:用於渲染普通文本,會覆蓋元素中原本的內容，但是插值表達式只會替換自己的這個佔位符，不會把整個元素的內容清空。
<div>===={{msg}}===</div>
<div v-text="msg"></div>
3.v-html
<div v-html="msg_html"></div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg_html:'<h1>HelloWorld</h1>'
}
})
</script>
4.v-bind: Vue提供的屬性綁定機制 縮寫是 :
<input type="button" value="按鈕" v-bind:title="mytitle + '123'">
5.v-on:Vue提供的事件綁定機制 縮寫是 @
<input type="button" value="按鈕" :title='myTitle' v-on:click="alert('hello')">
<input type="button" value="按鈕" @click="show">
三.事件修飾符
- .stop 阻止冒泡事件
- prevent 阻止默認行爲 如標籤的跳轉；表單的提交submit事件
<a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a>
- .capture 實現捕獲觸發事件的機制；組件嵌套從外到裏執行
<div @click.capture = "handlerDiv">
<input type="button" value="戳" @click = "handlerInput">
</input>
</div>
點擊“戳”按鈕時，先執行handlerDiv的方法，再執行handlerInput的方法
- .self 實現只有點擊當前元素時候，纔會觸發事件處理函數
<div class="inner" @click.self="divHandler">
<input type="button" value="戳" @click="btnHandler">
</div>
點擊“戳”按鈕，只會走btnHandlere方法(即阻止冒泡)，只有當點擊div的時候纔會觸發divHandler方法
- .once 只觸發一次事件處理函數
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a>
只阻止一次linkClick行爲 第二次會跳轉到百度首頁
四.v-model指令：實現表單元素和Model中數據的雙向綁定
注意：v-model 只能運用在 表單元素中 常見的有
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button" value="確認" />
<input type="submit" value="提交" />
等等… 因爲其他元素的值沒法在頁面修改，也就不能實現V中數據傳給M，只能M傳給V
<input type="text" style="width:100%;" v-model="msg">
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'zzzz'
},
methods: {
}
});
</script>
五.v-for
1.循環普通數組
<p v-for="(item, i) in list">索引值：{{i}} --- 每一項：{{item}}</p>
data: {
list: [1, 2, 3, 4, 5, 6]
},
2.循環對象數組
<p v-for="(user, i) in list">Id：{{ user.id }},名字：{{ user.name }},索引：{{i}}</p>
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
3.循環對象
<!-- 注意：在遍歷對象身上的鍵值對的時候， 除了 有 val key ,在第三個位置還有 一個 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} ,鍵是： {{key}} ,索引： {{i}}</p>
data: {
user: {
id: 1,
name: 'xxx',
gender: '男'
}
},
4.循環數字
<!-- 注意：如果使用 v-for 迭代數字的話，前面的 count 值從 1 開始 -->
<p v-for="count in 10">這是第 {{ count }} 次循環</p>
5.key屬性的使用
<!-- 注意： v-for 循環的時候，key 屬性只能使用 number獲取string -->
<!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
data: {
id: '',
name: '',
list: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' },
{ id: 4, name: 'D' },
{ id: 5, name: 'E' }
]
},
六.v-if,v-show的使用
<input type="button" value="toggle" @click="flag=!flag">
<!-- v-if 的特點：每次都會重新刪除或創建元素 -->
<!-- v-show 的特點： 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式 -->
<!-- v-if 有較高的切換性能消耗 -->
<!-- v-show 有較高的初始渲染消耗 -->
<!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show -->
<!-- 如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if -->
<h3 v-if="flag">這是用v-if控制的元素</h3>
<h3 v-show="flag">這是用v-show控制的元素</h3>
七.vue中$el屬性：
除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。
var vm= new Vue({
el:"#container",
data:{
msg:"重啓2020!"
},
address:"all over the world"
})
vm.$el：vue關聯的DOM元素 --> #container
vm.$data：vue實例的data對象 -->{msg:“重啓2020!”}
vm.options.address–>“all over the world”
（vm.$options.methods ==> 獲取vue實例的自定義屬性methods）
總體結構：
1.vue的基本代碼
2.vue指令
3.事件修飾符( .stop .prevent .capture .self .once)
4.v-model
5.v-for
6.v-if與v-show