目錄
一、Vue簡介
什么是數據
1、數據驅動視圖
Vue.js 是一個用於創建 Web 交互界面的庫。它讓你通過簡單而靈活的 API 創建由數據驅動的 UI 組件。
Vue.js是一款輕量級的、以數據驅動構建web界面的前端JS框架，它在架構設計上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一個Vue的實例，而這個實例又作用於頁面上的某個HTML元素。
其核心在於通過數據驅動界面的更新和展示而非JS中通過操作DOM來改變頁面的顯示。
上圖的DOM Listeners和Data Bindings是數據驅動中實現數據雙向綁定的關鍵，實際的 DOM 封裝和輸出格式都被抽象為了 Directives 和 Filters; 這也是Vue.js事件驅動的原理所在。
對於View而言，ViewModel中的DOM Listeners工具會幫助我們監聽頁面上DOM元素的變化，一旦有變化，Model中的數據也會發生改變；
對於Model而言，當我們操縱Model中的數據時，Data Bindings工具會幫助我們更改View中的DOM元素。
此外，頁面組件化也是Vue.js的核心，它提供了一種抽象，讓我們可以用獨立可服用的小組件來構建大型應用。
所以，我們搭建的任何一個界面你可以把其抽象成為一個組件樹，充分的去復用它。
2、MVVM架構
Model是每個頁面的單獨數據，View是每個頁面中的HTML結構，VM是調度者；相比於MVC主要做了如下圖示的調整：
優缺點
優點：數據驅動，調度均勻；
缺點：不適合大型項目的架構設計。
3、快速體驗,類選擇[],{}
核心是vm，他是一個Vue實例對象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
background-color: blueviolet;
font-size: 20px;
}
.c2{
color: red;
}
</style>
</head>
<body>
<div id="app">
<button v-bind:class="{c1:islive==1}" v-on:click="index(1)">按鈕1</button>
<button v-bind:class="{c1:islive==2}" v-on:click="index(2)">按鈕2</button>
<button v-bind:class="{c1:islive==3}" v-on:click="index(3)">按鈕3</button>
<button v-bind:class="[c2,{c1:islive==4}]" v-on:click="index(4)">按鈕4</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
islive:1,
c1:"c1",
c2:"c2"
},
methods: {
index(n1) {
this.islive=n1
},
}
})
</script>
</html>
在上面代碼中，我們通過new Vue()構建了一個Vue的實例。
在實例化 Vue 時，需要傳入一個選項對象，它可以包含數據、模板、掛載元素、方法、生命周期鈎子等選項。比如：掛載元素（el）和數據（data），我們可以操縱數據改變視圖。
el表示Vue要操作哪一個元素下面的區域，比如：#app則表示操作id為app的元素下面的區域；
data表示Vue實例的數據對象，data的屬性能夠響應數據的變化；每個 Vue 實例都會代理其 data 對象里所有的屬性。
4、開關燈案例
類似頁面切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
button{
width: 30px;
line-height: 40px;
float: right;
}
.bGroup{
display: block;
content: '';
clear: both;
}
.box{
width: 100vw;
height: 200px;
}
.blueviolet{
background-color: blueviolet;
}
.yellow{
background-color:yellow;
}
.blue{
background-color:blue;
}
button.active{
background-color: cyan;
}
</style>
</head>
<body>
<div id="app">
<div class="bGroup">
<button :class="{active:isShow==='blueviolet'}" @click="index('blueviolet')">紫</button>
<button :class="{active:isShow==='yellow'}" @click="index('yellow')">黃</button>
<button :class="{active:isShow==='blue'}" @click="index('blue')">藍</button>
</div>
<div>
<div v-if="isShow==='blueviolet'" class="box blueviolet"></div>
<div v-else-if="isShow==='yellow'" class="box yellow"></div>
<div v-else class="box blue"></div>
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow:'blueviolet'
},
methods:{
index(n1){
this.isShow = n1
}
}
})
</script>
</html>
5、留言板案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
li:hover{
color: red;
}
</style>
</head>
<body>
<div id="app">
<form>
<input type="text" v-model="info">
<button type="button" @click="index">留言</button>
</form>
<ul>
<li v-for="(info,index) in info_list" v-cloak @click="delInfo(index)">{{info}}</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: '',
info_list: localStorage.info_list ? JSON.parse(localStorage.info_list) :[], // 三元表達， 條件？結果1:結果2
},
methods: {
index() {
if (this.info.length != 0) {
//留言
this.info_list.push(this.info)
//清空輸入框
this.info = ''
// 數據持久化（同步到前端數據庫）
localStorage.info_list = JSON.stringify(this.info_list)
}
},
delInfo(index){
//刪除
this.info_list.splice(index,1)
//刪除同步數據庫
localStorage.info_list = JSON.stringify(this.info_list)
}
}
})
</script>
</html>
二、Vue指令
2.0 屬性指令事件指令簡寫
1）v-bind: 可以簡寫為 :
2）v-on: 可以簡寫為 @
2.1 v-once 指令 只渲染一次
執行一次性地插值，當數據改變時，插值處的內容不會更新。
只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。
<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 組件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
參考：
2.2 v-if，v-else-if,v-else 條件指令
條件指令，原理喝python中一樣，if,else if, else，邏輯只走一個
v-if
v-else-if
v-else
上代碼：
<div id="app">
<div>
<p v-show="isShow">show控制顯隱</p>
<p v-if="isShow">if控制顯隱</p>
</div>
<div>
<p v-if="0">你是第1個p</p>
<p v-else-if="0">你是第2個p</p>
<p v-else>你是第3個p</p>
</div>
</div>
new Vue({
el: '#app',
data: {
isShow: false,
}
})
前端展示結果：你是第3個p
2.3 v-show和v-if的隱藏指令區別
1）語法：v-show="bool值" | v-if="bool值"
2）兩者的區別：
v-show：
1.在隱藏標簽時，采用display:none渲染標簽，標簽通過css隱藏。在前端檢查還是能看見
2.簡單的CSS切換，更高的初始渲染消耗
3.如果頻繁使用，推薦使用
v-if：
1.在隱藏標簽時，不會渲染在頁面上。通過注釋的方式，前端檢查看不見。
2.更高的切換消耗
3.如果需要安全度，推薦使用
v-show 也是條件渲染指令，不同的是有 v-show 的元素會始終渲染並保持在 DOM 中。和v-if指令不同點在於：v-show是根據表達式之真假值，切換元素的 display CSS 屬性，當條件變化時該指令觸發過渡效果。
2.4 v-cloak 斗篷指令
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 `[v-cloak] { display: none }` 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
案例代碼：
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
// 如果沒有斗篷指令隱藏屬性，代碼加載到這里num對應的值還沒有加載出來，而當下面的num加載出來的時候，屏幕就會出現閃一下
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!-- 避免頁面閃爍-->
2.5 v-bind 屬性指令
動態地綁定標簽中的一個或多個屬性，或一個組件 prop 到表達式。v-bind指令可以在其名稱后面帶一個參數，中間用一個冒號隔開。這個參數通常是HTML元素的特性（attribute），比如：
v-bind:src="imageSrc" 可以縮寫： :src="imgaeSrc"
:class="{ red: isRed }" 或 :class="[classA, classB]" ...
:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...
綁定一個有屬性的對象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"
語法結構：v-bind:argument="expression"
<!-- a是變量，值就是類名 | b就是類名，不是變量 | c是變量，值為布爾，決定b類是否起作用 -->
<p v-bind:class="[a, {b: c}]"></p>
因為 Mustache 不能在 HTML 屬性中使用，應使用 v-bind 指令，Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優勢在於可以應用在 Javascript、PHP、Python、Perl 等多種編程語言中。
語法糖為冒號（：）
2.6 v-on 事件指令
動態地綁定一個或多個特性，或一個組件 prop 到表達式；其作用和v-bind類似。注意：如果用在普通元素上時，只能監聽 原生 DOM 事件；但是如果用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。
常用的修飾符包括：
- .stop - 調用 event.stopPropagation()；停止冒泡。
- .prevent - 調用 event.preventDefault(); 停止監聽原生事件。
- .capture - 添加事件偵聽器時使用 capture 模式。
- .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
- .{keyCode | keyAlias} - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
- .once - 觸發一次。
2.7 v-model 表單指令
v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。
盡管有些神奇，但v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
v-model在內部為不同的輸入元素使用不同的屬性並拋出不同的事件：
- text 和 textarea 元素使用
value屬性和input事件； - checkbox 和 radio 使用
checked屬性和change事件； - select 字段將
value作為 prop 並將change作為事件。
2.8 v-for 循環指令
基於數據渲染一個列表，類似於JS中的遍歷。其數據類型是可迭代類型。和python中for循環一樣
* 1）語法：v-for="ele in obj" obj是被遍歷的對象，ele是遍歷得到的每一次結果
* 2）遍歷可迭代對象的首要結果，都是可迭代對象容器中的值，其次還可以遍歷得到索引及鍵等數據
* 字符串：v-for="v in str" | v-for="(v, i) in str"
* 數組：v-for="v in arr" | v-for="(v, i) in arr"
* 對象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
* 注：v-for遍歷要依賴於一個所屬標簽，該標簽及內部所有內容會被遍歷復用
上代碼：
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以為數組索引指定別名 (或者用於對象的鍵)：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-for 的默認行為會嘗試原地修改元素而不是移動它們。要強制其重新排序元素，你需要用特殊屬性 key 來提供一個排序提示：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
遍歷字符串：
第一個參數：e 代表值
第二個參數：i 代表索引
<p>
<i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
</p>
new Vue({
el: '#app',
data: {
d1: 5,
d2: 'abc',
d3: [1, 3, 5],
d4: {
name: "Bob",
age: 17.5,
gender: "男"
}
}
})
遍歷數組：
第一個參數：e 代表值
第二個參數：i 代表索引
<p>
<i v-for="e in d3">【{{ e }}】</i>
</p>
<p>
<i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
</p>
new Vue({
el: '#app',
data: {
d1: 5,
d2: 'abc',
d3: [1, 3, 5],
d4: {
name: "Bob",
age: 17.5,
gender: "男"
}
}
})
遍歷字典對象：
第個參數：e 代表值
第二個參數：k 代表key
第三個參數：i 代表索引
<p>
<i v-for="e in d4">【{{ e }}】</i>
</p>
<p>
<i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
</p>
<p>
<i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
</p>
2.9 v-text 文本指令
v-text：向標簽中注入文本，且會替換掉元素之前的內容。；
類似innerText。
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
2.10 v-html 指令
雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：
<div v-html="html"></div>
參考：數據綁定語法 - 插值
通過v-html會把文本解析成html文本，有樣式的話，會直接出來樣式。
類似JavaScript中的innerHTML。
使用手法：
> <!-- 方法處理器 -->
>
> <button v-on:click="doThis"></button>
>
> <!-- 內聯語句 -->
>
> <button v-on:click="doThat('hello', $event)"></button>
>
> <!-- 縮寫 -->
>
> <button @click="doThis"></button>
>
> <!-- 停止冒泡 -->
>
> <button @click.stop="doThis"></button>
>
> <!-- 阻止默認行為 -->
>
> <button @click.prevent="doThis"></button>
>
> <!-- 阻止默認行為，沒有表達式 -->
>
> <form @submit.prevent></form>
>
> <!-- 串聯修飾符 -->
>
> <button @click.stop.prevent="doThis"></button>
>
> <!-- 鍵修飾符，鍵別名 -->
>
> <input @keyup.enter="onEnter">
>
> <!-- 鍵修飾符，鍵代碼 -->
>
> <input @keyup.13="onEnter">
>
> <!-- the click event will be triggered at most once -->
>
> <button v-on:click.once="doThis"></button>
語法糖為（@）
2.11 樣式綁定
兩種方式綁定屬性：
1. 通過class綁定
2. 通過style綁定
**總結：**
**通過對象綁定時，是樣式value**
**通過數組綁定時，是樣式key**
**為什么會這樣？數據返回的是一個對象，針對數組內的每個值通過key獲取真正的value，並綁定到class上。**
**凡是希望外界控制的，都要做成屬性，靈活改變，組件也就活了。**
**通過:atrr進行綁定的屬性，后面不是字符串了，而是JavaScript表達式了<div :class="oneClass">樣式類可以是字符串</div>，oneClass不是字符串，而是oneClass的值。**
2.12 key 綁定
<ul>
<li v-for="item in items" :key="item.id">...</li>
</u>
當show變化的時候，vue會判斷頁面上是否有同樣元素可以復用。上面例子如果我們在用戶名input框里面輸入了內容，再將show切換為false的時候，你會發現input框里面內容沒有變化。
原因就是vue進行了元素復用。
例如：
<transition>
<span :key="text">{{ text }}</span>
</transition>
當 text 發生改變時，<span> 總是會被替換而不是被修改，因此會觸發過渡。
注意：key盡量不要使用index，使用數據的id或其他字段，效率更高。
可以使用第三方插件：shortid
npm i shortid --save
三、JS補充內容,元組的增刪改
splice增刪改萬能方法
splice:是做刪除 插入 替換用的
let arr = [1, 2, 3];
// 參數：開始索引，操作長度，操作的結果們，splice函數可以完成增刪改插所有功能
arr.splice(1, 2);
1:刪除的功能
splice(index,count)
參數:
index:開始位置的索引
count:要刪除元素的個數
返回:返回的是包含被刪除元素的數組對象
2:插入功能
splice(index,0,插入的項)
參數
index:插入元素的索引值
3:替換功能
splice(index,num,value)
index:開始的索引位置
num:刪除項的數(如果num為0，就是插入功能)
value:插入的值
返回:返回的是包含被刪除的元素的數組對象
1、 數組的7個方法
pop：刪除最后一個元素
push：插入到數組尾部
shift：刪除數組的第一個元素
unshift：插入到數組的頭部
splice：刪除元素
sort：數組排序
reverse：數組翻轉
2、數組和對象的遍歷
v-for="(item,index) in list"
v-for="(value,key,index) in object"
3、改變數組或對象內容的方法
使用數組的方法：vm.list.splice(index,1,{id:'111',name:'xq'})立馬生效
改變數組引用的方法：vm.list = [{id:1,name:'qq'},{id:2,name:'qx'}]立馬生效
通過Vue.set方法：vue.set(vm.list,index,{id:3,name:'qy'})立馬生效
通過vm.$set方法：vm.$set(vm.list,index,{id:3,name:'qy'})立馬生效
直接修改對象內容：vm.object.name='qqq'，注意，新增一個{key:value}在頁面上是不起作用的，他不會重新渲染。
改變對象引用的方法：vm.object={name:'qqq',age:23} 立馬生效
通過Vue.set方法：vue.set(object,sex,'male'),立馬生效
通過vm.$set（object,sex,'male'）立馬生效
4、vue中的屬性
<counter counter="0"></counter> //屬性前面不加冒號，0為字符串
<counter :counter="0"></counter> //屬性面前加冒號，0為數字，因為他解析js的表達式
5、前台數據庫
"""
// 存
// 持久化化存儲，永遠保存
localStorage.name = "Bob";
// 持久化化存儲，生命周期同所屬標簽(頁面)，頁面關閉，重新打開就會丟失
sessionStorage.name = "Tom";
// 取
console.log(localStorage.name);
console.log(sessionStorage.name);
// 清空
localStorage.clear();
sessionStorage.clear();
// 短板：只能存儲字符串，所有對象和數組需要轉換為json類型字符串，再進行存儲
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""
案例：留言板
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
<div id="app">
<form>
<input type="text" v-model="info">
<button type="button" @click="sendInfo">留言</button>
</form>
<ul>
<li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{ info }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '',
// 三目運算符： 條件 ? 結果1 : 結果2
info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
},
methods: {
sendInfo () {
// 完成留言：將info添加到info_arr
// 增 push unshift | 刪 pop shift
if (this.info) {
// 留言
this.info_arr.push(this.info);
// 清空輸入框
this.info = '';
// 前台數據持久化(緩存)
localStorage.info_arr = JSON.stringify(this.info_arr);
}
},
deleteInfo(index) {
// 刪
this.info_arr.splice(index, 1);
// 同步給數據庫
localStorage.info_arr = JSON.stringify(this.info_arr);
}
}
})
</script>
四、鼠標事件
@click="click" ////單擊
@mousedown="down" ////按下
@mouseup="up" ////抬起
@dblclick="dblclick" ////雙擊
@mousemove="move" ////移動
@mouseleave="out" ////離開
@mouseout ="out" ////移出
@mouseenter="enter" ////進入
@mouseover="enter" ////在
五、鍵盤事件
@keydown（鍵盤按下時觸發），
@keypress(鍵盤按住時觸發)，
@keyup(鍵盤彈起)
獲取按鍵的鍵碼 e.keyCode
@keyup.13 按回車鍵
@keyup.enter 回車
@keyup.up 上鍵
@keyup.down 下鍵
@keyup.left 左鍵
@keyup.right 右鍵
@keyup.delete 刪除鍵
六、JS對象補充
1.普通對象與對象簡寫
// 1）js沒有字典類型，只有對象類型，對象可以完全替代字典來使用
// 2）js中對象的屬性名，都采用字符串類型，所以就可以省略字符串的引號標識
// 3）對象中屬性值為函數時，稱之為方法，方法建議簡寫: 方法名(){}
// 4）如果對象的屬性值是一個變量，且變量名與屬性名相同，還可以簡寫：{屬性,}
var dic_obj = {
// 屬性：值（數值，函數）
'name': 'Bob',
'eat': function () {
console.log('在吃飯')
}
};
console.log(dic_obj.name, dic_obj['name']);
dic_obj.eat(); dic_obj['eat']();
// 屬性省略引號，方法簡寫
var obj = {
name: 'Tom',
eat () {
console.log('在吃飯...')
}
};
console.log(obj.name, obj['name']);
obj.eat(); obj['eat']()
// 屬性變量簡寫
var height = 180;
var p = {
height,
name: 'Jerry',
eat() {}
};
console.log(p.name, p.height);
2.第一種類（了解）
// 第一種聲明類的方法
class People {
constructor (name) {
this.name = name
}
eat () {
console.log(this.name + '在吃飯')
}
}
let p1 = new People('Bob');
let p2 = new People('Tom');
console.log(p1.name, p2.name);
p1.eat();
第二種類（了解）
// 第二種聲明類的方法(難點)：在函數內部出現了this語法，該函數就是類，否則就是普通函數
function Teacher(name) {
this.name = name;
this.eat =function () {
console.log(this.name + '在吃飯')
}
}
let t1 = new Teacher('Owen');
t1.eat();
類屬性
// 類屬性：給類屬性賦值，所有對象都能訪問
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
// 賦值類屬性
Fn.prototype.num = 100;
console.log(f1.num);
console.log(f2.num);
// 類似於單例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);
js函數補充
// 1）函數的形參與調用時傳入的實參關系（你傳你的，我收我的）
// 傳入和接受的參數個數不需要一致
// 但是一定按位進行賦值（沒有關鍵字參數）
// 沒有接收的實參會被遺棄，沒有被賦值的形參會被賦值為undefined
function fn1(a, b) {
console.log(a, b);
return a + b;
}
let res = fn1(10, 20, 30);
console.log(res);
// 2）函數定義的演變
let fn2 = function (a, b) {
return a + b;
};
// 省略關鍵字的箭頭函數
let fn3 = (a, b) => {
return a + b;
};
// 沒有函數體，只有返回值的函數，可以省略作用域{}，由於只有返回值，所以return也省略
let fn4 = (a, b) => a + b;
console.log(fn4(11, 22));
// 如果形參只有一個時，聲明參數的()也可以省略
let fn5 = num => num * num;
console.log(fn5(3));
// 弱語言
console.log(10 + '5');
console.log(10 - '5');
console.log(+'55555');
七、computed和methods和watch
computed：計算屬性，可以完成各種復雜的邏輯。具有緩存功能
methods：也可以寫邏輯，寫函數方法。
watch：監聽，當監聽的值發送改變，就執行任務。
監聽到一個物品價格的改變，會導致總價的改變，就會重新計算一次
computed和methods區別？
computed中自帶監聽機制，時時更新
methods中只有頁面加載的時候執行一次
案例：computed計算器
<div id="app">
<!-- type="number"表示只能寫數字 -->
<input type="number" v-model="num1" max="100" min="0">
+
<input type="number" v-model="num2" max="100" min="0">
=
<button>{{ sum }}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
// sum: '', // 重復聲明
num1: '',
num2: '',
},
computed: {
sum () {
// num1和num2都在該方法屬性中，所以有一個更新值，該方法都會被調用
if (this.num1 && this.num2) {
return +this.num1 + +this.num2; // +this.num1是將字符串快速轉換澄數字
}
return '結果';
}
}
})
</script>
案例：watch姓名拆分
<div id="app">
姓名：<input type="text" v-model="full_name">
<hr>
姓：<button>{{ first_name }}</button>
名：<button>{{ last_name }}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知'
},
watch: {
full_name () {
if (this.full_name) {
this.first_name = this.full_name.split('')[0];
this.last_name = this.full_name.split('')[1];
} else {
this.first_name = '未知';
this.last_name = '未知';
}
}
}
})
</script>
八、Local Storage和Session Storage
前端的兩個數據庫：
js語法：
永久持久化數據：存
localStorage.name = "jeff"
臨時持久化數據：（頁面關閉，重新打開，數據消失）
sessionStorage.name = "tom"
取：
console.log(localStorage.name)
console.log(sessionStorage.name)
清空數據：
localStorage.clear()
sessionStorage.clear()
短板：只能存字符串，如果要存對象和數據需要轉換為json字符串再進行存