前言
記錄平時(shí)學(xué)到的知識(shí)，標(biāo)題寫的大氣一點(diǎn)，也算是給自己一點(diǎn)鼓勵(lì)，希望在技術(shù)這條路可以遠(yuǎn)走越遠(yuǎn)，路越走越寬~
PS：如果對(duì)你有一點(diǎn)幫助，請(qǐng)順手給個(gè)小星星哦，鼓勵(lì)我繼續(xù)寫下去~
引入的文件文件說明
vue.js——開發(fā)版本：包含完整的警告和調(diào)試模式
vue.min.js——生產(chǎn)版本：刪除了警告，進(jìn)行了壓縮
1、內(nèi)部指令
指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況)。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。
1.1 v-if & v-show
v-if
v-if:是vue的一個(gè)內(nèi)部指令，必須將它添加到一個(gè)元素上。v-if根據(jù)條件判斷是否加載對(duì)應(yīng)元素的DOM。
v-else 指令來表示 v-if 的“else 塊”。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。
v-else-if，顧名思義，充當(dāng)v-if的“else-if塊”，可以連續(xù)使用。類似于v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-if & v-else & v-show</h1>
<hr>
<div id="app">
<div v-if="isLogin == 'A'">v-if</div>
<div v-else-if="isLogin == 'B'">v-else-if</div>
<div v-else>v-else</div>
<div v-show="isLogin">v-show</div>
<hr>
<template v-if="isLogin == 'B'">v-if支持template元素</template>
<template v-show="isLogin == 'B'">v-show不支持template元素</template>>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isLogin: 'A'
},
components: {
"test-child": {
template:"<h1>我是template</h1>"
}
}
})
</script>
</body>
</html>
v-show
- v-show：是另一個(gè)用于根據(jù)條件展示元素的指令。
不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡(jiǎn)單地切換元素的 CSS 屬性 display。
注意，v-show 不支持
<template>元素,也不支持 v-else。
v-if 和v-show的區(qū)別：
v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。
v-show 就簡(jiǎn)單得多，不管初始條件是什么，元素總是會(huì)被渲染，即元素會(huì)始終渲染并保持在DOM中，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
v-show不支持template元素，作用在template元素上沒有效果，v-if則支持。
一般來說，v-if 有更高的切換開銷（根據(jù)條件對(duì)元素進(jìn)行創(chuàng)建...銷毀...創(chuàng)建...銷毀），而 v-show 有更高的初始渲染開銷（不管條件是否為true，，元素都會(huì)被渲染并保存在DOM中）。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。
1.2 v-for指令：解決模板循環(huán)問題
用 v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
需要注意的是，你需要那個(gè)html標(biāo)簽循環(huán)，v-for就寫在那個(gè)標(biāo)簽上面。
基本用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
</body>
</html>
排序：
運(yùn)行上面代碼，可以看到瀏覽器順利的輸出了定義的數(shù)組，但是如果想在輸出之前對(duì)定義的數(shù)組進(jìn)行一些操作，例如：給定義的數(shù)組排個(gè)序，則可以使用Vue的computed:屬性。
var app = new Vue({
......
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
})
function sortNumber(a,b){
return a-b
}
在computed里新聲明了一個(gè)對(duì)象sortItems，如果不重新聲明延用data里面定義的數(shù)組items則會(huì)報(bào)錯(cuò)，原因是這樣會(huì)污染原來定義的數(shù)據(jù)源，這是Vue不允許的，所以要重新聲明一個(gè)對(duì)象。
對(duì)象循環(huán)輸出：
先定義個(gè)數(shù)組，數(shù)組里邊是對(duì)象數(shù)據(jù)
students: [
{name: 'Andy', age: 18},
{name: 'Tony', age: 17},
{name: 'Alen', age: 35},
{name: 'zaishuiyixia', age: 25}
]
在模板中輸出
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
加入索引序號(hào)：
//數(shù)組對(duì)象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
有了數(shù)組的排序方法，在computed中進(jìn)行調(diào)用排序
sortStudent:function(){
return sortByKey(this.students,'age');
}
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for實(shí)例</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
<hr>
<ul>
<li v-for="(student, index) in sortStudent">
{{index+1}}: {{student.name}}-{{student.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items:[25,58,98,65,28,98,28,76],
students: [
{name: 'Andy', age: 18},
{name: 'Tony', age: 17},
{name: 'Alen', age: 35},
{name: 'zaishuiyixia', age: 25}
]
},
computed: {
sortItems: function() {
return this.items.sort(sortNumber)
},
sortStudent:function(){
return sortByKey(this.students,'age');
}
}
});
function sortNumber(a, b) {
return a-b;
}
//數(shù)組對(duì)象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
</script>
</body>
</html>
1.3 v-text & v-html指令
Vue中數(shù)據(jù)綁定的形式是使用“Mustache”語法 (雙大括號(hào)) 的文本插值：
<span>Message: {{ msg }}</span>
使用這種語法是有弊端的，就是當(dāng)速很慢或者javascript出錯(cuò)時(shí)，瀏覽器會(huì)先顯示{{xxx}}。Vue提供的v-text，就是解決這個(gè)問題的。
<span v-text="message"></span>
<!-- 和下面的一樣 -->
<span>{{message}}</span>
如果在javascript中寫有html標(biāo)簽，用v-text是輸出不出來的，這時(shí)候我們就需要用v-html標(biāo)簽了。
雙大括號(hào)會(huì)將數(shù)據(jù)解釋為純文本，而非HTML。為了輸出真正的HTML，就需要使用v-html 指令。 需要注意的是：在生產(chǎn)環(huán)境中動(dòng)態(tài)渲染HTML是非常危險(xiǎn)的，因?yàn)槿菀讓?dǎo)致XSS攻擊。所以只能在可信的內(nèi)容上使用v-html，永遠(yuǎn)不要在用戶提交和可操作的網(wǎng)頁上使用。 完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text & v-html實(shí)例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-text & v-html實(shí)例</h1>
<hr>
<div id="app">
<span>{{message}}</span> == <span v-text="message"></span>
<br>
<span v-html="html"></span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world!',
html: '<h2>hello world!</h2>'
}
})
</script>
</body>
</html>
1.4 v-on指令
綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。
用在普通元素上時(shí)，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時(shí)，也可以監(jiān)聽子組件觸發(fā)的自定義事件。
使用綁定事件監(jiān)聽器，編寫一個(gè)加分減分的程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on實(shí)例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-on實(shí)例</h1>
<hr>
<div id="app">
本場(chǎng)比賽得分：{{score}}
<p>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">減分</button>
<br><br>
<!-- 綁定鍵盤的enter鍵 -->
<input type="text" v-on:keyup.enter="onEnter" v-model="score2" >
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
score: 0,
score2: 1
},
methods: {
jiafen: function() {
this.score++;
},
jianfen: function() {
this.score--;
},
onEnter: function() {
this.score = this.score + parseInt(this.score2)
}
}
})
</script>
</body>
</html>
v-on 還有一種簡(jiǎn)單的寫法，就是用@代替。
<button @click="jianfen">減分</button>
除了綁定click之外，還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,現(xiàn)在增加一個(gè)輸入框，然后綁定回車事件，回車后把文本框里的值加到我們的count上。 綁定事件寫法：
<input type="text" v-on:keyup.enter="onEnter" v-model="score2">
javascript代碼：
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
因?yàn)槲谋究虻臄?shù)字會(huì)默認(rèn)轉(zhuǎn)變成字符串，所以我們需要用parseInt()函數(shù)進(jìn)行整數(shù)轉(zhuǎn)換。
1.5 v-model
v-model指令，可簡(jiǎn)單的理解為綁定數(shù)據(jù)源。就是把數(shù)據(jù)綁定在特定的表單元素上，可以很容易的在表單控件或者組件上創(chuàng)建雙向綁定 、 。
使用限制，應(yīng)該用于表單控件或者組件上：
<input>、<select>、<textarea>、components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model綁定數(shù)據(jù)源實(shí)例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-model綁定數(shù)據(jù)源實(shí)例</h1>
<hr>
<div id="app">
<p>原始文本信息：{{message}}內(nèi)部指令</p>
<h3>文本框</h3>
<p>v-model：<input type="text" v-model="message"></p>
<p>v-model.lazy：<input type="text" v-model.lazy="message"></p>
<p>v-model.number：<input type="text" v-model.number="message"></p>
<p>v-model.trim<input type="text" v-model.trim="message"></p>
<hr>
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
<hr>
<h3>多選框綁定一個(gè)值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
<hr>
<h3>多選框綁定數(shù)組</h3>
<p>
<input type="checkbox" id="alen" value="alen" v-model="names">
<label for="alen">alen</label>
<input type="checkbox" id="andy" value="andy" v-model="names">
<label for="andy">andy</label>
<input type="checkbox" id="tony" value="tony" v-model="names">
<label for="tony">tony</label>
<p>{{names}}</p>
</p>
<hr>
<h3>單選框綁定</h3>
<p>
<input type="radio" id="man" value="男" v-model="sex">
<label for="man">男</label>
<input type="radio" id="woman" value="女" v-model="sex">
<label for="woman">女</label>
<p>你選擇的性別是：{{sex}}</p>
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world!',
isTrue: true,
names: [],
sex: '男'
},
methods: {
}
})
</script>
</body>
</html>
1.6 v-bind
動(dòng)態(tài)地綁定一個(gè)或多個(gè)屬性。在綁定 class 或 style 特性時(shí)，支持其它類型的值，如數(shù)組或?qū)ο蟆?/p>
綁定css樣式，在綁定CSS樣式時(shí)，綁定的值必須在vue中的data屬性中進(jìn)行聲明：
1、直接綁定class樣式
<div :class="className">1、綁定classA</div>
2、綁定classA并進(jìn)行判斷，在isClassA為true時(shí)顯示樣式，在isClassA為false時(shí)不顯示樣式。
<div :class="{classA:isClassA}">2、綁定class中的判斷</div>
3、綁定class中的數(shù)組
<div :class="[classA,classB]">3、綁定class中的數(shù)組</div>
4、綁定class中使用三元表達(dá)式判斷
<div :class="isClassA?classA:classB">4、綁定class中的三元表達(dá)式判斷</div>
5、綁定style
<div :style="{color:red,fontSize:font}">5、綁定style</div>
6、用對(duì)象綁定style樣式
<div :style="styleObject">6、用對(duì)象綁定style樣式</div>
......
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind實(shí)例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<style>
.classA {
color: red;
}
.classB {
font-size: 150%;
}
</style>
</head>
<body>
<h1>v-bind實(shí)例</h1>
<hr>
<div id="app">
<p><img v-bind:src="imgUrl" alt="" width="300px"></p>
<p><a :href="blogUrl" target="_blank">我的博客地址</a></p>
<hr>
<div :class="className">1、綁定class屬性</div>
<div :class="{classA: isClassA}">2、綁定class中的判斷</div>
<div :class="[classA, classB]">3、綁定class中的數(shù)組</div>
<div :class="isClassA?classA:classB">4、綁定class中的三元運(yùn)算符</div>
<hr>
<div>
<input type="checkbox" id="isClassA" v-model="isClassA">
<label for="isClassA">isClassA={{isClassA}}</label>
</div>
<hr>
<div :style="{color:color,fontSize:font}">5、綁定style</div>
<div :style="styleObj">5、對(duì)象綁定style</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgUrl: 'https://upload-images.jianshu.io/upload_images/1969310-c688f5d4d3a352b1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp',
blogUrl: 'http://m.itdecent.cn/p/26010db3776c',
className: 'classA',
isClassA: false,
classA: 'classA',
classB: 'classB',
color: 'red',
font: '20px',
styleObj: {
color: 'green',
fontSize: '24px'
}
}
})
</script>
</body>
</html>
1.7 其他指令
v-pre指令：
在模板中跳過vue的編譯，直接輸出原始值。就是在標(biāo)簽中加入v-pre就不會(huì)輸出vue中的data值了。
<div v-pre>{{message}}</div>
v-cloak指令：
在vue渲染完指定的整個(gè)DOM后才進(jìn)行顯示。可以防止數(shù)據(jù)抖動(dòng)。
<div v-cloak>
{{ message }}
</div>
v-once指令：
在第一次DOM時(shí)進(jìn)行渲染，渲染完成后視為靜態(tài)內(nèi)容，跳出以后的渲染過程。
<div v-once>第一次綁定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-pre & v-cloak & v-once</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-pre & v-cloak & v-once</h1>
<hr>
<div id="app">
<div v-pre>{{message}}</div>
<div v-cloak>渲染完成后，才顯示！</div>
<div>{{message}}</div>
<div><input type="text" v-model="message"></div>
<div>{{message}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
</body>
</html>
