溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue全家桶入門基礎(chǔ)的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Vue(讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。
漸進(jìn)式: 聲明式渲染→組件系統(tǒng)→客戶端路由→集中式狀態(tài)管理→項目構(gòu)建
可以使用其中的一個或者多個
優(yōu)點(diǎn):
易用：熟悉HTML，CSS.JavaScript知識后，可快速上手Vue
靈活：在一個庫和一套完整框架之間自如伸縮
高效：20kB運(yùn)行大小，超快虛擬DOM
//原生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>引入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庫文件
3、可以使用vue的語法做功能了
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>
1. 實(shí)例參數(shù)分析
el：元素的掛載位置（值可以是CSS選擇器或者DOM元素）關(guān)聯(lián)起來
data：模型數(shù)據(jù)（值是一個對象）
methods，該屬性用于在Vue對象中定義方法。
2.插值表達(dá)式用法
將數(shù)據(jù)填充到HTML標(biāo)簽中
插值表達(dá)式支持基本的計算操作
3. Vue代碼運(yùn)行原理分析
概述編譯過程的概念（Vue語法經(jīng)過Vue框架編譯成原生JS語法,才能夠被瀏覽器執(zhí)行）
前端渲染:把數(shù)據(jù)填充到HTML標(biāo)簽中
前端渲染方式:
原生js拼接字符串
使用前端模板引擎
使用vue特有的模板語法(推薦)
原生js拼接字符串基本上就是將數(shù)據(jù)以字符串的方式拼接到HTML標(biāo)簽中。
缺點(diǎn)：不同開發(fā)人員的代碼風(fēng)格差別很大，隨著業(yè)務(wù)的復(fù)雜，后期的維護(hù)變得逐漸困難起來。
使用前端模板引擎是基于模板引擎art-template的一段代碼，與拼接字符串相比，代碼明顯規(guī)范了很多，它擁有自己的一套模板語法規(guī)則。
優(yōu)點(diǎn)：大家都遵循同樣的規(guī)則寫代碼，代碼可讀性明顯提高了，方便后期的維護(hù)。
缺點(diǎn)：沒有專門提供事件機(jī)制。
插值表達(dá)式 {{變量}}
使用'mustache'語法 {
{ msg }}（雙花括號）
mustache 標(biāo)簽將會被替換為 data 對象上對應(yīng)的 msg 屬性的值。
只要綁定的數(shù)據(jù)對象上的 msg 屬性發(fā)生改變，插值內(nèi)容也會隨之更新。
<div id="app">
<!-- this 指向 vm -->
<p> {{ msg }} </p>
</div>
<script>
var vm = new Vue({
el: ‘#app',
data: {
msg: 'hello vue.js'
}
})
</script>模板語法概述
插值表達(dá)式
指令
事件綁定
屬性綁定
樣式綁定
分支循環(huán)結(jié)構(gòu)
1.什么是指令?
自定義屬性：如在html5中定義，屬性均可隨意命名。
指令的本質(zhì)就是自定義屬性
指令的格式：以v-開始（比如：v-cloak）
2.v-cloak指令用法
插值表達(dá)式存在的問題：“閃動”
如何解決該問題：使用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á)式類似，但是沒有閃動問題
v-html填充HTML片段
用于將HTML片段填充到標(biāo)簽中，但是可能有安全問題
v-pre填充原始信息
顯示原始信息，跳過編譯過程（分析編譯過程）
//03-數(shù)據(jù)填充相關(guān)3個指令用法.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: '<h2>HTML</h2>'
}
});
</script>
</body>
</html>
4.數(shù)據(jù)響應(yīng)式
如何理解響應(yīng)式
html5中的響應(yīng)式（屏幕尺寸的變化導(dǎo)致樣式的變化）
數(shù)據(jù)的響應(yīng)式（數(shù)據(jù)的變化導(dǎo)致頁面內(nèi)容的變化）
數(shù)據(jù)綁定：將數(shù)據(jù)填充到標(biāo)簽中,默認(rèn)是響應(yīng)式的
v-once只編譯一次，顯示內(nèi)容之后不再具有響應(yīng)式功能
v-once的應(yī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">
<h3>{{message}}</h3>
<h3 v-once>{{message}}</h3>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊"
}
})
</script>
</body>
</html>
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、從頁面(用戶)到數(shù)據(jù)
2、從數(shù)據(jù)到頁面 */
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
當(dāng)我們在輸入框輸入內(nèi)容時,因為input中的v-model綁定了msg，所以會實(shí)時將輸入的內(nèi)容傳遞給msg，msg發(fā)生改變。
當(dāng)msg發(fā)生改變時，因為上面我們使用Mustache語法，將msg的值插入到DOM中，所以DOM會發(fā)生響應(yīng)的改變。
3.MVVM設(shè)計思想
MVVM是Model-View-ViewModel的簡寫。它本質(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ò)上請求下來的數(shù)據(jù)。
VueModel層：視圖模型層
視圖模型層是View和Model溝通的橋梁。
一方面它通過Data Binding（數(shù)據(jù)綁定），將Model的改變實(shí)時的反應(yīng)到View中
另一方面它通過DOM Listener（DOM監(jiān)聽），當(dāng)DOM發(fā)生一些事件(點(diǎn)擊、滾動、touch等)時，可以監(jiān)聽到，并在需要的情況下改變對應(yīng)的Data。
1.Vue如何處理事件？
v-on指令用法:用于綁定HTML事件,如鼠標(biāo)點(diǎn)擊事件
當(dāng)前button綁定鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊則調(diào)用doSomething方法
在這里doSomething() 是一個函數(shù),可以寫在methods的方法中,供該標(biāo)簽調(diào)用.
<button v-on:click="doSomething">...</button>
v-on語法糖(簡寫形式)@
<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í)例對象
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)會傳遞事件對象作為事件函數(shù)的第一個參數(shù) -->
<button v-on:click='handle1'>點(diǎn)擊1</button>
<!-- 2、如果事件綁定函數(shù)調(diào)用，那么事件對象必須作為最后一個參數(shù)顯示傳遞，
并且事件對象的名稱必須是$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 href="http://www.baidu.com" @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鍵的時候，清空用戶名
this.uname = '';
},
handleSubmit: function(){
console.log(this.uname,this.pwd)
}
}
});
</script>
</body>
</html>
6.自定義按鍵修飾符
全局config.keyCodes 對象
規(guī)則：自定義按鍵修飾符名字是自定義的，但是對應(yīng)的值必須是按鍵對應(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>
案例:簡單計算器
需求：實(shí)現(xiàn)簡單的加法計算，分別輸入數(shù)值a和數(shù)值，點(diǎn)擊計算按鈕，結(jié)果顯示在下面。
步驟:
通過v-model指令實(shí)現(xiàn)數(shù)值a和數(shù)值b的綁定
給計算按鈕綁定事件，實(shí)現(xiàn)計算邏輯
將計算結(jié)果綁定到對應(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">
<h3>簡單計算器</h3>
<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'>計算</button></div>
<div>計算結(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)計算邏輯 表單輸入默認(rèn)是字符串 加this很重要
this.result = parseInt(this.a) + parseInt(this.b)
}
}
})
</script>
</body>
</html>
1.Vue如何動態(tài)處理屬性？
v-bind是處理HTML中的標(biāo)簽屬性的，例如
就是一個標(biāo)簽，也是一個標(biāo)簽，我們綁定上的src進(jìn)行動態(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>
1. class樣式處理
對象語法
<div v-bind:class="{ active: isActive }"></div>數(shù)組語法
<div v-bind:class="[activeClass, errorClass]"></div>
//14-樣式綁定之class綁定對象用法.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}">測試樣式</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]'>測試樣式</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個細(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}]'>測試樣式</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)語法細(xì)節(jié)：
1、對象綁定和數(shù)組綁定可以結(jié)合使用
2、class綁定的值可以簡化操作
3、默認(rèn)的class如何處理？默認(rèn)的class會保留
*/
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樣式處理
對象語法
<div v-bind:></div>
數(shù)組語法
<div v-bind:></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>
1.分支結(jié)構(gòu)
v-if
v-else
v-else-if
v-show
2.v-if與v-show的區(qū)別
v-if控制元素是否渲染到頁面
v-show控制元素是否顯示（已經(jīng)渲染到了頁面）
v-if當(dāng)條件為false時，壓根不會有對應(yīng)的元素在DOM中。v-show當(dāng)條件為false時，僅僅是將元素的display屬性設(shè)置為none而已
當(dāng)需要在顯示與隱藏之間切換很頻繁時，使用v-show.當(dāng)只有一次切換時，通過使用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'>測試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的語法類似于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ū)分不同的元素對開發(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遍歷對象
<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>
v-model
v-model指令來實(shí)現(xiàn)表單標(biāo)簽內(nèi)容的雙向綁定.如表單元素和數(shù)據(jù)的雙向綁定
v-model只能用于表單類型，就是輸入性控件，其他控件不能用，用v-bind
一個input標(biāo)簽綁定了msg這個變量，那么只要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)簽自帶屬性的值是固定的，在為了能夠動態(tài)的給這些屬性添加值，可以使用v-bind 例如是一個標(biāo)簽，我們綁定上的src進(jìn)行動態(tài)賦值。
<img :src='msg'>
步驟:
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模板語法的形式
處理事件綁定和js控制邏輯
3.聲明式編程
模板的結(jié)構(gòu)和最終顯示的效果基本一致
//21-選項卡案例.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, //選項卡當(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)選項卡切換操作:操作類名,通過currentIndex
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
表單操作
自定義指令
計算屬性
過濾器
偵聽器
生命周期
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">請選擇職業(yè)</option>
<option value="1">教師</option>
<option value="2">軟件工程師</option>
<option value="3">律師</option>
</select>
</div>
<div>
<span>個人簡介：</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>
1.為何需要自定義指令?
內(nèi)置指令不滿足需求
2.自定義指令的語法規(guī)則(獲取元素焦點(diǎn))
//注冊一個全局自定義指令'v-focus'
//focus為指令名稱 調(diào)用時加v-
Vue.directive('focus'{
//當(dāng)被綁定非的元素插入到DOM中時調(diào)用
inserted:function(el){
//獲取元素的焦點(diǎn)
el.focus()
}
})3.自定義指令用法
<input type="text" v-focus>
一個指令定義對象可以提供如下幾個鉤子函數(shù)（均為可選）：
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用，在這里可以進(jìn)行一次性的初始化設(shè)置。
inserted：被綁定元素插入父節(jié)點(diǎn)時調(diào)用（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中）。
指令鉤子函數(shù)會被傳入以下參數(shù)：
e1：指令所綁定的元素，可以用來直接操作DOM.
binding：一個對象，包含以下屬性：
name：指令名，不包括v-前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1"中，綁定值為2
oldvalue：指令綁定的前一個值，僅在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ù)的自定義指令(改變元素背景色)
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>
1.為何需要計算屬性?
Vue中的computed屬性被稱為計算屬性,計算屬性是寫在實(shí)例的computed選項
表達(dá)式的計算邏輯可能會比較復(fù)雜,使用計算屬性可以使模板內(nèi)容更加簡介
2.計算屬性的用法
computed: {
reverseString: function(){
return this.msg.split('').reverse().join('');
}
}//06-計算屬性基本用法.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.計算屬性和方法的區(qū)別
計算屬性是基于它們的依賴進(jìn)行緩存,如果多次使用時，計算屬性只會調(diào)用一次,性能上計算屬性明顯比methods好,如果依賴改變則重新緩存
方法不緩存
//07-計算屬性與方法的區(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>
1. 偵聽器的應(yīng)用場景
數(shù)據(jù)變化時執(zhí)行異步或開銷較大(比較耗時)的操作
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>
案例:驗證用戶名是否可用
需求：輸入框中輸入姓名，失去焦點(diǎn)時驗證是否存在，如果已經(jīng)存在，提示從新輸入，如果不存在，提示可以用。
需求分析:
通過v-model實(shí)現(xiàn)數(shù)據(jù)綁定
需要提供提示信息
需要偵聽器監(jiān)聽輸入信息的變化
需要修改觸發(fā)的事件
偵聽器
1、采用偵聽器監(jiān)聽用戶名的變化
2、調(diào)用后臺接口進(jìn)行驗證
3、根據(jù)驗證的結(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)用接口,但是可以使用定時任務(wù)的方式模擬接口調(diào)用
var that = this;
setTimeout(function () {
//模擬接口調(diào)用
if (uname == 'admin') {
that.tip = '用戶名已經(jīng)存在,請更換一個';
} else {
that.tip = '用戶名可以使用'
}
}, 1000)
}
},
watch: {
uname: function (val) {
//調(diào)用后臺接口驗證用戶名的合法性
this.checkName(val);
//修改提示信息
this.tip = '正在驗證中...'
}
}
});
</script>
</body>
</html>
1.過濾器的作用是什么？
格式化數(shù)據(jù)，比如將字符串格式化為首字母大寫，將日期格式化為指定的格式等
2.全局過濾器
Vue.filter('過濾器名稱',function(value){
//過濾器業(yè)務(wù)邏輯
})3.過濾器的使用
<div>{{msg |upper}}</div>//upper為過濾器名稱
<div>{{msg |upper | lower}}</div>//級聯(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'>測試數(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ù)的過濾器
Vue.filter('format',function(value,arg){
//從arg開始接收參數(shù)
})6.過濾器的使用
<div>{{data | format('yyyy-MM-dd')}}</div>案例:使用過濾器格式化時期
//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(), //小時
"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>
生命周期:事物從誕生到消亡的整個過程
vue的生命周期:每個Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個過程就是.beforeCreate()創(chuàng)建之前
生命周期鉤子：就是可以讓你在頁面生成的不同階段執(zhí)行動作的api，作用就是只要頁面到了這個階段就會觸發(fā)這個對應(yīng)鉤子里的js
1.主要階段
掛載（初始化相關(guān)屬性）
beforeCreatecreatedbeforeMountmounted
更新（元素或組件的變更操作）
beforeUpdateupdated
銷毀（銷毀相關(guān)屬性）
beforeDestroydestroyed
2.Vue實(shí)例的產(chǎn)生過程
eforeCreate在實(shí)例初始化之后，數(shù)據(jù)觀測和事件配置之前被調(diào)用。
created在實(shí)例創(chuàng)建完成后被立即調(diào)用。
beforeMount在掛截開始之前被調(diào)用。
mounted el被新創(chuàng)建的vm.Sel替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。
beforeUpdate數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前。
updated由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子
beforeDestroy實(shí)例銷毀之前調(diào)用。
destroyed實(shí)例銷段后調(diào)用。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-biZCGRVM-1620742265770)(Vue全家桶之Vue基礎(chǔ).assets/5.15.png)]
案例:圖書管理
1.數(shù)組相關(guān)API:變異方法（修改數(shù)組）
push()
pop()末尾刪除
shift()
unshift()
splice()刪除指定元素
sort()排序
reverse()
2.數(shù)組相關(guān)API:替換數(shù)組(生成新的數(shù)組)
filter()
concat()
slice()從已有的數(shù)組中選定元素,返回一個新的數(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ù)組的索引/對象的屬性名
參數(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)用場景
過濾器（格式化日期）自定義指令（獲取表單焦點(diǎn)）計算屬性（統(tǒng)計圖書總數(shù)）偵聽器（驗證圖書存在性）生命周期（圖書數(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>
<h2>圖書管理</h2>
<!--二、添加圖書 -->
<div class="book">
<div>
<!-- 2.1添加圖書表單域數(shù)據(jù)綁定 -->
<label for="id">
編號：
</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>編號</th>
<th>名稱</th>
<th>時間</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(), //小時
"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ù)組中對應(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為刪除個數(shù)
this.books.splice(index, 1);
}
},
// 七、計算屬性（統(tǒng)計圖書總數(shù)）
computed: {
total: function () {
return this.books.length;
}
},
// 八、偵聽器（驗證圖書存在性）
watch: {
name: function (val) {
// 驗證圖書名稱是否已經(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ā)的時候，模板已經(jīng)可以使用
// 一般此時用于獲取后臺數(shù)據(jù)，然后把數(shù)據(jù)填充到模板
var data = [{
id: 1,
name: '三國演義',
date: 2525609975000
}, {
id: 2,
name: '水滸傳',
date: 2525609975000
}, {
id: 3,
name: '紅樓夢',
date: 2525609975000
}, {
id: 4,
name: '西游記',
date: 2525609975000
}];
this.books = data;
}
});
</script>
</body>
</html>
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue全家桶入門基礎(chǔ)的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼