Vue全家桶入門基礎(chǔ)教程
更新時(shí)間：2021年05月14日 11:41:33 作者：前端加油
Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，和React，都自稱自己只關(guān)注視圖層，全家桶對(duì)于開發(fā)一個(gè)完整的中大型單頁(yè)面應(yīng)用項(xiàng)目所必須的所必須的插件和框架，本文給大家分享Vue全家桶入門基礎(chǔ)教程，感興趣的朋友一起看看吧
1. Vue概述
Vue(讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。
漸進(jìn)式: 聲明式渲染→組件系統(tǒng)→客戶端路由→集中式狀態(tài)管理→項(xiàng)目構(gòu)建
可以使用其中的一個(gè)或者多個(gè)
優(yōu)點(diǎn):
- 易用：熟悉HTML，CSS.JavaScript知識(shí)后，可快速上手Vue
- 靈活：在一個(gè)庫(kù)和一套完整框架之間自如伸縮
- 高效：20kB運(yùn)行大小，超快虛擬DOM
2. Vue的基本使用
2.1 傳統(tǒng)開發(fā)模式對(duì)比
//原生JS
<div id="msg"></div>
<script type="text/javascript">
var msg = 'Hello World'
var div = document.querySelector('#msg');
div.innerHTML = msg
</script>
//jQuery
<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var msg = 'Hello World';
$('#msg').html(msg);
</script>
2.2 Vue.js之HelloWorld基本步驟
引入Vue的方法:
1.下載Vue.js，然后在<script type='text/javascript' src='js/vue.js'></script>引入
2.使用CDN方法。 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
Vue的基本使用步驟:
1、需要提供標(biāo)簽用于填充數(shù)據(jù)
2、引入Vue.js庫(kù)文件
3、可以使用vue的語(yǔ)法做功能了
4、把vue提供的數(shù)據(jù)填充到標(biāo)簽里面
//1.HelloWorld.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
//插值表達(dá)式
<div>{{num}}</div>
<div><button @click='handle'>點(diǎn)擊</button></div>
</div>
//引入vue
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function () {
this.num++;
}
}
});
</script>
</body>
</html>
2.3 Vue.js之HelloWorld細(xì)節(jié)分析
1. 實(shí)例參數(shù)分析
- el：元素的掛載位置（值可以是CSS選擇器或者DOM元素）關(guān)聯(lián)起來
- data：模型數(shù)據(jù)（值是一個(gè)對(duì)象）
- methods，該屬性用于在Vue對(duì)象中定義方法。
2.插值表達(dá)式用法
- 將數(shù)據(jù)填充到HTML標(biāo)簽中
- 插值表達(dá)式支持基本的計(jì)算操作
3. Vue代碼運(yùn)行原理分析
概述編譯過程的概念（Vue語(yǔ)法經(jīng)過Vue框架編譯成原生JS語(yǔ)法,才能夠被瀏覽器執(zhí)行）
3. Vue 模板語(yǔ)法
3.1 模板語(yǔ)法概述
前端渲染:把數(shù)據(jù)填充到HTML標(biāo)簽中
前端渲染方式:
- 原生js拼接字符串
- 使用前端模板引擎
- 使用vue特有的模板語(yǔ)法(推薦)
原生js拼接字符串基本上就是將數(shù)據(jù)以字符串的方式拼接到HTML標(biāo)簽中。
缺點(diǎn)：不同開發(fā)人員的代碼風(fēng)格差別很大，隨著業(yè)務(wù)的復(fù)雜，后期的維護(hù)變得逐漸困難起來。
使用前端模板引擎是基于模板引擎art-template的一段代碼，與拼接字符串相比，代碼明顯規(guī)范了很多，它擁有自己的一套模板語(yǔ)法規(guī)則。
優(yōu)點(diǎn)：大家都遵循同樣的規(guī)則寫代碼，代碼可讀性明顯提高了，方便后期的維護(hù)。
缺點(diǎn)：沒有專門提供事件機(jī)制。
插值表達(dá)式 {{變量}}
- 使用'mustache'語(yǔ)法 {{ msg }}（雙花括號(hào)）
- mustache 標(biāo)簽將會(huì)被替換為 data 對(duì)象上對(duì)應(yīng)的 msg 屬性的值。
- 只要綁定的數(shù)據(jù)對(duì)象上的 msg 屬性發(fā)生改變，插值內(nèi)容也會(huì)隨之更新。
<div id="app">
<!-- this 指向 vm -->
<p> {{ msg }} </p>
</div>
<script>
var vm = new Vue({
el: ‘#app',
data: {
msg: 'hello vue.js'
}
})
</script>
模板語(yǔ)法概述
- 插值表達(dá)式
- 指令
- 事件綁定
- 屬性綁定
- 樣式綁定
- 分支循環(huán)結(jié)構(gòu)
3.2 指令
1.什么是指令?
- 自定義屬性：如在html5中定義，屬性均可隨意命名。
- 指令的本質(zhì)就是自定義屬性
- 指令的格式：以v-開始（比如：v-cloak）
2.v-cloak指令用法
插值表達(dá)式存在的問題：“閃動(dòng)”
如何解決該問題：使用v-cloak指令
v-cloak指令的用法
1、提供樣式
屬性選擇器
[v-cloak]{
display: none;
}
2、在插值表達(dá)式所在的標(biāo)簽中添加v-cloak指令
背后的原理：先通過樣式隱藏內(nèi)容，然后在內(nèi)存中進(jìn)行值的替換，替換好之后再顯示最終的結(jié)果
//02-指令v-cloak的用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
3 .數(shù)據(jù)綁定指令
- v-text填充純文本
用于將數(shù)據(jù)填充到標(biāo)簽中，作用于插值表達(dá)式類似，但是沒有閃動(dòng)問題
- v-html填充HTML片段
用于將HTML片段填充到標(biāo)簽中，但是可能有安全問題
- v-pre填充原始信息
顯示原始信息，跳過編譯過程（分析編譯過程）
//03-數(shù)據(jù)填充相關(guān)3個(gè)指令用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1: '<h1>HTML</h1>'
}
});
</script>
</body>
</html>
4.數(shù)據(jù)響應(yīng)式
- 如何理解響應(yīng)式
html5中的響應(yīng)式（屏幕尺寸的變化導(dǎo)致樣式的變化）
數(shù)據(jù)的響應(yīng)式（數(shù)據(jù)的變化導(dǎo)致頁(yè)面內(nèi)容的變化）
- 數(shù)據(jù)綁定：將數(shù)據(jù)填充到標(biāo)簽中,默認(rèn)是響應(yīng)式的
- v-once只編譯一次，顯示內(nèi)容之后不再具有響應(yīng)式功能
v-once的應(yīng)用場(chǎng)景：如果顯示的信息后續(xù)不需要再修改，可以使用v-once提高性能。
//04-指令v-once的用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊"
}
})
</script>
</body>
</html>
3.3 雙向數(shù)據(jù)綁定
1.什么是雙向數(shù)據(jù)綁定？
2.雙向數(shù)據(jù)綁定分析
Vue中使用v-model指令來實(shí)現(xiàn)標(biāo)簽內(nèi)容的綁定(雙向綁定).如表單元素和數(shù)據(jù)的雙向綁定
v-model只能用于表單類型，就是輸入性控件，其他控件不能用，用v-bind
<input type='text' v-model='uname'/>
//05.雙向數(shù)據(jù)綁定.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/* 雙向數(shù)據(jù)綁定
1、從頁(yè)面(用戶)到數(shù)據(jù)
2、從數(shù)據(jù)到頁(yè)面 */
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
案例解析:
當(dāng)我們?cè)谳斎肟蜉斎雰?nèi)容時(shí),因?yàn)閕nput中的v-model綁定了msg，所以會(huì)實(shí)時(shí)將輸入的內(nèi)容傳遞給msg，msg發(fā)生改變。
當(dāng)msg發(fā)生改變時(shí)，因?yàn)樯厦嫖覀兪褂肕ustache語(yǔ)法，將msg的值插入到DOM中，所以DOM會(huì)發(fā)生響應(yīng)的改變。
3.MVVM設(shè)計(jì)思想
MVVM是Model-View-ViewModel的簡(jiǎn)寫。它本質(zhì)上就是MVC 的改進(jìn)版。MVVM 就是將其中的View 的狀態(tài)和行為抽象化，讓我們將視圖 UI 和業(yè)務(wù)邏輯分開
- View層：視圖層
在我們前端開發(fā)中，通常就是DOM層。主要的作用是給用戶展示各種信息。
- Model層：數(shù)據(jù)層
數(shù)據(jù)可能是我們固定的死數(shù)據(jù)，更多的是來自我們服務(wù)器，從網(wǎng)絡(luò)上請(qǐng)求下來的數(shù)據(jù)。
- VueModel層：視圖模型層
視圖模型層是View和Model溝通的橋梁。
一方面它通過Data Binding（數(shù)據(jù)綁定），將Model的改變實(shí)時(shí)的反應(yīng)到View中
另一方面它通過DOM Listener（DOM監(jiān)聽），當(dāng)DOM發(fā)生一些事件(點(diǎn)擊、滾動(dòng)、touch等)時(shí)，可以監(jiān)聽到，并在需要的情況下改變對(duì)應(yīng)的Data。
3.4 事件綁定
1.Vue如何處理事件？
- v-on指令用法:
用于綁定HTML事件,如鼠標(biāo)點(diǎn)擊事件 - 當(dāng)前button綁定鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊則調(diào)用doSomething方法
在這里doSomething() 是一個(gè)函數(shù),可以寫在methods的方法中,供該標(biāo)簽調(diào)用.
<button v-on:click="doSomething">...</button>
v-on語(yǔ)法糖(簡(jiǎn)寫形式)@
<input type='button' @click='num++'/>
//06-事件基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div>
//4種都可以實(shí)現(xiàn)
<button v-on:click='num++'>點(diǎn)擊</button>
<button @click='num++'>點(diǎn)擊1</button>
<button @click='handle'>點(diǎn)擊2</button>
<button @click='handle()'>點(diǎn)擊3</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: {
handle: function () {
// 這里的this是Vue的實(shí)例對(duì)象
console.log(this === vm)
// 在函數(shù)中 想要使用data里面的數(shù)據(jù) 一定要加this
this.num++;v
}
}
});
</script>
</body>
</html>
2.事件函數(shù)的調(diào)用方式
直接綁定函數(shù)名稱
<button v-on:click='say'>Hello</button>
調(diào)用函數(shù)
<button v-on:click='say()'>Hello</button>
3.事件函數(shù)參數(shù)傳遞
事件函數(shù)參數(shù)傳遞
<button v-on:click='say('hi',$event)'>Hello</button>
//07-事件函數(shù)傳參.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<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>
</body>
</html>
4.事件修飾符
.stop 阻止冒泡
<a v-on:click.stop="handle">跳轉(zhuǎn)</a>
.prevent阻止默認(rèn)行為
<a v-on:click.prevent="handle">跳轉(zhuǎn)</a>
//08-事件修飾符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div @click='handle0'>
<button @click.stop='handle1'>點(diǎn)擊1</button>
</div>
<div>
<a @click.prevent='handle2'>百度</a>
</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: {
handle0: function () {
this.num++;
},
handle1: function (event) {
// js阻止冒泡
// event.stopPropagation();
},
handle2: function (event) {
// js阻止默認(rèn)行為
// event.preventDefault();
}
}
});
</script>
</body>
</html>
未加事件修飾符:
加事件修飾符:
5.按鍵修飾符
.enter 回車鍵
<input v-on:keyup.enter='submit'>
.delete刪除鍵
<input v-on:keyup.delete='handle'>
//09-按鍵修飾符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="">
<div>
用戶名： <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
</div>
<div>
密碼：<input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
</div>
<div>
<input type="button" v-on:click='handleSubmit' value="提交">
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.config.keyCodes.f1 = 113
var vm = new Vue({
el: '#app',
data: {
uname: '',
pwd: '',
age: 0
},
methods: {
clearContent:function(){
// 按delete鍵的時(shí)候，清空用戶名
this.uname = '';
},
handleSubmit: function(){
console.log(this.uname,this.pwd)
}
}
});
</script>
</body>
</html>
6.自定義按鍵修飾符
全局config.keyCodes 對(duì)象
規(guī)則：自定義按鍵修飾符名字是自定義的，但是對(duì)應(yīng)的值必須是按鍵對(duì)應(yīng)event.keyCode值
Vue.config.keyCodes.f1 = 112
//10-自定義事件修飾符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.f1='handle' v-model='msg'>
</div>
<script type='text/javascript'>
Vue.config.keyCodes.f1 = 65
const app = new Vue({
el: "#app",
data: {
msg: ''
},
methods: {
handle: function (event) {
console.log(event.keyCode);
}
}
})
</script>
</body>
</html>
案例:簡(jiǎn)單計(jì)算器
需求：實(shí)現(xiàn)簡(jiǎn)單的加法計(jì)算，分別輸入數(shù)值a和數(shù)值，點(diǎn)擊計(jì)算按鈕，結(jié)果顯示在下面。
步驟:
- 通過v-model指令實(shí)現(xiàn)數(shù)值a和數(shù)值b的綁定
- 給計(jì)算按鈕綁定事件，實(shí)現(xiàn)計(jì)算邏輯
- 將計(jì)算結(jié)果綁定到對(duì)應(yīng)位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
<div id="app">
<h2>簡(jiǎn)單計(jì)算器</h2>
<div>數(shù)值A(chǔ):<input type="text" v-model="a"></div>
<div>數(shù)值B:<input type="text" @keyup.enter='Sum' v-model="b"></div>
<div><button @click='Sum'>計(jì)算</button></div>
<div>計(jì)算結(jié)果:</div>
<div v-text='result'></div>
</div>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
a: '',
b: '',
result: ''
},
methods: {
Sum: function () {
//實(shí)現(xiàn)計(jì)算邏輯 表單輸入默認(rèn)是字符串 加this很重要
this.result = parseInt(this.a) + parseInt(this.b)
}
}
})
</script>
</body>
</html>
3.5 屬性綁定
1.Vue如何動(dòng)態(tài)處理屬性？
v-bind是處理HTML中的標(biāo)簽屬性的，例如
就是一個(gè)標(biāo)簽，也是一個(gè)標(biāo)簽，我們綁定上的src進(jìn)行動(dòng)態(tài)賦值。
v-bind指令用法
<a v-bind:href='url'>跳轉(zhuǎn)</a>
縮寫形式
<a :href='url'>跳轉(zhuǎn)</a>
//12-屬性綁定基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度</a>
<button @click='handle'>切換</button>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
url: 'http://www.baidu.com'
},
methods: {
handle: function () {
//修改url地址
this.url = 'http://www.itcast.com'
}
}
})
</script>
</body>
</html>
2.v-model的低層實(shí)現(xiàn)原理分析
不使用v-model也可以實(shí)現(xiàn)雙向綁定
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
//13-指令v-model的本質(zhì).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-bind:value="msg" v-on:input='handle'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
handle: function(event){
// 使用輸入域中的最新的數(shù)據(jù)覆蓋原來的數(shù)據(jù)
this.msg = event.target.value;
}
}
});
</script>
</body>
</html>
3.6 樣式綁定
1. class樣式處理
對(duì)象語(yǔ)法
<div v-bind:class="{ active: isActive }"></div>
數(shù)組語(yǔ)法
<div v-bind:class="[activeClass, errorClass]"></div>
//14-樣式綁定之class綁定對(duì)象用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type='text/css'>
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div :class="{active:isActive,error:isError}">測(cè)試樣式</div>
<button @click='handle'>切換</button>
</div>
</body>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app = new Vue({
el: "#app",
data: {
isActive: true,
isError: true,
},
methods: {
handle: function () {
//控制isActive在true和false之間切換
this.isActive = !this.isActive
this.isError = !this.isError
}
}
})
</script>
</html>
//15-樣式綁定之class綁定數(shù)組用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class='[activeClass, errorClass]'>測(cè)試樣式</div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function(){
this.activeClass = '';
this.errorClass = '';
}
}
});
</script>
</body>
</html>
//16-樣式綁定之class綁定3個(gè)細(xì)節(jié)用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
.test {
color: blue;
}
.base {
font-size: 28px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>測(cè)試樣式</div>
<div v-bind:class='arrClasses'></div>
<div v-bind:class='objClasses'></div>
<div class="base" v-bind:class='objClasses'></div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
樣式綁定相關(guān)語(yǔ)法細(xì)節(jié)：
1、對(duì)象綁定和數(shù)組綁定可以結(jié)合使用
2、class綁定的值可以簡(jiǎn)化操作
3、默認(rèn)的class如何處理？默認(rèn)的class會(huì)保留
*/
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error',
isTest: true,
arrClasses: ['active','error'],
objClasses: {
active: true,
error: true
}
},
methods: {
handle: function(){
// this.isTest = false;
this.objClasses.error = false;
}
}
});
</script>
</body>
</html>
2. style樣式處理
對(duì)象語(yǔ)法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
數(shù)組語(yǔ)法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
//17-樣式綁定之style綁定用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
<div v-bind:style='objStyles'></div>
<div v-bind:style='[objStyles, overrideStyles]'></div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid blue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid green',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
},
methods: {
handle: function () {
this.heightStyle = '100px';
this.objStyles.width = '100px';
}
}
});
</script>
</body>
</html>
3.7 分支循環(huán)結(jié)構(gòu)
1.分支結(jié)構(gòu)
- v-if
- v-else
- v-else-if
- v-show
2.v-if與v-show的區(qū)別
- v-if控制元素是否渲染到頁(yè)面
- v-show控制元素是否顯示（已經(jīng)渲染到了頁(yè)面）
- v-if當(dāng)條件為false時(shí)，壓根不會(huì)有對(duì)應(yīng)的元素在DOM中。v-show當(dāng)條件為false時(shí)，僅僅是將元素的display屬性設(shè)置為none而已
- 當(dāng)需要在顯示與隱藏之間切換很頻繁時(shí)，使用v-show.當(dāng)只有一次切換時(shí)，通過使用v-if
//18-分支結(jié)構(gòu).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='score>=90'>優(yōu)秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>比較差</div>
<div v-show='flag'>測(cè)試v-show</div>
<button v-on:click='handle'>點(diǎn)擊</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*v-show的原理：控制元素樣式是否顯示 display:none*/
var vm = new Vue({
el: '#app',
data: {
score: 10,
flag: false
},
methods: {
handle: function(){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
3.循環(huán)結(jié)構(gòu)
- v-for遍歷數(shù)組 v-for的語(yǔ)法類似于JavaScript中的for循環(huán)。格式如下：item in items的形式。
其中item為自定義屬性（改為abc都行）,items為需要遍歷的數(shù)據(jù),index為索引
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
key的作用：幫助Vue區(qū)分不同的元素對(duì)開發(fā)功能沒有效果，僅僅幫助vue提高性能,要確保key的唯一性
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
//19-循環(huán)結(jié)構(gòu)-遍歷數(shù)組.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
<li :key='item.id' v-for='(item, index) in myFruits'>
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
id: 1,
ename: 'apple',
cname: '蘋果'
},{
id: 2,
ename: 'orange',
cname: '橘子'
},{
id: 3,
ename: 'banana',
cname: '香蕉'
}]
}
});
</script>
</body>
</html>
4. 循環(huán)結(jié)構(gòu)
v-for遍歷對(duì)象
<div v-for='(value, key, index) in object'></div> value值 key鍵 index索引
v-if和v-for結(jié)合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='v==13' v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
</script>
</body>
</html>
3.8 v-model、v-on、v-bind使用說明
v-model
v-model指令來實(shí)現(xiàn)表單標(biāo)簽內(nèi)容的雙向綁定.如表單元素和數(shù)據(jù)的雙向綁定
v-model只能用于表單類型，就是輸入性控件，其他控件不能用，用v-bind
一個(gè)input標(biāo)簽綁定了msg這個(gè)變量，那么只要input輸入發(fā)生改變，msg的值也就跟著改變，反過來也是一樣，這種綁定是雙向綁定
<input type='text' v-model='msg'>
v-on
v-on指令用法:用于綁定HTML事件,如鼠標(biāo)點(diǎn)擊事件
當(dāng)前button綁定鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊則調(diào)用doSomething方法
<button v-on:click="doSomething">...</button>
v-bind
v-bind是處理HTML中的標(biāo)簽屬性的，默認(rèn)情況下標(biāo)簽自帶屬性的值是固定的，在為了能夠動(dòng)態(tài)的給這些屬性添加值，可以使用v-bind 例如是一個(gè)標(biāo)簽，我們綁定上的src進(jìn)行動(dòng)態(tài)賦值。
<img :src='msg'>
4. 基礎(chǔ)案例:Tab選項(xiàng)卡
步驟:
1.實(shí)現(xiàn)靜態(tài)UI效果
用傳統(tǒng)的方式實(shí)現(xiàn)標(biāo)簽結(jié)構(gòu)和樣式
2.基于數(shù)據(jù)重構(gòu)UI效果
將靜態(tài)的結(jié)構(gòu)和樣式重構(gòu)為基于Vue模板語(yǔ)法的形式
處理事件綁定和js控制邏輯
3.聲明式編程
模板的結(jié)構(gòu)和最終顯示的效果基本一致
//21-選項(xiàng)卡案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.tab ul {
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top: 1px solid blue;
border-right: 1px solid blue;
cursor
}
.tab ul li:first-child {
border-left: 1px solid blue;
}
.tab ul li.active {
background-color: orange;
}
.tab div {
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid blue;
border-top: 0px;
}
.tab div.current {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<ul>
<li @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 type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
currentIndex: 0, //選項(xiàng)卡當(dāng)前的索引
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) {
//在這里實(shí)現(xiàn)選項(xiàng)卡切換操作:操作類名,通過currentIndex
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
5. Vue常用特性
5.1 常用特性概覽
- 表單操作
- 自定義指令
- 計(jì)算屬性
- 過濾器
- 偵聽器
- 生命周期
5.2 表單操作
1.基于Vue的表單操作
- Input單行文本
- textarea多行文
- select 下拉多選
- radio 單選框
- checkbox多選框
//01-表單基本操作.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
form div {
height: 40px;
line-height: 40px;
}
form div:nth-child(4) {
height: auto;
}
form div span:first-child {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<form action="http://www.baidu.com">
<div>
<span>姓名：</span>
<span>
<input type="text" v-model="uname" />
</span>
</div>
<div>
<span>性別：</span>
<span>
<input type="radio" id="male" value="1" v-model="gender" />
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender" />
<label for="female">女</label>
</span>
</div>
<div>
<span>愛好：</span>
<input type="checkbox" id="ball" value="1" v-model="hobby" />
<label for="ball">籃球</label>
<input type="checkbox" id="sing" value="2" v-model="hobby" />
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="hobby" />
<label for="code">寫代碼</label>
</div>
<div>
<span>職業(yè)：</span>
<select v-model="occupation" multiple>
<option value="0">請(qǐng)選擇職業(yè)</option>
<option value="1">教師</option>
<option value="2">軟件工程師</option>
<option value="3">律師</option>
</select>
</div>
<div>
<span>個(gè)人簡(jiǎn)介：</span>
<textarea v-model="desc"></textarea>
</div>
<div>
<input type="submit" value="提交" @click.prevent="handle" />
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
uname: "",
gender: "", //單選為值
hobby: [""], //多選為數(shù)組
occupation: [""],
desc: "",
},
methods: {
handle: function () {},
},
});
</script>
</body>
</html>
2.表單域修飾符
- number：表單輸入的字符串轉(zhuǎn)化為數(shù)值
- trim：去掉開始和結(jié)尾的空格
- lazy：將input事件切換為change事件 input事件立即觸發(fā) change事件失去焦點(diǎn)觸發(fā)
<input v-model.number='age' type='number'
//02-表單域修飾符用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model.number='age'>
<input type="text" v-model.trim='info'>
<input type="text" v-model.lazy='msg'>
<div>{{msg}}</div>
<button @click='handle'>點(diǎn)擊</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: '',
info: '',
msg: ''
},
methods: {
handle: function () {
console.log(this.age + 1)
console.log(this.info.length)
}
}
});
</script>
</body>
</html>
5.3 自定義指令
1.為何需要自定義指令?
內(nèi)置指令不滿足需求
2.自定義指令的語(yǔ)法規(guī)則(獲取元素焦點(diǎn))
//注冊(cè)一個(gè)全局自定義指令'v-focus'
//focus為指令名稱 調(diào)用時(shí)加v-
Vue.directive('focus'{
//當(dāng)被綁定非的元素插入到DOM中時(shí)調(diào)用
inserted:function(el){
//獲取元素的焦點(diǎn)
el.focus()
}
})
3.自定義指令用法
<input type="text" v-focus>
一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù)（均為可選）：
- bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，在這里可以進(jìn)行一次性的初始化設(shè)置。
- inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中）。
指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：
e1：指令所綁定的元素，可以用來直接操作DOM.
binding：一個(gè)對(duì)象，包含以下屬性：
- name：指令名，不包括v-前綴。
- value：指令的綁定值，例如：v-my-directive="1 + 1"中，綁定值為2
- oldvalue：指令綁定的前一個(gè)值，僅在update和componentUpdated鉤子中可用。無論值是否改變都可用。
//03-自定義指令基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
<input type="text">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.directive('focus', {
inserted: function (el) {
// el表示指令所綁定的元素
el.focus();
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function () {
}
}
});
</script>
</body>
</html>
4.帶參數(shù)的自定義指令(改變?cè)乇尘吧?
Vue.directive('color',{
inserted:function(el,binding){
el.style.backgroundColor =binding.value.color;
}
})
5.指令的用法
<input type="text" v-color='{color:'orange'}'>
//04-帶參數(shù)的自定義指令.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-color='msg'>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
Vue.directive('color', {
bind: function (el, binding) {
//根據(jù)指令的參數(shù)設(shè)置背景色
el.style.backgroundColor = binding.value.color
}
});
const app = new Vue({
el: "#app",
data: {
msg: {
color: 'pink'
}
},
methods: {}
})
</script>
</body>
</html>
6.局部指令:只能在本組件中使用
directives:{
focus:{
//指令的定義
inserted:function(el){
el.focus()
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-color='msg'>
<input type="text" v-focus>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
methods: {
handle: function(){
}
},
directives: {
color: {
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
}
});
</script>
</body>
</html>
5.4 計(jì)算屬性
1.為何需要計(jì)算屬性?
Vue中的computed屬性被稱為計(jì)算屬性,計(jì)算屬性是寫在實(shí)例的computed選項(xiàng)
表達(dá)式的計(jì)算邏輯可能會(huì)比較復(fù)雜,使用計(jì)算屬性可以使模板內(nèi)容更加簡(jiǎn)介
2.計(jì)算屬性的用法
computed: {
reverseString: function(){
return this.msg.split('').reverse().join('');
}
}
//06-計(jì)算屬性基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'nihao'
},
computed: {
reverseString: function () {
//return不要忘記
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
3.計(jì)算屬性和方法的區(qū)別
- 計(jì)算屬性是基于它們的依賴進(jìn)行緩存,如果多次使用時(shí)，計(jì)算屬性只會(huì)調(diào)用一次,性能上計(jì)算屬性明顯比methods好,如果依賴改變則重新緩存
- 方法不緩存
//07-計(jì)算屬性與方法的區(qū)別.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao',
num: 100
},
methods: {
reverseMessage: function () {
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
computed: {
reverseString: function () {
console.log('computed')
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
5.5 偵聽器
1. 偵聽器的應(yīng)用場(chǎng)景
數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大(比較耗時(shí))的操作
2.偵聽器的用法
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName;
},
LastName: function (val) {
this.fullName = this.firstName + ' ' + val;
},
}
//08-偵聽器基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<span>名：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
fullName: 'Jin Green'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName;
},
LastName: function (val) {
this.fullName = this.firstName + ' ' + val;
},
}
});
</script>
</body>
</html>
案例:驗(yàn)證用戶名是否可用
需求：輸入框中輸入姓名，失去焦點(diǎn)時(shí)驗(yàn)證是否存在，如果已經(jīng)存在，提示從新輸入，如果不存在，提示可以用。
需求分析:
- 通過v-model實(shí)現(xiàn)數(shù)據(jù)綁定
- 需要提供提示信息
- 需要偵聽器監(jiān)聽輸入信息的變化
- 需要修改觸發(fā)的事件
偵聽器
1、采用偵聽器監(jiān)聽用戶名的變化
2、調(diào)用后臺(tái)接口進(jìn)行驗(yàn)證
3、根據(jù)驗(yàn)證的結(jié)果調(diào)整提示信息
//09-偵聽器案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<span>用戶名：</span>
<span>
<input type="text" v-model.lazy='uname'>
</span>
<span>{{tip}}</span>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
uname: '',
tip: ''
},
methods: {
checkName: function (uname) {
//調(diào)用接口,但是可以使用定時(shí)任務(wù)的方式模擬接口調(diào)用
var that = this;
setTimeout(function () {
//模擬接口調(diào)用
if (uname == 'admin') {
that.tip = '用戶名已經(jīng)存在,請(qǐng)更換一個(gè)';
} else {
that.tip = '用戶名可以使用'
}
}, 1000)
}
},
watch: {
uname: function (val) {
//調(diào)用后臺(tái)接口驗(yàn)證用戶名的合法性
this.checkName(val);
//修改提示信息
this.tip = '正在驗(yàn)證中...'
}
}
});
</script>
</body>
</html>
5.6 過濾器
1.過濾器的作用是什么？
格式化數(shù)據(jù)，比如將字符串格式化為首字母大寫，將日期格式化為指定的格式等
2.全局過濾器
Vue.filter('過濾器名稱',function(value){
//過濾器業(yè)務(wù)邏輯
})
3.過濾器的使用
<div>{{msg |upper}}</div>//upper為過濾器名稱
<div>{{msg |upper | lower}}</div>//級(jí)聯(lián)操作
<div :id='id | formatId'></div>
4.局部過濾器
filters:{
upper:function(val){
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
//10-過濾器基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :abc='msg | upper'>測(cè)試數(shù)據(jù)</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.filter('lower', function (val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
filters: {
upper: function (val) {
//拿到首字母將其變成大寫,然后和后面的字母拼接
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
</script>
</body>
</html>
5.帶參數(shù)的過濾器
6.過濾器的使用
<div>{{data | format('yyyy-MM-dd')}}</div>
案例:使用過濾器格式化時(shí)期
//10-過濾器基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.filter('format', function(value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小時(shí)
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
})
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
</script>
</body>
</html>
5.7 Vue生命周期
生命周期:事物從誕生到消亡的整個(gè)過程
vue的生命周期:每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個(gè)過程就是.beforeCreate()創(chuàng)建之前
生命周期鉤子：就是可以讓你在頁(yè)面生成的不同階段執(zhí)行動(dòng)作的api，作用就是只要頁(yè)面到了這個(gè)階段就會(huì)觸發(fā)這個(gè)對(duì)應(yīng)鉤子里的js
1.主要階段
掛載（初始化相關(guān)屬性）
beforeCreatecreatedbeforeMountmounted
更新（元素或組件的變更操作）
beforeUpdateupdated
銷毀（銷毀相關(guān)屬性）
beforeDestroydestroyed
2.Vue實(shí)例的產(chǎn)生過程
- eforeCreate在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和事件配置之前被調(diào)用。
- created在實(shí)例創(chuàng)建完成后被立即調(diào)用。
- beforeMount在掛截開始之前被調(diào)用。
- mounted el被新創(chuàng)建的vm.Sel替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。
- beforeUpdate數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前。
- updated由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子
- beforeDestroy實(shí)例銷毀之前調(diào)用。
- destroyed實(shí)例銷段后調(diào)用。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-biZCGRVM-1620742265770)(Vue全家桶之Vue基礎(chǔ).assets/5.15.png)]
6.綜合案例:圖書管理
案例:圖書管理
案例:補(bǔ)充知識(shí)
1.數(shù)組相關(guān)API:變異方法（修改數(shù)組）
- push()
- pop()末尾刪除
- shift()
- unshift()
- splice()刪除指定元素
- sort()排序
- reverse()
2.數(shù)組相關(guān)API:替換數(shù)組(生成新的數(shù)組)
- filter()
- concat()
- slice()從已有的數(shù)組中選定元素,返回一個(gè)新的數(shù)組
3.數(shù)組響應(yīng)式變化:修改響應(yīng)數(shù)據(jù)
- Vue.set（vm.items，indexOfltem，newValue）
- vm.$set（vm.items，indexOfltem，newValue）
參數(shù)一表示要處理的數(shù)組名稱
參數(shù)二表示要處理的數(shù)組的索引/對(duì)象的屬性名
參數(shù)三表示要處理的數(shù)組的值
1.圖書列表
- 實(shí)現(xiàn)靜態(tài)列表效果
- 基于數(shù)據(jù)實(shí)現(xiàn)模板效果
- 處理每行的操作按鈕
2.添加圖書
- 實(shí)現(xiàn)表單的靜態(tài)效果
- 添加圖書表單域數(shù)據(jù)綁定
- 添加按鈕事件綁定
- 實(shí)現(xiàn)添加業(yè)務(wù)邏輯
3.修改圖書
- 修改信息填充到表單
- 修改后重新提交表單
- 重用添加和修改的方法
4.刪除圖書
刪除按鈕綁定事件處理方法
實(shí)現(xiàn)刪除業(yè)務(wù)邏輯
5.常用特性應(yīng)用場(chǎng)景
過濾器（格式化日期）自定義指令（獲取表單焦點(diǎn)）計(jì)算屬性（統(tǒng)計(jì)圖書總數(shù)）偵聽器（驗(yàn)證圖書存在性）生命周期（圖書數(shù)據(jù)處理）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- css樣式 -->
<style type="text/css">
.grid {
margin: auto;
width: 530px;
text-align: center;
}
.grid table {
border-top: 1px solid #C2D89A;
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10;
border: 1px dashed #F3DCAB;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: #F3DCAB;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: #F3DCAB;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #F3DCAB;
border-top: 1px solid #C2D89A;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>圖書管理</h1>
<!--二、添加圖書 -->
<div class="book">
<div>
<!-- 2.1添加圖書表單域數(shù)據(jù)綁定 -->
<label for="id">
編號(hào)：
</label>
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
<label for="name">
名稱：
</label>
<input type="text" id="name" v-model='name'>
<!--2.2添加按鈕事件綁定 -->
<button @click='handle' :disabled="submitFlag">提交</button>
</div>
</div>
</div>
<div class="total">
<span>圖書總數(shù)：</span>
<span>{{total}}</span>
</div>
<!-- 一、圖書列表 -->
<table>
<thead>
<tr>
<th>編號(hào)</th>
<th>名稱</th>
<th>時(shí)間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 1.1基于數(shù)據(jù)實(shí)現(xiàn)模板效果 -->
<tr :key='item.id' v-for='item in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- 調(diào)用日期格式化過濾器 -->
<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
<td>
<!-- 1.2處理按鈕操作:禁止標(biāo)簽跳轉(zhuǎn) -->
<!-- 三、修改圖書 -->
<!-- 3.1修改按鈕綁定事件處理方法 -->
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<!-- 四、刪除圖書 -->
<!-- 4.1刪除按鈕綁定事件處理方法 -->
<a href="" @click.prevent='deleteBook(item.id)'>刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 六、自定義指令（獲取表單焦點(diǎn)）
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
// 五、過濾器（格式化日期）
Vue.filter('format', function (value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小時(shí)
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
})
var vm = new Vue({
el: '#app',
data: {
flag: false,
submitFlag: false,
id: '',
name: '',
books: []
},
methods: {
handle: function () {
if (this.flag) {
// 3.3修改后重新提交表單
// 就是根據(jù)當(dāng)前的ID去更新數(shù)組中對(duì)應(yīng)的數(shù)據(jù)
this.books.some((item) => {
if (item.id == this.id) {
item.name = this.name;
// 完成更新操作之后，需要終止循環(huán)
return true;
}
});
//重新提交表單之后把ID放開
this.flag = false;
} else {
// 2.3實(shí)現(xiàn)添加業(yè)務(wù)邏輯
// 添加圖書
var book = {};
book.id = this.id;
book.name = this.name;
book.date = 2525609975000;
this.books.push(book);
}
// 表單提交后清空表單
this.id = '';
this.name = '';
},
// 3.2修改按鈕事件處理方法
toEdit: function (id) {
// 禁止修改ID 根據(jù)ID修改數(shù)據(jù),一旦改變就無法確認(rèn)更改那條數(shù)據(jù)
this.flag = true;
console.log(id)
// 根據(jù)ID查詢出要編輯的數(shù)據(jù)
var book = this.books.filter(function (item) {
return item.id == id;
});
console.log(book)
// 把獲取到的信息填充到表單
this.id = book[0].id;
this.name = book[0].name;
},
// 4.2刪除按鈕事件處理方法
deleteBook: function (id) {
// 根據(jù)id從數(shù)組中查找元素的索引
var index = this.books.findIndex(function (item) {
return item.id == id;
});
// 根據(jù)索引刪除數(shù)組元素
// index刪除元素的索引 1為刪除個(gè)數(shù)
this.books.splice(index, 1);
}
},
// 七、計(jì)算屬性（統(tǒng)計(jì)圖書總數(shù)）
computed: {
total: function () {
return this.books.length;
}
},
// 八、偵聽器（驗(yàn)證圖書存在性）
watch: {
name: function (val) {
// 驗(yàn)證圖書名稱是否已經(jīng)存在
//some()判斷數(shù)組中有無滿足數(shù)據(jù)
var flag = this.books.some(function (item) {
return item.name == val;
});
if (flag) {
// 圖書名稱存在 禁用提交按鈕
this.submitFlag = true;
} else {
// 圖書名稱不存在 放開提交按鈕，可以提交
this.submitFlag = false;
}
}
},
// 九、生命周期（圖書數(shù)據(jù)處理）
mounted: function () {
// 該生命周期鉤子函數(shù)被觸發(fā)的時(shí)候，模板已經(jīng)可以使用
// 一般此時(shí)用于獲取后臺(tái)數(shù)據(jù)，然后把數(shù)據(jù)填充到模板
var data = [{
id: 1,
name: '三國(guó)演義',
date: 2525609975000
}, {
id: 2,
name: '水滸傳',
date: 2525609975000
}, {
id: 3,
name: '紅樓夢(mèng)',
date: 2525609975000
}, {
id: 4,
name: '西游記',
date: 2525609975000
}];
this.books = data;
}
});
</script>
</body>
</html>
以上就是Vue全家桶入門基礎(chǔ)教程的詳細(xì)內(nèi)容，更多關(guān)于Vue全家桶入門的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue + gojs 實(shí)現(xiàn)拖拽流程圖效果
最近一段時(shí)間在研究go.js,它是一款前端開發(fā)畫流程圖的一個(gè)插件，也是一個(gè)難點(diǎn)，要說為什么是難點(diǎn)，首先，它是依賴畫布canvas知識(shí)開發(fā)，這篇文章主要介紹了vue + gojs 實(shí)現(xiàn)拖拽流程圖,需要的朋友可以參考下2023-03-03
Vue3子組件實(shí)現(xiàn)v-model用法的示例代碼
在Vue 3中,實(shí)現(xiàn)自定義的input組件并支持v-model綁定,涉及到對(duì)modelValue這個(gè)默認(rèn)prop的處理和對(duì)應(yīng)的update:modelValue事件的觸發(fā),本文給大家介紹了Vue3子組件實(shí)現(xiàn)v-model用法的示例,需要的朋友可以參考下2024-04-04
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了vue中props值的傳遞，在vue中父組件要正向的向子組件傳遞數(shù)據(jù)或者參數(shù)，子組件接收到后根據(jù)參數(shù)的不同來進(jìn)行對(duì)應(yīng)的渲染，這個(gè)正向的數(shù)據(jù)傳遞在vue組件中就是通過props來實(shí)現(xiàn)的，需要的朋友可以參考下2009-05-05
Vue3之父子組件異步props數(shù)據(jù)的傳值方式
這篇文章主要介紹了Vue3之父子組件異步props數(shù)據(jù)的傳值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式（Vue2及Vue3區(qū)別）
這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式（Vue2 及 Vue3），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vscode中使用vue的一些插件總結(jié)(方便開發(fā))
對(duì)于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法
下面小編就為大家分享一篇Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例
今天小編就為大家分享一篇vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08