開始使用Vue
步驟：
1.導(dǎo)入Vue的包
2.創(chuàng)建一個(gè)Vue的實(shí)例矩欠。當(dāng)我們導(dǎo)入包之后钮热，在瀏覽器的內(nèi)存中髓棋，就多了一個(gè)Vue構(gòu)造函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script> //導(dǎo)包
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div>//將來(lái) new 的 Vue實(shí)例喧锦，會(huì)控制這個(gè)元素中的所有內(nèi)容
<script>
var vm = new Vue({
el: "#app",//el:表示當(dāng)我們new的這個(gè)Vue實(shí)例昨忆，要控制頁(yè)面的哪一個(gè)區(qū)域
data: {
msg: '歡迎學(xué)習(xí)Vue'
}//data 屬性中丁频，存放的是 el 中要用到的數(shù)據(jù)
})//創(chuàng)建實(shí)例
</script>
</body>
</html>
通過(guò) Vue 提供的指令，很方便的就能把數(shù)據(jù)渲染到頁(yè)面上邑贴，程序員不再手動(dòng)操作DOM元素了
v-cloak的學(xué)習(xí)
功能：使用 v-cloak 能夠解決插值表達(dá)式閃爍的問(wèn)題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-cloak>+++{{ msg }}+++</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-cloak的使用'
}
})
</script>
</body>
</html>
v-text & v-html 學(xué)習(xí)
v-text 和 插值表達(dá)式的區(qū)別：
- v-text 默認(rèn)沒(méi)有閃爍的問(wèn)題
- v-text 會(huì)覆蓋元素中原本的內(nèi)容席里，但是插值表達(dá)式只會(huì)替換自己的這個(gè)占位符，不會(huì)把整個(gè)元素內(nèi)容清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-text="msg">我是一個(gè)p元素</p> //會(huì)覆蓋p元素原本的內(nèi)容
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-text的使用'
}
})
</script>
</body>
</html>
v-text & v-html 的區(qū)別：
- v-text 和 v-html 都會(huì)覆蓋掉元素內(nèi)已有的內(nèi)容
- v-text 不能識(shí)別標(biāo)簽
- v-html可以識(shí)別標(biāo)簽元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-text="msg2">我是一個(gè)p元素</p>
<!--v-text的結(jié)果：<h4>我是一個(gè)H4標(biāo)簽</h4>-->
<p v-html="msg2">我是一個(gè)p元素</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg2: '<h4>我是一個(gè)H4標(biāo)簽</h4>'
}
})
</script>
</body>
</html>
v-bind & v-on 的學(xué)習(xí)
v-bind 是Vue中拢驾，提供的用于綁定屬性的指令
v-bind 可以縮寫為:要綁定的屬性
v-bind 中奖磁，可以寫合法的JS表達(dá)式
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="click" :title="mytitle + '123'" @mouseover = 'show'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mytitle: '轉(zhuǎn)到百度網(wǎng)'
},
methods: {
show: function(){
alert("事件綁定的使用")
}//這個(gè) methods 屬性中定義了當(dāng)前Vue實(shí)例中所有可用的方法
}
})
</script>
</body>
</html>
v-on 是Vue中，提供的用于事件綁定的指令
v-on 可以縮寫為:要綁定的方法
案例：跑馬燈效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="運(yùn)行" @click='start'>
<input type="button" value="結(jié)束" @click='stop'>
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '猥瑣發(fā)育繁疤，別浪~ ~穩(wěn)住咖为，我們能贏ｏ跽！',
intervalId: null
},
methods: {
start() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1);
var end = this.msg.substring(1);
this.msg = end + start
}, 400)
},
stop() {
clearInterval(this.intervalId);
this.intervalId = null
}
}
})
</script>
</body>
</html>
注意：
- vm實(shí)例中（ var vm = new Vue）躁染，如果想要獲取 data 上的數(shù)據(jù)鸣哀，或者 想要調(diào)用 methods 中的方法， 必須通過(guò)
this.數(shù)據(jù)屬性名或this.方法名來(lái)訪問(wèn)褐啡，這里的this 就表示我們 new 出來(lái)的 VM 實(shí)例對(duì)象 - VM實(shí)例诺舔，會(huì)監(jiān)聽自己身上data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生改變备畦，就會(huì)自動(dòng)把最新的數(shù)據(jù)低飒，從 data 上同步到頁(yè)面中去
事件修飾符
- .stop
- 阻止冒泡
- .prevent
- 阻止默認(rèn)行為
- .capture
- 實(shí)現(xiàn)捕獲觸發(fā)事件機(jī)制
- .self
- 實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素，才會(huì)觸發(fā)事件處理函數(shù)
- 只會(huì)阻止自己身上冒泡行為的觸發(fā)懂盐，并不會(huì)真正阻止冒泡行為
- .once 實(shí)現(xiàn)只觸發(fā)一次事件處理函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<style>
.inner {
height: 50px;
background-color: darkblue;
}
.outer {
padding: 40px;
background-color: red;
}
</style>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<!--.stop 阻止冒泡-->
<!--<div class="inner" id="app" @click='div1Handler'>-->
<!--<input type="button" value="click" @click.stop='btnHandler'>-->
<!--</div>-->
<!--.prevent 阻止默認(rèn)行為-->
<!--<div id="app">-->
<!--<a @click.prevent="linkClick">有問(wèn)題褥赊，問(wèn)百度</a>-->
<!--</div>-->
<!--.capture 實(shí)現(xiàn)捕獲觸發(fā)事件機(jī)制-->
<!--<div class="inner" id="app" @click.capture='div1Handler'>-->
<!--<input type="button" value="click" @click='btnHandler'>-->
<!--</div>-->
<!--self 只有點(diǎn)擊當(dāng)前元素才會(huì)觸發(fā)事件處理函數(shù)-->
<!--<div id="app" class="outer" @click="div2Handler">-->
<!--<div class="inner" @click.self='div1Handler'>-->
<!--<input type="button" value="click" @click='btnHandler'>-->
<!--</div>-->
<!--</div>-->
<!--once 只觸發(fā)一次事件處理函數(shù)-->
<!--<div id="app">-->
<!--<a @click.prevent.once="linkClick">有問(wèn)題，問(wèn)百度</a>-->
<!--</div>-->
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('這是觸發(fā)了inner div 的點(diǎn)擊事件')
},
btnHandler() {
console.log('這是觸發(fā)了btn按鈕的點(diǎn)擊事件')
},
linkClick() {
console.log('這是觸發(fā)了連接的點(diǎn)擊事件')
},
div2Handler(){
console.log('這是觸發(fā)了outer div 的點(diǎn)擊事件')
}
}
})
</script>
</body>
</html>
v-model 的學(xué)習(xí)
v-bind 只能實(shí)現(xiàn)數(shù)據(jù)的單向綁定莉恼，無(wú)法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
使用 v-model 指令拌喉，可以實(shí)現(xiàn)表單元素和Model 中數(shù)據(jù)的雙向數(shù)據(jù)綁定
注意：v-model 只能用在表單元素中（input(radio,text,address,url...),select,textarea,checkbox....）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" style='width: 100%' v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-model 能夠?qū)崿F(xiàn)數(shù)據(jù)的雙向綁定'
}
})
</script>
</body>
</html>
案例：簡(jiǎn)易計(jì)算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="clac">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
clac(){
switch (this.opt) {
case '+' :
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case '-' :
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case '*' :
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case '/' :
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
}
}
})
</script>
</body>
</html>
vue中樣式操作——class
- 直接傳遞一個(gè)數(shù)組，這里的 class 需要使用 v-bind 做數(shù)據(jù)綁定
- 在數(shù)組中使用三元表達(dá)式
- 在數(shù)組中使用對(duì)象來(lái)代替三元表達(dá)式俐银，提高代碼的可讀性
- 在為class 使用 v-bind 綁定對(duì)象的時(shí)候尿背，對(duì)象的屬性使類名，對(duì)象的屬性可帶引號(hào)捶惜，也可不帶引號(hào)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--原始操作方式：-->
<!--<h1 class="red thin">這是一個(gè)h1大標(biāo)題</h1>-->
<!--第一種方式：直接傳遞一個(gè)數(shù)組-->
<!--<h1 :class="['thin','italic']">這是一個(gè)h1大標(biāo)題</h1>-->
<!--第二種方式：在數(shù)組中使用三元表達(dá)式-->
<!--<h1 :class="['thin','italic',flag?'red':'']">這是一個(gè)h1大標(biāo)題</h1>-->
<!--第三種方式：在數(shù)組中使用 對(duì)象來(lái)代替三元表達(dá)式栅组，提高代碼的可讀性-->
<!--<h1 :class="['thin','italic',{'red':flag}]">這是一個(gè)h1大標(biāo)題</h1>-->
<!--第四種方式：為 class 使用 v-bind 綁定對(duì)象-->
<h1 :class="classObj">這是一個(gè)h1大標(biāo)題</h1>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: {'red': true, 'thin': false, 'italic': true, 'active': true}
}
})
</script>
</body>
</html>
vue中樣式操作——style
注意：使用 v-bind 綁定對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h1 :style="[styleObj1,styleObj2]">我是H1大標(biāo)題</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj1: {'color': 'red', 'font-weight': 200},
styleObj2: {'font-style': 'italic'}
}
})
</script>
</body>
</html>
v-for循環(huán)
-
普通數(shù)組
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(item,i) in list"> 索引值：{{ i }}-----每一項(xiàng)：{{ item }} </p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6] } }) </script> </html>
-
對(duì)象數(shù)組
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(user,i) in list"> ID:{{ user.id }} ---- 名字：{{ user.name }} ---- 索引：{{ i }} </p> </div> <script> var vm = new Vue({ el: '#app', data: { list: [ {id: 1, name: '張三'}, {id: 2, name: '李四'}, {id: 3, name: '王麻子'}, {id: 4, name: '三楞子'}, {id: 5, name: '四傻子'}, ] } }) </script> </body> </html> -
對(duì)象
- 注意：在遍歷對(duì)象身上的鍵值對(duì)的時(shí)候均澳， 除了 有 val key ,在第三個(gè)位置還有 一個(gè) 索引
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(val,key,i) in user"> 鍵是：{{ key }} --- 值是：{{ val }} --- 索引：{{ i }} </p> </div> <script> var vm = new Vue({ el: '#app', data: { user: { id: 1, name: '托尼·屎大顆', gender: 'male' } } }) </script> </body> </html>
-
迭代數(shù)字
- 注意：如果使用 v-for 迭代數(shù)字的話同廉，前面的 count 值從 1 開始
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="count in 10"> 這是第{{ count }}次循環(huán) </p> </div> <script> var vm = new Vue({ el: '#app', data: {}, }) </script> </body> </html>
v-if & v-show 的使用
共同點(diǎn)：都可以動(dòng)態(tài)控制dom元素顯示/隱藏
兩者的區(qū)別：
- v-if
- 顯示/隱藏是將dom元素整個(gè)添加或刪除
- 有較高的切換性能消耗
- 如果元素可能永遠(yuǎn)不會(huì)被顯示出來(lái)羡洛，推薦使用v-if
- v-show
- 隱藏則是為該元素添加display:none dom元素還存在
- 有價(jià)高的初始渲染消耗
- 如果元素涉及到頻繁的切換，推薦使用v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">這是用v-if控制的元素</h3>
<h3 v-show="flag">這是用v-show控制的元素</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>
</html>
