什麼是vue.js
Vue是目前前端開發中最流行的一個MVVM框架。
Vue是一套用於構建用戶界面的漸進式的自底層向上增量開發的MVVM框架。
MVVM框架：
漸進式：可以在原有項目上一兩個功能使用Vue，或者整個項目全部使用Vue，Vue不會做職責之二愛的事情。
自底層向上開發：（先把基礎頁面寫好，然後再一一的添加各種功能，從簡單到複雜的一個過程） 有點像二階段的漸進增強。
Vue優點：
- 輕量級
- 高效率
- 上手快
理解MVC MVVM MVP等思想
框架：就是封裝了很多與業務無關的重複代碼
框架優勢：使用框架可以大大提升我們的開發效率
MVC：是一個思想演變出來的MVC框架
M：模型(model) 就是數據
V：視圖(view)前端展示(用戶可以看到的界面)
C：控制器(controller) 負責觸發和接受數據的傳遞
爲什麼學習MVC？
比較主流的設計思想，在MVC思想下，沒有dom操作，把數據獨立出來，方便管理。
把業務邏輯、數據、界面展示獨立出來方便我們後續開發於測試
MVVM
View層：
- 視圖層
- 在我們前端開發中，通常就是DOM層。
- 主要的作用是給用戶展示各種信息。
Model層：
- 數據層
- 數據可能是我們固定的死數據，更多的是來自我們服務器，從網絡上請求下來的數據。
VueModel層：
- 視圖模型層
- 視圖模型層是View和Model溝通的橋樑。
- 一方面它實現了Data Binding，也就是數據綁定，將Model的改變實時的反應到View中
- 另一方面它實現了DOM Listener，也就是DOM監聽，當DOM發生一些事件(點擊、滾動、touch等)時，可以監聽到，並在需要的情況下改變對應的Data。
有了Vue幫助我們完成VueModel層的任務，在後續的開發，我們就可以專注於數據的處理，以及DOM的編寫工作了。
MVP
M：模型(model) 就是數據
V：視圖(view)前端展示(用戶可以看到的界面)
P：表示器(presenter) 負責調控M與V之間的間接交互
如何利用Vue將hello world 渲染到頁面上
1.需要提供標籤用於填充數據
注意：在標籤中我麼使用插值語法的形式，即{{}}進行填充數據
2.引入vue.js庫文件
注意：一定要先引入vue文件，在使用vue語法；因爲存在作用域的問題
3.使用vue的語法做功能
new Vue() 創建一個vue的實例
在構造函數中以對象的形式做一些配置
4.利用vue將數據渲染到頁面中
數據寫在data裏面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue基本使用</title>
</head>
<body>
<!-- 1、需要提供標籤用於填充數據 -->
<div id="app">
<!-- 4.Vue管理的數據都是寫在這個dome容器裏面
模塊語法 {{}} =>數據插入到頁面中使用-->
<p>{{msg}}</p>
</div>
</body>
<!-- 2、引入vue.js庫文件 -->
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
// 3、使用vue的語法做功能
const vm=new Vue({
el:'#app', //該屬性決定了這個Vue對象掛載到哪一個元素上
data:{
msg:'hello world',
}
})
</script>
</html>
vue擴展知識：
在vue中核心就是可以讓我們使用簡單的模板語法：聲明式的對數據進行渲染
vue是聲明式渲染=>只需要告訴程序我們想要什麼效果，至於數據的插入全部交給程序解決
命令式渲染=>命令我們的程序如何一步一步的執行
數據驅動=>通過vm視圖模型來控制數據的變化 讓數據隨着內容的改變而改變
模板語法注意：
1.不要在模板語法中寫太複雜的表達式
2.在模板語法中如果一個內容被雙引號包裹會被當成字符串原樣輸出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue模塊語法插入其他數據類型</title>
</head>
<body>
<!-- 1.創建視圖 view -->
<div id="demoDiv">
<!-- vue是聲明式渲染=>只需要告訴程序我們想要什麼效果，至於數據的插入全部交給程序解決 -->
<!-- 3.Vue管理的數據都是寫在這個dome容器裏面
{{}}數據插入到頁面使用 -->
<h2>插入字符串：{{text}}</h2>
<h2>插入數字：{{num}}</h2>
<h2>運算符使用：{{num*num1}}</h2>
<h2>布爾：{{bool}}</h2>
<!-- 三元運算符 -->
<h2>三元運算符：{{bool ? "bool真的":"bool假的"}}</h2>
<h2>數組：{{arr}}</h2>
<h2>數組1：{{arr[1]}}</h2>
<h2>對象：{{obj}}</h2>
<h2>對象：{{obj.name}}</h2>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<!-- 2. 創建VM -->
<script>
new Vue({
el:'#demoDiv', /*視圖 元素的掛載位置*/
data:{ /*M層 模型數據*/
text:'我是字符串',
num:4,
num1:5,
bool:false,
arr:["小米","大米","紅米"],
obj:{
name:'xixi',
age:18
}
}
})
</script>
</html>
指令
什麼是指令
1.指令就是HTML特殊屬性
HTML屬性是什麼
就是卸載HTML中的開標籤中 以屬性="屬性值"的寫法完成的 他的作用是用來擴展HTML標籤的功能
2.Vue中指令都是以 v- 開頭
爲什麼會有閃爍問題？
代碼加載的時候先加載HTML 把插值語法當做HTML內容加載到頁面上 當加載完js後才把插值語法替換掉 所以我們會看到閃爍問題
如何解決插值語法的閃爍問題？
v-cloak
v-cloak指令
v-cloak的用法：
1.提供樣式
[v-vloak]{diaplay:none}
2.在插值表達式裏的標籤中添加v-cloak指令
背後的原理：先通過樣式隱藏內容，然後在內存中進行值的替換，替換好之後再顯示最終的結果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-cloak</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
msg:'hello vue',
}
})
</script>
</html>
v-once
作用：只渲染元素和組件一次。這可以用於優化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-once</title>
<style>
</style>
</head>
<body>
<div id="app">
<p v-once>{{info}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
info:'數據不需要修改'
}
})
</script>
</html>
v-model
作用：用於在<input>、<select>、<textarea>、components（組件） 中 關聯模型數據 從而實現雙向數據綁定
語法：寫在需要綁定的表單元素的開標籤中 v-model=”綁定的變量”
注意：當前這個指令 必須必須必須綁定到表單元素上
雙向數據綁定:把模型數據綁定到視圖中 如果綁定的數據在視圖中發生了改變 模型也隨之發生改變 ，模型改變了視圖也隨之發生改變
雙向數據綁定的原理？？？
vue雙向數據綁定是通過數據劫持於發佈者-訂閱者模式的方式來進行實現的
數據劫持：就是在我們訪問或者是設置對象的屬性的時候，會觸發Object.defineProperty()函數來進行劫持（攔截）的，返回（get）設置（set）的兩個對象的方法來操縱我們對於數據的反應
發佈者訂閱這模式:就是對象間的一種1對多的依賴關係 當這個一個對象的狀態改變的時候，所有依賴於這個對象的所有內容都會得到通知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model</title>
</head>
<body>
<!-- 雙向數據綁定
1、從頁面到數據
2、從數據到頁面 -->
<div id="app">
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
msg:'大南京真美'
}
})
</script>
</html>
v-show
作用：控制一個元素的顯示和隱藏（元素背動態設置了display:none）
語法：v-show=”bool” true就是顯示 false 就是隱藏（默認）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show</title>
</head>
<body>
<div id="app">
<!-- 頁面中有個複選框 當我勾選的時候下面的內容顯示 當我取消勾選的時候下面的內容隱藏 -->
<input type="checkbox" v-model="bool">{{bool?'顯示':'隱藏'}}
<p v-show='bool'>{{text}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:'hello vue',
bool:false
}
})
</script>
</html>
v-on
作用：就是給vue來綁定事件的
語法：1.v-on:事件名=“函數()” 2.@事件名=”函數()”
注意：vue中函數寫在實例中的 methods配置項中
vue中 事件如何調用？
直接綁定函數名稱調用
<button v-on:click='handle'>點擊1</button>
調用函數的形式
<button v-on:click='handle1()'>點擊1</button>
vue中 事件對象 怎麼使用
通過默認的事件參數
通過$event 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<p v-on:click="num++" >點擊</p>
<p @click="num++" >點擊1</p>
<!-- 如果事件直接綁定函數名稱，那麼默認會傳遞事件對象作爲事件函數的第一個參數 -->
<p @click="handle">點擊2</p>
<!-- 2、如果事件綁定函數調用，那麼事件對象必須作爲最後一個參數顯示傳遞，
並且事件對象的名稱必須是$event -->
<p @click="handle1(123,456,$event)">點擊3</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
num:0
},
methods:{
handle: function(event) {
// 這裏的this是Vue的實例對象+
console.log(this === vm)
// 在函數中 想要使用data裏面的數據 一定要加this
this.num++;
console.log(event.target.innerHTML);
},
handle1:function(p1,p2,event){
this.num++;
console.log(p1,p2);
console.log(event.target.innerHTML);
}
}
})
</script>
</html>
v-for
作用：便利data中的數據
語法：v-for=”(item,index) in 你要遍歷的數據
Item：你每次便利出來時候得到的數據
Index:每次便利數據的時候得到的下標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for</title>
</head>
<body>
<div id="app">
<p v-for='(item,index) in arr'>{{item}}-----{{index}}</p>
<table border=1>
<tr v-for='(item,index) in obj'>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<div v-for='(item,key,index) in obj1'> {{item}}----{{key}}----{{index}}</div>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
arr:['哈哈','嘻嘻','吼吼','嗚嗚'],
obj:[
{name:'xixi',age:18},
{name:'jak',age:27},
{name:'mark',age:22}
],
obj1:{
name: 'zhangsan',
age: 13,
gender: 'female'
}
}
})
</script>
</html>
v-bind
作用：給網頁中的html元素綁定屬性
語法：1.v-bind:屬性名=“值”
2.：屬性名=“值”
注意：綁定多個屬性的時候不能用簡寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <img v-bind:src="imgSrc" alt=""> -->
<!-- 練習2:點擊一個複選框 然後勾選的狀態下 下面的文字是紅色的 取消勾選文字變成黑色 -->
<input type="checkbox" v-model="bool" >
<h1 v-bind:class="bool ? 'red':''">我是變色的字體</h1>
<!-- 一個html標籤上加多個屬性 -->
<!-- 注意：綁定多個屬性的時候不能用簡寫 -->
<img v-bind="{src:imgSrc,title:text}">
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vue=new Vue({
el:'#app',
data:{
imgSrc:'./timg.jpeg',
text:'這是長腿妹妹',
bool:false
}
})
</script>
</html>
v-if
作用：判斷是否加載頁面元素
語法：v-if="表達式" true 加載元素 false不加載元素
對元素進行顯示和隱藏的時候，其實是對當前這個dom元素進行新增和刪除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- v-if
作用：判斷是否加載頁面元素
語法：v-if="表達式" true 加載元素 false 不加載元素
對元素進行顯示和隱藏的時候其實是對當前這個dom元素進行新增和刪減-->
<div id="app">
<input type="checkbox" v-model='bool'>
<h1 v-if='bool'>{{text}}</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
boo1:false,
text:"大南京真美"
}
})
</script>
</html>
v-if和v-show的區別
v-if:在切換的時候對於計算機的資源消耗比較好（安全性高）
v-show：在頁面初始化的時候對計算機的資源消耗比較高（對需要頻繁顯示和隱藏的元素並且對安全性要求不高的內容來進行使用）
當 v-if 與 v-for 一起使用時誰的優先級更高
v-for 具有比 v-if 更高的優先級，這意味着 v-if 將分別重複運行於每個 v-for 循環中，所有不推薦v-if和v-for同時使用
v-else
前提是必須配合着v-if來進行使用 不能單獨使用
作用：配合着v-if來對元素進行顯示和隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-else</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model='bool'>
<h1 v-if='bool'>歡迎會員</h1>
<h1 v-else>請登錄</h1>
</div>
<!-- v-else 前提是必須配合着v-if來進行使用，不能單獨使用
作用：配合這個v-if -->
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
bool:false
}
})
</script>
</body>
</html>
v-else-if
當有一項成立的時候進行渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-else-if</title>
</head>
<body>
<div id="app">
<select v-model='text' >
<option value="吃飯">吃飯</option>
<option value="睡覺">睡覺</option>
<option value="打豆豆">打豆豆</option>
</select>
<h2 v-if='text=="吃飯"'>吃飯</h2>
<h2 v-else-if='text=="睡覺"'>睡覺</h2>
<h2 v-else-if='text=="打豆豆"'>打豆豆</h2>
<h2 v-else>您什麼都沒選</h2>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:''
}
})
</script>
</html>
v-text
就是向頁面中插入純文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- {{}} 模板語法 模板插值 -->
<!-- 閃爍、閃屏 -->
<!-- 當網速較慢或者大量渲染數據的時候，可能會把兩個{{}}顯示出來，渲染完成或加載完成的時候變成正常的 會出現閃爍問題 -->
<!-- 1.使用v-text替換{{}}
2.在style中加v-cloak diaplay:none
v-cloak指令 建議大家加載到el掛載的元素上-->
<h1>{{text}}</h1>
<!-- v-text指令 就是向頁面插入文本 -->
<h1 v-text='text'></h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:'大南京'
}
})
</script>
</html>
v-html
就是向頁面中插入html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html</title>
</head>
<body>
<div id="app">
<h1 v-html='newHtml'></h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
// v-html 就是向網頁中插入html
const vm=new Vue({
el:'#app',
data:{
newHtml:"<h1>麼麼噠</h1>"
}
})
</script>
</html>
監聽/偵聽 watch
作用：可以監聽模型數據的改變，當綁定到監聽上的模型數據改變了，那麼監聽就可以觸發，來完成具體的功能。
注意：監聽watch在初始化的時候不會執行，只有當數據改變之後纔會運行
語法：要和el,data,methods同級的位置進行編寫
watch:{
你要監聽的數據(newval(新數據)，oldval(舊數據)){
你要處理的邏輯
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch基本語法</title>
</head>
<body>
<!--
作用：可以監聽模型數據的改變，當綁定到監聽上的模型數據改變了 那麼監聽就可以觸發，來完成具體的功能
注意：監聽watch在初始化的時候不會執行，只有當數據變化之後纔會執行
語法：要和el data methods同級的位置來進行編寫
watch:{
你要監聽的數據（newval,oldnew）{
你要處理的邏輯
}
}
newval：新數據
oldnew:之前數據
-->
<div id="app">
<input type="text" v-model="text">
<h1>{{text}}</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:'默認值'
},
watch:{
text(val,oldVal){
console.log(`新數據：${val} 舊數據：${oldVal}`);
}
}
})
</script>
</html>
watch小練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch小練習</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--
1.要完成點擊重置按鈕 清空兩個輸入框
（1）創建兩個變量 用來接受輸入框的值
（2）點擊重置按鈕 調用函數 ----》把兩個模型數據的值設置爲空
2.完成表格的動態數據展示
（1）創建一個數組對象（假數據） 然後便利這個數組對象先完成表格的動態生成
3.完成點擊添加功能
（1）使用兩個變量接受輸入框的值（已經在第一步的時候完成了）
（2）給添加按鈕綁定一個點擊事件 在事件函數中進行
便利數據的數組對象進行一個push操作（基於雙向綁定原理 模型數據改變了視圖也發生改變）
4.允許添加按鈕可以點擊（如果兩個輸入框都有值的時候才允許 反之不能點擊）
（1）監聽兩個輸入框的變量
（2）如果兩個輸入框都有值那麼允許點擊 反之不能點擊
5.刪除操作（刪除一行）
（1）點擊模態框上的刪除按鈕調用一個刪除函數
（2） 創建一個變量保存刪除狀態
（3）在點擊單獨刪除的時候把下標賦值給這個狀態的變量
（4）在刪除函數中使用splice()來進行刪除
6.刪除操作（全部刪除）
（1）在點擊全部刪除的時候 就是把保存狀態的變量設置成小於0的內容
（2）在刪除函數中判斷如果等於設置刪除全部的那個數字 就把數組清空進行全部刪除
7.全部刪除和暫無數據的顯示判斷
在userlist這個變量長度大於0的時候顯示刪除全部 反之顯示暫無數據
-->
</head>
<body>
<div class="container" v-cloak>
<form action="">
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" v-model='uname'>
</div>
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" v-model='uage'>
</div>
<div>
<button type="button" class="btn btn-success " @click="add()" v-bind:disabled="bool">添加</button>
<button type="button" class="btn btn-info " @click='res()'>重置</button>
</div>
</form>
<div>
<table class="table table-bordered text-center">
<h1 class="text-center">用戶信息表</h1>
<tr>
<td>序號</td>
<td>名字</td>
<td>年齡</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in useList">
<td>{{index+1}}</td>
<td>{{item.useName}}</td>
<td>{{item.useAge}}</td>
<td>
<button class="btn btn-success" data-toggle="modal" href='#modal-id' @click="num=index">刪除</button>
</td>
</tr>
<tr v-if='useList.length>0'>
<td colspan="4" >
<button class="btn btn-info " data-toggle="modal" href='#modal-id' @click="num=-1">刪除全部</button>
</td>
</tr>
<tr v-else>
<td colspan="4">暫無數據...</td>
</tr>
</table>
<!-- 模態框開始 -->
<div class="modal fade" id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" >確定刪除嗎</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" @click='del()'>確定</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- 模態框結束 -->
</div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
const vm=new Vue({
el:'.container',
data:{
bool:true,/*擴展添加按鈕能否點擊*/
uname:'',
uage:'',
useList:[
{useName:'xixi',useAge:181},
{useName:'xixi',useAge:182},
],
num:0,/*保存刪除下標*/
},
methods:{
// 點擊重置按鈕調用的函數
res(){
this.uname="",
this.uage=""
},
// 點擊添加按鈕調動的函數
add(){
// 把輸入框的內容插入到數組對象總
this.useList.push({useName:this.uname,useAge:this.uage}),
this.res()
},
del:function(){
// 當索引小於0時，刪除全部
if(this.num<0){
this.useList=[];
}else{
console.log(this.num);
// 刪除操作其實就是對數組指定下標內容進行刪除
this.useList.splice(this.num,1)
}
}
},
watch:{
uname(val,oldVal){
// 判斷兩個框是否都有值
if(this.uname=="" || this.uage==""){
// console.log(this.uname=="" || this.uage=="");
this.bool=true;
// console.log(this.bool);
}else{
this.bool=false
}
},
uage(val,oldVal){
if(this.uname=="" || this.uage==""){
// console.log(this.uname=="" || this.uage=="");
this.bool=true;
// console.log(this.bool);
}else{
this.bool=false
}
},
}
})
</script>
</html>
計算屬性
爲什麼學習計算屬性：
{{}}模板語法/插值語法在使用的時候是非常的方便，但是在設計之初用於簡單的表達式運算，在模版語法中放入太對的邏輯會讓這個模版維護起來非常的麻煩
什麼是計算屬性：
首先計算屬性是一種屬性，其次他有一個計算的特殊功能，就是每當計算屬性得到值的時候，並不會向其他屬性一樣直接返回結果，而是可以經過一系列的計算之後在返回結果。在計算屬性中會引用data中的某個屬性 當這個屬性發生改變的時候計算屬性也會重新計算。
語法：與el,data，methods等屬性同級的位置
computed：{
返回的結果數據( ){
return 返回的結果
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>計算屬性</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!-- 計算屬性
爲什麼要學習：{{}}模版語法/插值語法 在使用的是非常的方便，但是設計之初用於簡單的表達式運算，在模版語法中放入太多的邏輯會讓這個模版維護起來非常的麻煩 -->
<!-- 什麼是計算屬性:首先計算屬性是一種屬性 ，其次他有一個計算的特殊功能。就是每當計算屬性得到值的時候，並不會向其他屬性一樣直接返回結果，而是可以經過一系列的計算之後在返回結果。在計算屬性中會引用data中的某個屬性 當這個屬性發生改變的時候計算屬性也會重新計算 -->
<!-- 語法：寫在於el data methods watch 等屬性同級的位置
computed:{
返回的結果數據-變量 ( ) {
return 返回的結果
}
} -->
<!-- 計算屬性使用場景：一條數據 在多個位置有多種展示形態 -->
<div id="demoDiv">
<h1>原始數據:{{text}}</h1>
<!-- substr(從那個下標位置開始，截取幾位)字符串截取 -->
<h1>處理：{{text.toUpperCase().substr(3,2)}}</h1>
<h1>計算屬性的方式處理數據{{newText}}</h1>
<h1>計算屬性的方式處理數據{{textb}}</h1>
<input type="text" v-model="text">
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"abcdefg"
},
computed:{
newText(){
return this.text.toUpperCase().substr(2,1)
},
textb(){
return this.text.substr(2,1)
}
}
})
</script>
</body>
</html>
計算屬性與方法的區別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demoDiv">
<!-- 對一個數據進行截取操作方式1寫在雙大括號中(不推薦 因爲會造成視圖層代碼冗餘) -->
<!-- 對一個數據進行截取操作方式2 計算屬性的方式 -->
<h1>計算屬性:{{newtext}}</h1>
<h1>計算屬性:{{newtext}}</h1>
<h1>計算屬性:{{newtext}}</h1>
<h1>計算屬性:{{newtext}}</h1>
<h1>計算屬性:{{newtext}}</h1>
<!-- 對一個數據進行截取操作方式3 用方法（methods）的方式 -->
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<h1>函數的方式:{{funtext()}}</h1>
<!-- 問題：既然相同的功能在函數裏面也可以完成，那麼爲什麼要有計算屬性這個東西呢？
他們兩個有什麼區別呢？ -->
<!-- 1.計算屬性相對於方法來說在特定場合下更加節省資源
2.因爲計算屬性是基於緩存的，計算屬性只有在她所依賴的數據改變的時候纔會重新執行。方法是要被調用 那麼就會重新執行 -->
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"abcdefg"
},
methods:{
funtext(){
console.log("我是方法")
return this.text.substr(2,3)
}
},
computed:{
newtext(){
console.log("我是計算屬性")
return this.text.substr(2,3)
}
}
})
</script>
</body>
</html>
修飾符
修飾符：用來處理事件當中的一些細節性的dom操作
（1）按鍵修飾符：.up (光標上) .down .ctrl .enter （回車鍵） .space （空格健）
（2）事件修飾符：
.stop 阻止事件冒泡
.capture 事件捕獲
.self 只會觸發自己範圍內的事件，不包含子元素
.once 只會觸發一次
.prevent 阻止事件默認行爲
虛擬DOM和Diff算法
什麼是虛擬DOM：所謂的虛擬DOM 也就是虛擬節點 ---》他是通過js的對象方式來模擬dom節點 一切的dom操作都是在這個js對象中完成 （js對象在進行模擬操作 速度非常的快） 就會重新的進行真實dom渲染
虛擬DOM和真實DOM有什麼區別
- 虛擬DOM不會重新對於頁面進行重繪操作
- 虛擬DOM效率比真實DOM高的多
- 虛擬DOM 進行頻繁操作的時候 都會只對要修改的部位進行修改 而不會對整個DOM進行渲染 減少DOM操作 局部渲染
Diff算法
逐步解析新的節點 找到他在舊節點中的位置，如果找到來了就移動對應的內容 如果沒有找到就說明是新的節點 那麼就進行新增操作 創建除一個節點進行插入，在便利完成之後如果就節點中還有沒有處理過的內容，就說明這個節點在新的內容中被刪除了 那麼刪除即可