一、初始Vue
- 初始Vue
第一步：給Vue準(zhǔn)備一個(gè)容器：
<div id="app">
<h2>{{name}}</h2>
<h2>{{age}}</h2>
</div>
第二步：創(chuàng)建Vue實(shí)例：
// 不允許 vue-devtools 檢查代碼
Vue.config.devtools = false
// vue 在啟動(dòng)時(shí)不顯示生產(chǎn)提示
Vue.config.productionTip = false
// 初始化一個(gè)Vue實(shí)例，在創(chuàng)建Vue實(shí)例時(shí)，需要給Vue傳遞一個(gè)配置選項(xiàng)，該配置選項(xiàng)是一個(gè)對(duì)象
let vm = new Vue({
// el選項(xiàng)，指定當(dāng)前Vue實(shí)例，操作的容器
el:'#app',
// 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)行代理；并將代理過(guò)后的數(shù)據(jù)再添加到Vue實(shí)例身上，方便直接調(diào)用。
data:{
name:'王瑞',
age:20
}
})
- Vue的響應(yīng)式原理
// 代理對(duì)象的基本理解：
/* let data = {
name:'兵哥',
age:18
}
// 因?yàn)閷?duì)象是引用類(lèi)型，在傳遞時(shí)，傳的是地址
let _data = data;
// 操作_data，真正改變的是data，此時(shí)就可以將_data當(dāng)做是data的代理對(duì)象。
_data.name = '王瑞'
_data.age = 30
console.log(data); */
console.log('-------------------------------');
// 如何給對(duì)象添加成員
let obj = {}
// 方式1：對(duì)象名.屬性的方式，給對(duì)象添加成員
obj.name = '吳亦凡'
// 方式2：對(duì)象名['屬性名']的方式，給對(duì)象添加成員
obj['age'] = 30
// 方式3：通過(guò)Object對(duì)象的defineProperty方法，給指定的對(duì)象添加指定的屬性
// 這種方式，給對(duì)象添加成員，盡管繁瑣，但是可以配置更多的功能。
// 默認(rèn)添加的屬性是不允許刪除的，如果要允許刪除，就需要添加configurable配置。
// 默認(rèn)添加的屬性是不允許枚舉的，所謂枚舉指的就是遍歷。
Object.defineProperty(obj,'sex',{
// 屬性值
value:'男',
// 屬性允許被刪除
configurable:true,
// 屬性允許被枚舉
enumerable:true
})
// 遍歷出對(duì)象的所有屬性名稱(chēng)
for(let key in obj){
console.log(key);
}
// delete關(guān)鍵字，用于刪除對(duì)象身上的指定成員
delete obj.name
delete obj.sex
console.log(obj);
console.log('-------------------------------');
// 那么Vue的響應(yīng)式原理，就用到了Object.defineProperty,給代理對(duì)象添加屬性。
// 01.我們先定義一份原始數(shù)據(jù)，也就是被代理對(duì)象。
let data = {
name:'兵哥',
age:18
}
// 02.再定義一個(gè)空的代理對(duì)象
let _data = {}
// 03.使用Object.defineProperty給代理對(duì)象添加屬性
Object.defineProperty(_data,'name',{
// get方法，用于返回屬性的值，當(dāng)使用到_data對(duì)象里面的name屬性獲取值時(shí)，就會(huì)執(zhí)行g(shù)et方法
get(){
return data.name
},
// set方法，用于設(shè)置屬性的值，當(dāng)使用到_data對(duì)象里面的name屬性并給它賦值時(shí)，就會(huì)調(diào)用set方法
set(val){
data.name = val
// 當(dāng)監(jiān)聽(tīng)到數(shù)據(jù)發(fā)生變化時(shí)，重新渲染DOM
readerDOM()
}
})
Object.defineProperty(_data,'age',{
get(){
return data.age
},
set(val){
data.age = val
readerDOM()
}
})
// 渲染DOM更新的方法
function readerDOM(){
document.getElementById("name").innerHTML = data.name
document.getElementById("age").innerHTML = data.age
}
readerDOM()
- Vue的常用指令
<div id="app">
<h2>{{name}}</h2>
<input type="text" v-bind:value="name" v-on:input="setName">
<h2>{{address}}</h2>
<input type="text" :value="address" @input="address=$event.target.value">
<h2>{{hobby}}</h2> <input type="text" v-model="hobby">
</div>
// 實(shí)例化一個(gè)Vue對(duì)象
let vm = new Vue({
el:'#app',
// data選項(xiàng)，可以是一個(gè)對(duì)象，也可以是一個(gè)方法，由方法返回一對(duì)象。
data() {
return {
name:'兵哥',
address:'南京',
hobby:'敲代碼'
}
},
// methods選項(xiàng)，里面定義的是Vue管理的方法
methods: {
// 該方法更新name屬性值
// 注意：在調(diào)用方式時(shí)，如果沒(méi)有傳遞參數(shù)，那么事件方法會(huì)默認(rèn)傳一個(gè)事件對(duì)象參數(shù)。
setName(e){
this.name = e.target.value
},
},
}) - 條件渲染和列表渲染
<div id="app">
<button v-on:click="isShow=!isShow">顯示/隱藏</button>
<div class="box" v-if="isShow">
v-if
</div>
<div class="box" v-show="isShow">v-show</div>
<h2 v-if="score>=90">優(yōu)秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=70">中等</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>差</h2>
<ul>
<li v-for="(item,index) in goodses" v-bind:key="index">
{{item.id}}---{{item.name}}---{{item.price}}
<button v-on:click="delGoods(index)">刪除</button>
</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
// 該屬性，用于表示是否顯示
isShow:true,
// 定義一個(gè)成績(jī)
score:88,
// 定義一個(gè)數(shù)組
goodses:[
{
id:1001,
name:'樂(lè)事薯片',
price:'8元'
},
{
id:1002,
name:'百事可樂(lè)',
price:'3元'
},
{
id:1003,
name:'元祖月餅',
price:'10元'
},
{
id:1004,
name:'德芙巧克力',
price:'29元'
}
]
},
methods: {
// 刪除商品的方法，將商品的下標(biāo)通過(guò)方法傳進(jìn)來(lái)
delGoods(index){
if(confirm('是否確定刪除')){
// 再根據(jù)數(shù)組的下標(biāo)刪除對(duì)應(yīng)的數(shù)據(jù)
this.goodses.splice(index,1)
}
}
},
})
二、生命周期 - 小練習(xí)
<div id="app">
<button @click="showEdit=true">添加學(xué)生</button>
<table>
<thead>
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in students" :key="index">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button @click="getOne(index)">修改</button>
<button @click="del(index)">刪除</button>
</td>
</tr>
</tbody>
</table>
<div class="edit" v-show="showEdit">
<div class="close" @click="close">X</div>
<div class="item">
<label>學(xué)號(hào)：</label>
<input type="text" v-model="no">
</div>
<div class="item">
<label>姓名：</label>
<input type="text" v-model="name">
</div>
<div class="item">
<label>年齡：</label>
<input type="text" v-model="age">
</div>
<div class="item">
<label>性別：</label>
<input type="text" v-model="sex">
</div>
<div class="item">
<button @click="add" v-if="updateIndex===-1">添加</button>
<button @click="update" v-else>修改</button>
<button @click="clear">取消</button>
</div>
</div>
</div>
new Vue({
// 指定該Vue實(shí)例工作的容器
el:'#app',
// 定義當(dāng)前Vue實(shí)例管理的數(shù)據(jù)
data:{
// 定義一個(gè)學(xué)生數(shù)組
students:[
{
no:'1001',
name:'張三',
age:20,
sex:'男'
},
{
no:'1002',
name:'李四',
age:22,
sex:'女'
},
{
no:'1003',
name:'王五',
age:24,
sex:'男'
},
{
no:'1004',
name:'趙六',
age:18,
sex:'女'
}
],
// 是否顯示編輯窗口
showEdit:false,
// 定義一個(gè)學(xué)生對(duì)象的四個(gè)屬性
no:'',
name:'',
age:'',
sex:'',
// 定義一個(gè)下標(biāo)，用于表示修改的學(xué)生在數(shù)組中的位置
updateIndex:-1
},
// 定義當(dāng)前Vue實(shí)例管理的方法
methods: {
// 添加方法
add(){
// 創(chuàng)建一個(gè)學(xué)生對(duì)象
let stu = {
no:this.no,
name:this.name,
age:this.age,
sex:this.sex
}
// 將學(xué)生對(duì)象添加到學(xué)生數(shù)組中
this.students.push(stu)
// 調(diào)用清空數(shù)據(jù)的方法
this.clear()
},
// 清空表單數(shù)據(jù)的方法
clear(){
this.no = ''
this.name = ''
this.age = ''
this.sex = ''
},
// 關(guān)閉編輯窗口的方法
close(){
// 隱藏編輯窗口
this.showEdit = false
// 編輯窗口關(guān)閉時(shí)，重新將修改索引改成-1
this.updateIndex = -1
// 清空表單數(shù)據(jù)
this.clear()
},
// 刪除方法
del(index){
if(confirm('確定刪除嗎？')){
this.students.splice(index,1)
}
},
// 根據(jù)下標(biāo)從數(shù)組中獲取對(duì)應(yīng)的學(xué)生信息
getOne(index){
// 獲取學(xué)生對(duì)象在數(shù)組中對(duì)應(yīng)的下標(biāo)
this.updateIndex = index
// 顯示編輯窗口
this.showEdit = true
// 獲取學(xué)生
let stu = this.students[index]
// 在編輯窗口中顯示該學(xué)生信息
this.no = stu.no
this.name = stu.name
this.age = stu.age
this.sex = stu.sex
},
// 修改方法
update(){
// 修改數(shù)組中，指定位置學(xué)生的信息
let stu = this.students[this.updateIndex]
stu.no = this.no
stu.name = this.name
stu.age = this.age
stu.sex = this.sex
}
},
}) - Vue的生命周期
<div id="app">
<button @click="name+='*';age+=1">修改數(shù)據(jù)</button>
<button @click="over">銷(xiāo)毀Vue實(shí)例</button>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
</div>
let vm = new Vue({
// el選項(xiàng)可以通過(guò)destroy()方法，用于銷(xiāo)毀當(dāng)前Vue實(shí)例
// 注意：銷(xiāo)毀當(dāng)前Vue實(shí)例，不是刪除這個(gè)對(duì)象，而且這個(gè)對(duì)象再也不具備響應(yīng)式頁(yè)面的能力了。
this.el返回Vue實(shí)例使用的根 DOM 元素
console.log(this.el);
console.log('mounted');
},
// 數(shù)據(jù)更新之前
beforeUpdate() {
// 在這個(gè)階段，數(shù)據(jù)已經(jīng)發(fā)生了變化，但是頁(yè)面還沒(méi)有重新渲染
console.log('beforeUpdate',this.name,this.age);
},
// 數(shù)據(jù)更新完成
updated() {
// 在這個(gè)階段，頁(yè)面會(huì)重新渲染
console.log('updated',this.name,this.age);
},
// 銷(xiāo)毀之前
beforeDestroy() {
// 我們通常會(huì)在這個(gè)生命周期函數(shù)中做一些收尾的工作
// 比如：停掉開(kāi)啟的定時(shí)器，初始化一些數(shù)據(jù)等等。
console.log('beforeDestroy');
},
// 銷(xiāo)毀完成
destroyed() {
console.log('destroyed');
console.log(this);
},
})
setTimeout(() => {
// 通過(guò)mount('#app')
}, 1000);
- 輪播圖
<div id="app">
<img :src="imgs[index]">
<ul>
<li v-for="(item,i) in imgs" :class="i===index?'active':''"></li>
</ul>
</div>
new Vue({
el:'#app',
data:{
// 定義輪播圖圖片數(shù)組
imgs:["http://p1.music.126.net/lrd-pX9Azcv2mP8-YnQ3JA==/109951166362109457.jpg?imageView&quality=89",
"http://p1.music.126.net/RXFG298sUeqJlpIGoZvB0Q==/109951166362198241.jpg?imageView&quality=89",
"http://p1.music.126.net/GHcB-WR3T3UhEO5msHXOXg==/109951166362228128.jpg?imageView&quality=89",
"http://p1.music.126.net/Wd08w_8bojR4DWyK7EEkeQ==/109951166362223634.jpg?imageView&quality=89",
"http://p1.music.126.net/y3OQm6kP7nPqRcCBkPRSdQ==/109951166362444141.jpg?imageView&quality=89"],
// 定義索引
index:0,
// 定義一個(gè)定時(shí)器變量
timer:null
},
methods: {
// 銷(xiāo)毀Vue實(shí)例的方法
destroy(){
// 當(dāng)前Vue實(shí)例一旦銷(xiāo)毀，就不再具體響應(yīng)頁(yè)面的能力了
this.$destroy()
}
},
// 在這個(gè)階段，頁(yè)面已經(jīng)好了
mounted() {
// 開(kāi)啟一個(gè)定時(shí)器
this.timer = setInterval(() => {
if(++this.index>=this.imgs.length) this.index = 0
}, 3000);
},
// 在這個(gè)階段，Vue的實(shí)例即將銷(xiāo)毀
beforeDestroy() {
// 清除定時(shí)器
clearInterval(this.timer)
},
