Vue 是什么？
- Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架
- vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合
使用Vue將helloworld 渲染到頁面上
<img src="./images/day01-1.png" >
指令
- 本質(zhì)就是自定義屬性
- Vue中指定都是以 v- 開頭
v-cloak
-
防止頁面加載時(shí)出現(xiàn)閃爍問題
<style type="text/css"> /* 1、通過屬性選擇器 選擇到 帶有屬性 v-cloak的標(biāo)簽 讓他隱藏 */ [v-cloak]{ /* 元素隱藏 */ display: none; } </style> <body> <div id="app"> <!-- 2、 讓帶有插值 語法的 添加 v-cloak 屬性 在 數(shù)據(jù)渲染完場(chǎng)之后，v-cloak 屬性會(huì)被自動(dòng)去除， v-cloak一旦移除也就是沒有這個(gè)屬性了 屬性選擇器就選擇不到該標(biāo)簽 也就是對(duì)應(yīng)的標(biāo)簽會(huì)變?yōu)榭梢? --> <div v-cloak >{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 el: '#app', // data 里面存儲(chǔ)的是數(shù)據(jù) data: { msg: 'Hello Vue' } }); </script> </body> </html>
v-text
- v-text指令用于將數(shù)據(jù)填充到標(biāo)簽中，作用于插值表達(dá)式類似，但是沒有閃動(dòng)問題
- 如果數(shù)據(jù)中有HTML標(biāo)簽會(huì)將html標(biāo)簽一并輸出
- 注意：此處為單向綁定，數(shù)據(jù)對(duì)象上的值改變，插值會(huì)發(fā)生變化；但是當(dāng)插值發(fā)生變化并不會(huì)影響數(shù)據(jù)對(duì)象的值
<div id="app">
<!--
注意:在指令中不要寫插值語法 直接寫對(duì)應(yīng)的變量名稱
在 v-text 中 賦值的時(shí)候不要在寫 插值語法
一般屬性中不加 {{}} 直接寫 對(duì)應(yīng) 的數(shù)據(jù)名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在標(biāo)簽的 內(nèi)容中 才用插值語法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
v-html
用法和v-text 相似 但是他可以將HTML片段填充到標(biāo)簽中
可能有安全問題, 一般只在可信任內(nèi)容上使用
v-html，永不用在用戶提交的內(nèi)容上-
它與v-text區(qū)別在于v-text輸出的是純文本，瀏覽器不會(huì)對(duì)其再進(jìn)行html解析，但v-html會(huì)將其當(dāng)html標(biāo)簽解析后輸出。
<div id="app"> <p v-html="html"></p> <!-- 輸出：html標(biāo)簽在渲染的時(shí)候被解析 --> <p>{{message}}</p> <!-- 輸出：<span>通過雙括號(hào)綁定</span> --> <p v-text="text"></p> <!-- 輸出：<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span> --> </div> <script> let app = new Vue({ el: "#app", data: { message: "<span>通過雙括號(hào)綁定</span>", html: "<span>html標(biāo)簽在渲染的時(shí)候被解析</span>", text: "<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span>", } }); </script>
v-pre
- 顯示原始信息跳過編譯過程
- 跳過這個(gè)元素和它的子元素的編譯過程。
- 一些靜態(tài)的內(nèi)容不需要編譯加這個(gè)指令可以加快渲染
<span v-pre>{{ this will not be compiled }}</span>
<!-- 顯示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即使data里面定義了msg這里仍然是顯示的{{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
v-once
- 執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)繼續(xù)更新】
<!-- 即使data里面定義了msg 后期我們修改了 仍然顯示的是第一次data里面存儲(chǔ)的數(shù)據(jù)即 Hello Vue.js -->
<span v-once>{{ msg}}</span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
雙向數(shù)據(jù)綁定
- 當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化
- 當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化
v-model
-
v-model是一個(gè)指令，限制在
<input>、<select>、<textarea>、components中使用
<div id="app">
<div>{{msg}}</div>
<div>
當(dāng)輸入框中內(nèi)容改變的時(shí)候， 頁面上的msg 會(huì)自動(dòng)更新
<input type="text" v-model='msg'>
</div>
</div>
mvvm
- MVC 是后端的分層開發(fā)概念； MVVM是前端視圖層的概念，主要關(guān)注于 視圖層分離，也就是說：MVVM把前端的視圖層，分為了 三部分 Model, View , VM ViewModel
- m model
- 數(shù)據(jù)層 Vue 中 數(shù)據(jù)層 都放在 data 里面
- v view 視圖
- Vue 中 view 即 我們的HTML頁面
- vm （view-model） 控制器 將數(shù)據(jù)和視圖層建立聯(lián)系
- vm 即 Vue 的實(shí)例 就是 vm
v-on
- 用來綁定事件的
- 形式如：v-on:click 縮寫為 @click;
<img src="images/@click.png" width="90%">
v-on事件函數(shù)中傳入?yún)?shù)
<body>
<div id="app">
<div>{{num}}</div>
<div>
<!-- 如果事件直接綁定函數(shù)名稱，那么默認(rèn)會(huì)傳遞事件對(duì)象作為事件函數(shù)的第一個(gè)參數(shù) -->
<button v-on:click='handle1'>點(diǎn)擊1</button>
<!-- 2、如果事件綁定函數(shù)調(diào)用，那么事件對(duì)象必須作為最后一個(gè)參數(shù)顯示傳遞，
并且事件對(duì)象的名稱必須是$event
-->
<button v-on:click='handle2(123, 456, $event)'>點(diǎn)擊2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
事件修飾符
- 在事件處理程序中調(diào)用
event.preventDefault()或event.stopPropagation()是非常常見的需求。 - Vue 不推薦我們操作DOM 為了解決這個(gè)問題，Vue.js 為
v-on提供了事件修飾符 - 修飾符是由點(diǎn)開頭的指令后綴來表示的
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) 即阻止冒泡也阻止默認(rèn)事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
按鍵修飾符
- 在做項(xiàng)目中有時(shí)會(huì)用到鍵盤事件，在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為
v-on在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -當(dāng)點(diǎn)擊enter 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--當(dāng)點(diǎn)擊enter或者space時(shí) 時(shí)調(diào)用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
常用的按鍵修飾符
.enter => enter鍵
.tab => tab鍵
.delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right => 右
<script>
var vm = new Vue({
el:"#app",
methods: {
submit:function(){},
alertMe:function(){},
}
})
</script>
自定義按鍵修飾符別名
- 在Vue中可以通過
config.keyCodes自定義按鍵修飾符別名
<div id="app">
預(yù)先定義了keycode 116（即F5）的別名為f5，因此在文字輸入框中按下F5，會(huì)觸發(fā)prompt方法
<input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
el: '#app',
methods: {
prompt: function() {
alert('我是 F5！');
}
}
});
</script>
v-bind
- v-bind 指令被用來響應(yīng)地更新 HTML 屬性
- v-bind:href 可以縮寫為 :href;
<!-- 綁定一個(gè)屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
綁定對(duì)象
- 我們可以給v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換class。
- 注意：v-bind:class指令可以與普通的class特性共存
1、 v-bind 中支持綁定一個(gè)對(duì)象
如果綁定的是一個(gè)對(duì)象 則 鍵為 對(duì)應(yīng)的類名 值 為對(duì)應(yīng)data中的數(shù)據(jù)
<!--
HTML最終渲染為 <ul class="box textColor textSize"></ul>
注意：
textColor，textSize 對(duì)應(yīng)的渲染到頁面上的CSS類名
isColor，isSize 對(duì)應(yīng)vue data中的數(shù)據(jù) 如果為true 則對(duì)應(yīng)的類名 渲染到頁面上
當(dāng) isColor 和 isSize 變化時(shí)，class列表將相應(yīng)的更新，
例如，將isSize改成false，
class列表將變?yōu)?<ul class="box textColor"></ul>
-->
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
<li>學(xué)習(xí)Vue</li>
<li>學(xué)習(xí)Node</li>
<li>學(xué)習(xí)React</li>
</ul>
<div v-bind:style="{color:activeColor,fontSize:activeSize}">對(duì)象語法</div>
<sript>
var vm= new Vue({
el:'.box',
data:{
isColor:true,
isSize:true，
activeColor:"red",
activeSize:"25px",
}
})
</sript>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
綁定class
2、 v-bind 中支持綁定一個(gè)數(shù)組 數(shù)組中classA和 classB 對(duì)應(yīng)為data中的數(shù)據(jù)
這里的classA 對(duì)用data 中的 classA
這里的classB 對(duì)用data 中的 classB
<ul class="box" :class="[classA, classB]">
<li>學(xué)習(xí)Vue</li>
<li>學(xué)習(xí)Node</li>
<li>學(xué)習(xí)React</li>
</ul>
<script>
var vm= new Vue({
el:'.box',
data:{
classA:‘textColor‘,
classB:‘textSize‘
}
})
</script>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
綁定對(duì)象和綁定數(shù)組 的區(qū)別
- 綁定對(duì)象的時(shí)候 對(duì)象的屬性 即要渲染的類名 對(duì)象的屬性值對(duì)應(yīng)的是 data 中的數(shù)據(jù)
- 綁定數(shù)組的時(shí)候數(shù)組里面存的是data 中的數(shù)據(jù)
綁定style
<div v-bind:style="styleObject">綁定樣式對(duì)象</div>'
<!-- CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號(hào)括起來) -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內(nèi)聯(lián)樣式</div>
<!--組語法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>
<script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px',
background:'red'
}，
activeColor: 'green',
fontSize: "30px"
},
styleObj1: {
color: 'red'
},
styleObj2: {
fontSize: '30px'
}
</script>
分支結(jié)構(gòu)
v-if 使用場(chǎng)景
- 1- 多個(gè)元素 通過條件判斷展示或者隱藏某個(gè)元素?；蛘叨鄠€(gè)元素
- 2- 進(jìn)行兩個(gè)視圖之間的切換
<div id="app">
<!-- 判斷是否加載，如果為真，就加載，否則不加載-->
<span v-if="flag">
如果flag為true則顯示,false不顯示!
</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
----------------------------------------------------------
<div v-if="type === 'A'">
A
</div>
<!-- v-else-if緊跟在v-if或v-else-if之后 表示v-if條件不成立時(shí)執(zhí)行-->
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<!-- v-else緊跟在v-if或v-else-if之后-->
<div v-else>
Not A/B/C
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
v-show 和 v-if的區(qū)別
- v-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏
- v-show只編譯一次，后面其實(shí)就是控制css，而v-if不停的銷毀和創(chuàng)建，故v-show性能更好一點(diǎn)。
- v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素
- v-if切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件
循環(huán)結(jié)構(gòu)
v-for
- 用于循環(huán)的數(shù)組里面的值可以是對(duì)象，也可以是普通元素
<ul id="example-1">
<!-- 循環(huán)結(jié)構(gòu)-遍歷數(shù)組
item 是我們自己定義的一個(gè)名字 代表數(shù)組里面的每一項(xiàng)
items對(duì)應(yīng)的是 data中的數(shù)組-->
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
}
})
</script>
-
不推薦同時(shí)使用
v-if和v-for - 當(dāng)
v-if與v-for一起使用時(shí)，v-for具有比v-if更高的優(yōu)先級(jí)。
<!-- 循環(huán)結(jié)構(gòu)-遍歷對(duì)象
v 代表 對(duì)象的value
k 代表對(duì)象的 鍵
i 代表索引
--->
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
})
</script>
- key 的作用
- key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)
- key的作用主要是為了高效的更新虛擬DOM
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
案例選項(xiàng)卡
1、 HTML 結(jié)構(gòu)
`
<div id="app">
<div class="tab">
<!-- tab欄 -->
<ul>
<li class="active">apple</li>
<li class="">orange</li>
<li class="">lemon</li>
</ul>
<!-- 對(duì)應(yīng)顯示的圖片 -->
<div class="current"><img src="img/apple.png"></div>
<div class=""><img src="img/orange.png"></div>
<div class=""><img src="img/lemon.png"></div>
</div>
</div>
`
2、 提供的數(shù)據(jù)
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
3、 把數(shù)據(jù)渲染到頁面
-
把tab欄 中的數(shù)替換到頁面上
- 把 data 中 title 利用 v-for 循環(huán)渲染到頁面上
- 把 data 中 path利用 v-for 循環(huán)渲染到頁面上
<div id="app"> <div class="tab"> <ul> <!-- 1、綁定key的作用 提高Vue的性能 2、 key 需要是唯一的標(biāo)識(shí) 所以需要使用id， 也可以使用index ， index 也是唯一的 3、 item 是 數(shù)組中對(duì)應(yīng)的每一項(xiàng) 4、 index 是 每一項(xiàng)的 索引 --> <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :key='item.id' v-for='(item, index) in list'> <!-- : 是 v-bind 的簡寫 綁定屬性使用 v-bind --> <img :src="item.path"> </div> </div> </div> <script> new Vue({ // 指定 操作元素 是 id 為app 的 el: '#app', data: { list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script>
4、 給每一個(gè)tab欄添加事件,并讓選中的高亮
-
4.1 、讓默認(rèn)的第一項(xiàng)tab欄高亮
- tab欄高亮 通過添加類名active 來實(shí)現(xiàn) （CSS active 的樣式已經(jīng)提前寫好）
- 在data 中定義一個(gè) 默認(rèn)的 索引 currentIndex 為 0
- 給第一個(gè)li 添加 active 的類名
- 通過動(dòng)態(tài)綁定class 來實(shí)現(xiàn) 第一個(gè)li 的索引為 0 和 currentIndex 的值剛好相等
- currentIndex === index 如果相等 則添加類名 active 否則 添加 空類名
- tab欄高亮 通過添加類名active 來實(shí)現(xiàn) （CSS active 的樣式已經(jīng)提前寫好）
-
4.2 、讓默認(rèn)的第一項(xiàng)tab欄對(duì)應(yīng)的div 顯示
- 實(shí)現(xiàn)思路 和 第一個(gè) tab 實(shí)現(xiàn)思路一樣 只不過 這里控制第一個(gè)div 顯示的類名是 current
<ul> <!-- 動(dòng)態(tài)綁定class 有 active 類名高亮 無 active 不高亮--> <li :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list' >{{item.title}}</li> </ul> <!-- 動(dòng)態(tài)綁定class 有 current 類名顯示 無 current 隱藏--> <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'> <!-- : 是 v-bind 的簡寫 綁定屬性使用 v-bind --> <img :src="item.path"> </div> <script> new Vue({ el: '#app', data: { currentIndex: 0, // 選項(xiàng)卡當(dāng)前的索引 默認(rèn)為 0 list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script> -
4.3 、點(diǎn)擊每一個(gè)tab欄 當(dāng)前的高亮 其他的取消高亮
給每一個(gè)li添加點(diǎn)擊事件
讓當(dāng)前的索引 index 和 當(dāng)前 currentIndex 的 值 進(jìn)項(xiàng)比較
-
如果相等 則當(dāng)前l(fā)i 添加active 類名 當(dāng)前的 li 高亮 當(dāng)前對(duì)應(yīng)索引的 div 添加 current 當(dāng)前div 顯示 其他隱藏
<div id="app"> <div class="tab"> <ul> <!-- 通過v-on 添加點(diǎn)擊事件 需要把當(dāng)前l(fā)i 的索引傳過去 --> <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'> <img :src="item.path"> </div> </div> </div> <script> new Vue({ el: '#app', data: { currentIndex: 0, // 選項(xiàng)卡當(dāng)前的索引 默認(rèn)為 0 list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] }, methods: { change: function(index) { // 通過傳入過來的索引來讓當(dāng)前的 currentIndex 和點(diǎn)擊的index 值 相等 // 從而實(shí)現(xiàn) 控制類名 this.currentIndex = index; } } }) </script>
