Vue.js：
漸進(jìn)式JavaScript框架官方文檔點(diǎn)我直達(dá)
漸進(jìn)式JavaScript框架
一而线、Vue它是什么
是一套用于構(gòu)建用戶界面的漸進(jìn)式框架岂膳，在使用Vue的時(shí)候，可以只使用Vue里面的一部分去配合其他前端框架一起開發(fā)，也可以整個(gè)項(xiàng)目從頭到尾规哲，從搭建項(xiàng)目，路由系統(tǒng)腥放，全局的狀態(tài)管理等全部使用Vue种柑，非常靈活。
二、走進(jìn)Vue.js
1.安裝Vue.js
學(xué)習(xí)/安裝/下載到本地
以開發(fā)版本來學(xué)習(xí)损趋，下載到本地，首先引入Vue.js文件桐玻。
<!-- 引入Vue.js文件 -->
<!-- 開發(fā)版本 -->
<script src="../js/vue.js"></script>
<!-- 生產(chǎn)版本（打包上線時(shí)使用） -->
<!-- <script src="../js/vue.min.js"></script> -->
2.準(zhǔn)備一個(gè)容器
<!-- 第一步：準(zhǔn)備一個(gè)容器 -->
<div id="app">
<h2>姓名:{{name}}</h2>
<h2>年齡:{{age}}</h2>
</div>
3.創(chuàng)建一個(gè)Vue對(duì)象
<script>
<script src="./js/vue.js"></script>
// 第二步偏竟，創(chuàng)建一個(gè)Vue對(duì)象
let mx = new Vue({
//指定當(dāng)前Vue對(duì)象操作的DOM容器
el:'#app',
//定義當(dāng)前Vue對(duì)象管理的數(shù)據(jù)
data:{
name:'萌新',
age:'10'
},
//定義當(dāng)前Vue對(duì)象管理的方法
methods:{
//修改姓名的方法
updateName(){
this.name='一只萌新'
},
//修改年齡的方法
updateAge(){
this.age='100'
}
}
})
4.簡(jiǎn)單修改數(shù)據(jù)后渲染至頁(yè)面例子
效果1
效果2
5.注意：初次使用vue，控制臺(tái)會(huì)有兩條提示。
如果想去掉這兩條信息，可以選擇安裝vue-devtools，引入生產(chǎn)版本的vue.js。
當(dāng)然也可以使用以下代碼消除：
// 不允許 vue-devtools 檢查代碼
Vue.config.devtools = false
// vue 在啟動(dòng)時(shí)不顯示生產(chǎn)提示
Vue.config.productionTip = false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 第一步：準(zhǔn)備一個(gè)容器 -->
<div id="app">
<h2>姓名:{{name}}</h2>
<h2>年齡:{{age}}</h2>
<!-- v-on:指令用戶綁定事件 -->
<button v-on:click='updateName'>修改姓名</button>
<button v-on:click='updateAge'>修改年齡</button>
</div>
<!-- 引入Vue.js文件 -->
<script src="./js/vue.js"></script>
<script>
// 不允許 vue-devtools 檢查代碼
Vue.config.devtools = false
// vue 在啟動(dòng)時(shí)不顯示生產(chǎn)提示
Vue.config.productionTip = false
// 第二步灾而，創(chuàng)建一個(gè)Vue對(duì)象
let mx = new Vue({
//指定當(dāng)前Vue對(duì)象操作的DOM容器
el: '#app',
//定義當(dāng)前Vue對(duì)象管理的數(shù)據(jù)
data: {
name: '萌新',
age: '10'
// data選項(xiàng)昼激，用于存儲(chǔ)當(dāng)前Vue實(shí)例管理的數(shù)據(jù)
// data選項(xiàng)里面管理的數(shù)據(jù)，會(huì)被添加到Vue實(shí)例身上凡傅，這里就是vm身上槽华。
// data選項(xiàng)里面管理的數(shù)據(jù)，其實(shí)會(huì)被Vue實(shí)例身上的_data進(jìn)行代理偏螺；并將代理過后的數(shù)據(jù)再添加到Vue實(shí)例身上夺巩，方便直接調(diào)用美澳。
},
//定義當(dāng)前Vue對(duì)象管理的方法
methods: {
//修改姓名的方法
updateName() {
this.name = '一只萌新'
},
//修改年齡的方法
updateAge() {
this.age = '100'
}
}
})
</script>
</body>
</html>
三、Vue的響應(yīng)式原理
1.理解代理對(duì)象
// 定義源對(duì)象obj1
let obj1 = {
name:'張三',
age:20
}
//定義代理對(duì)象obj2读串，代理源對(duì)象obj1
let obj2 = obj1
console.log('obj2:',obj2);
// 代理對(duì)象修改了源對(duì)象的數(shù)據(jù)
obj2.name = '李四'
obj2.age = 30
console.log(obj1); // {name: "李四", age: 30}
2.Vue的data和_data
// 定義源對(duì)象
let myData = {
name: '張三',
age: 20
}
let mx = new Vue({
// 將源對(duì)象傳遞給Vue的data，背后做了兩件事
// ① 設(shè)置Vue實(shí)例的_data屬性挟阻，作為當(dāng)前源對(duì)象的代理對(duì)象。（響應(yīng)式的核心）
// ② 將_data里面代理的所有數(shù)據(jù)，再添加到當(dāng)前Vue實(shí)例身上，也就是vm身上赌蔑。（方便直接調(diào)用數(shù)據(jù)）
})
// 通過改變vue實(shí)例的屬性可以改變?cè)磳?duì)象的屬性值
mx.name = '王五'
mx.age = 40
console.log(myData); // {name: "王五", age: 40}
3.給對(duì)象添加屬性的多種方式
-第一種方式：使用點(diǎn) .
-第二種方式：使用中括號(hào) [ ]
-第三種方式：使用Object.defineProperty方法
// 方式一
let obj3 = {}
obj3.name = '張三'
// 方式二
obj3['age'] = 20
//方式三
// 這種方式，給對(duì)象添加成員，盡管繁瑣，但是可以配置更多的功能挨决。
// 默認(rèn)添加的屬性是不允許刪除的盖高，如果要允許刪除捏悬，就需要添加configurable配置刀疙。
// 默認(rèn)添加的屬性是不允許枚舉的，所謂枚舉指的就是遍歷。
Object.defineProperty(obj3,'sex',{
// 屬性值
value:'男',
// 允許被枚舉（默認(rèn)不允許）
enumerable:true,
// 允許被刪除（默認(rèn)不允許）
configurable:true
})
// 枚舉出對(duì)象的所有屬性（其實(shí)就遍歷出對(duì)象的所有屬性名）
// 如果sex屬性沒有設(shè)置允許被枚舉删性，就不能被枚舉
for(let key in obj3){
console.log(key);
}
// 通過delete關(guān)鍵它掂，可以刪除對(duì)象身上的指定屬性
delete obj3.name
delete obj3.sex // 如果sex屬性沒有設(shè)置允許被刪除用押，就不能被刪除
四桩引、Vue的常用指令
1.v-bind:用于綁定屬性厘灼，通過v-bind:綁定過的屬性，可以在屬性值里面寫表達(dá)式。v-bind:可以用 : 簡(jiǎn)寫退腥。
<body>
<div id="app">
<span>Name:</span>
<!-- v-bind:用于綁定屬性嗅蔬，通過v-bind:綁定過的屬性猬腰，可以在屬性值里面寫表達(dá)式 -->
<!-- <input type="text" v-bind:value='name'> -->
<!-- <input type="text" :value='1+1'> -->
<!-- v-bind:可以用:簡(jiǎn)寫 -->
<input type="text" :value='name'>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'萌新',
age:20
}
})
</script>
2.v-on:用于綁定事件兰英，通過v-on:綁定過的事件楞捂，可以指定Vue實(shí)例定義的方法繁堡。v-on:可以用 @ 簡(jiǎn)寫玖翅。
<body>
<div id="app">
<div>
<span>Name:</span>
<!-- v-bind:用于綁定屬性，通過v-bind:綁定過的屬性相满，可以在屬性值里面寫表達(dá)式 -->
<!-- <input type="text" :value='1+1'> -->
<!-- v-bind:可以用:簡(jiǎn)寫 -->
<!-- <input type="text" :value='name'> {{name}} -->
<input type="text" v-bind:value='name' v-on:input='updateName'> {{name}}
<!-- v-on:用于綁定事件，通過v-on:綁定過的事件桦卒，可以指定Vue實(shí)例定義的方法立美。v-on:可以用 @ 簡(jiǎn)寫。 -->
</div>
<div>
<span>Age:</span>
<!-- V-on:可以用@簡(jiǎn)寫 -->
<input type="text" :value='age' @input='updateAge'>{{age}}
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
name:'萌新',
age:20
},
methods: {
updateName(e){
//獲取文本框里面的內(nèi)容方灾，更新name數(shù)據(jù)
this.name= e.target.value
},
updateAge(e){
//獲取文本框里面的內(nèi)容建蹄，更新age數(shù)據(jù)
this.age= e.target.value
}
},
})
</script>
3.v-model指令可以實(shí)現(xiàn)對(duì)數(shù)據(jù)的雙向綁定。所謂雙向綁定指的是：數(shù)據(jù)發(fā)生變化重新渲染頁(yè)面裕偿，頁(yè)面數(shù)據(jù)發(fā)生變化更新回?cái)?shù)據(jù)洞慎。v-model指令是 v-bind:value 和 v-on:input 的簡(jiǎn)寫。ps:實(shí)現(xiàn)數(shù)據(jù)改變時(shí)嘿棘，文本框的值會(huì)隨之改變劲腿；輸入框文本改變時(shí)，數(shù)據(jù)也會(huì)隨之會(huì)被更改鸟妙。
<body>
<div id="app">
<div>
<span>Name:</span>
<!-- v-bind:用于綁定屬性焦人，通過v-bind:綁定過的屬性挥吵，可以在屬性值里面寫表達(dá)式 -->
<!-- <input type="text" :value='1+1'> -->
<!-- v-bind:可以用:簡(jiǎn)寫 -->
<!-- <input type="text" :value='name'> {{name}} -->
<input type="text" v-bind:value='name' v-on:input='updateName'> {{name}}
<!-- v-on:用于綁定事件，通過v-on:綁定過的事件垃瞧，可以指定Vue實(shí)例定義的方法蔫劣。v-on:可以用 @ 簡(jiǎn)寫坪郭。 -->
</div>
<div>
<span>Age:</span>
<!-- V-on:可以用@簡(jiǎn)寫 -->
<input type="text" :value='age' @input='updateAge'>{{age}}
</div>
<div>
<span>job</span>
<!-- <input type="text" v-model:input='job'>{{job}} -->
<input type="text" v-model='job'>{{job}}
<!-- v-model指令可以實(shí)現(xiàn)對(duì)數(shù)據(jù)的雙向綁定个从。
所謂雙向綁定指的是：數(shù)據(jù)發(fā)生變化重新渲染頁(yè)面，頁(yè)面數(shù)據(jù)發(fā)生變化更新回?cái)?shù)據(jù)歪沃。
v-model指令是 v-bind:value 和 v-on:input 的簡(jiǎn)寫嗦锐。 -->
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
name:'萌新',
age:20,
job:'程序員'
},
methods: {
updateName(e){
//獲取文本框里面的內(nèi)容，更新name數(shù)據(jù)
this.name= e.target.value
},
updateAge(e){
//獲取文本框里面的內(nèi)容沪曙，更新age數(shù)據(jù)
this.age= e.target.value
}
},
})
</script>
4.如果事件方法的代碼不是很多奕污，可以寫在行內(nèi)。注意：這里不能寫this液走，$event是事件對(duì)象
<div>
<span>年齡：</span>
<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
五碳默、條件渲染
1.條件渲染第一種方式：v-if
判斷大于或等于90渲染優(yōu)秀的思路
<div id="app">
<h2 v-if='fen>=90'>優(yōu)秀</h2>
<h2 v-else-if='fen>=80'>中等</h2>
<h2 v-else-if='fen>=70'>良好</h2>
<h2 v-else-if='fen>=60'>及格</h2>
<h2 v-else>差</h2>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
fen: 90
}
})
</script>
2.條件渲染第二種方式：v-show
顯示/隱藏圖片的思路
<!-- 條件判斷大于或等于90渲染優(yōu)秀的思路 -->
<div id="app">
<button @click="isShow=!isShow">顯示/隱藏</button>
<!-- 每次要根據(jù)isShow的值，確定是否渲染頁(yè)面 -->
<div v-if='isShow'>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640268350&t=00e3d08c1d1417c8e57ddf2d56249018" alt="">
</div>
<!-- 模板已經(jīng)渲染成功缘眶，通過樣式控制顯示隱藏 -->
<div v-show='isShow'>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640268350&t=00e3d08c1d1417c8e57ddf2d56249018" alt="">
</div>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
fen: 60,
isShow:true
}
})
</script>
3.那么v-if和v-show嘱根，在場(chǎng)景里如何選擇去使用
(1) 如果頁(yè)面需要反復(fù)切換顯示和隱藏，推薦用v-show巷懈。
(2) 如果頁(yè)面中有很多模塊需要隱藏该抒，用戶可能只對(duì)其中的某個(gè)模塊感興趣，推薦用v-if顶燕。所有的模塊首屏加載時(shí)凑保，全部都不渲染，當(dāng)用戶選擇指定的模塊后涌攻，再渲染指定的模塊欧引。
六、列表渲染
1.v-for指令：用于列表渲染恳谎。
2.列表渲染時(shí)芝此，通常都要綁定key，key的作用是提高渲染性能惠爽。
3.注意：key必須是唯一癌蓖，暫時(shí)可以將列表的索引作為key值去使用。
<body>
<div id="app">
<ul>
<!-- 值命名item index為索引 -->
<li v-for='(item,index) in foods' :key="index">{{item.id}}.{{item.name}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
// fen: 60,
// isShow:false,
foods:[
{
id:1,
name:'薯片',
price:7.9
},
{
id:2,
name:'辣條',
price:1.9
},
{
id:3,
name:'餅干',
price:5.5
},
{
id:4,
name:'可樂',
price:3.9
}
]
}
})
</script>
</body>
再來個(gè)小練習(xí)：輪播圖婚肆，over租副，期待下次更新
<div id="app">
<img :src="imgs[showActive]" >
</div>
<script>
new Vue({
el:'#app',
data:{
//顯示的下標(biāo)
showActive:0,
//圖片數(shù)組
imgs:["http://p1.music.126.net/7zAkp74zoKd0LuEuEP6dOg==/109951166645160829.jpg?imageView&quality=89",
"http://p1.music.126.net/pkXsmqmFQOehNkJYmehkng==/109951166646695577.jpg?imageView&quality=89",
"http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644891380.jpg?imageView&quality=89",
"http://p1.music.126.net/JMYet32O1mi6-YZ1GGSYcQ==/109951166646419732.jpg?imageView&quality=89",
"http://p1.music.126.net/WCX5Cq1z17Du2z0QBEcEaA==/109951166645933077.jpg?imageView&quality=89"]
},
// 生命周期函數(shù)（表示頁(yè)面掛載完成）
mounted() {
setInterval(() => {
this.showActive++
//如果下標(biāo)越界，重新從0開始
if(this.showActive>=5) this.showActive = 0
}, 3000);
},
})
</script>
