vue vue簡介 Vue (發音為 /vjuː/，類似 view) 是一款用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建，並提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是複雜的界面，Vue 都可以勝任。 ...
vue
vue簡介
Vue (發音為 /vjuː/，類似 view) 是一款用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建，並提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是複雜的界面，Vue 都可以勝任。
vue的模版語法
模板語法包含插值語法和指令語法
點擊查看代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板語法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue模板語法有2大類：
1.插值語法：
功能：用於解析標簽體內容。
寫法：{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性。
2.指令語法：
功能：用於解析標簽（包括：標簽屬性、標簽體內容、綁定事件.....）。
舉例：v-bind:href="xxx" 或 簡寫為 :href="xxx"，xxx同樣要寫js表達式，
且可以直接讀取到data中的所有屬性。
備註：Vue中有很多的指令，且形式都是：v-????，此處我們只是拿v-bind舉個例子。
-->
<!-- 準備好一個容器-->
<div id="root">
<h1>插值語法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令語法</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">點我去{{school.name}}學習1</a>
<a :href="school.url" x="hello">點我去{{school.name}}學習2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'尚矽谷',
url:'http://www.atguigu.com',
}
}
})
</script>
</html>
vue的數據綁定
v-bind和v-model兩種方式的數據綁定
<!--
Vue中有2種數據綁定的方式：
1.單向綁定(v-bind)：數據只能從data流向頁面。
2.雙向綁定(v-model)：數據不僅能從data流向頁面，還可以從頁面流向data。
備註：
1.雙向綁定一般都應用在表單類元素上（如：input、select等）
2.v-model:value 可以簡寫為 v-model，因為v-model預設收集的就是value值。
-->
事例
<div id="root">
<!-- 普通寫法 -->
單向數據綁定：<input type="text" v-bind:value="name"><br/>
雙向數據綁定：<input type="text" v-model:value="name"><br/>
<!-- 簡寫 -->
單向數據綁定：<input type="text" :value="name"><br/>
雙向數據綁定：<input type="text" v-model="name"><br/>
<!-- 如下代碼是錯誤的，因為v-model只能應用在表單類元素（輸入類元素）上 -->
<h2 v-model:x="name">你好啊</h2>
</div>
el和data的兩種寫法
點擊查看代碼
<!--
data與el的2種寫法
1.el有2種寫法
(1).new Vue時候配置el屬性。
(2).先創建Vue實例，隨後再通過vm.$mount('#root')指定el的值。
2.data有2種寫法
(1).對象式
(2).函數式
如何選擇：目前哪種寫法都可以，以後學習到組件時，data必須使用函數式，否則會報錯。
3.一個重要的原則：
由Vue管理的函數，一定不要寫箭頭函數，一旦寫了箭頭函數，this就不再是Vue實例了。
-->
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
//el的兩種寫法
/* const v = new Vue({
//el:'#root', //第一種寫法
data:{
name:'尚矽谷'
}
})
console.log(v)
v.$mount('#root') //第二種寫法 */
//data的兩種寫法
new Vue({
el:'#root',
//data的第一種寫法：對象式
/* data:{
name:'尚矽谷'
} */
//data的第二種寫法：函數式
data(){
console.log('@@@',this) //此處的this是Vue實例對象
return{
name:'尚矽谷'
}
}
})
</script>
MVVM模型
- M：模型(Model) ：對應 data 中的數據
- V：視圖(View) ：模板
- VM：視圖模型(ViewModel) ： Vue 實例對象
觀察發現：
1.data中所有的屬性，最後都出現在了vm身上。
2.vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板中都可以直接使用。
vue事件處理
放在標簽上，點擊觸發事件@click
點擊查看代碼
<!--
事件的基本使用：
1.使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名；
2.事件的回調需要配置在methods對象中，最終會在vm上；
3.methods中配置的函數，不要用箭頭函數！否則this就不是vm了；
4.methods中配置的函數，都是被Vue所管理的函數，this的指向是vm 或 組件實例對象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但後者可以傳參；
-->
<!-- 準備好一個容器-->
<div id="root">
<h2>歡迎來到{{name}}學習</h2>
<!-- <button v-on:click="showInfo">點我提示信息</button> -->
<button @click="showInfo1">點我提示信息1（不傳參）</button>
<button @click="showInfo2($event,66)">點我提示信息2（傳參）</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
const vm = new Vue({
el:'#root',
data:{
name:'尚矽谷',
},
methods:{
showInfo1(event){
// console.log(event.target.innerText)
// console.log(this) //此處的this是vm
alert('同學你好！')
},
showInfo2(event,number){
console.log(event,number)
// console.log(event.target.innerText)
// console.log(this) //此處的this是vm
alert('同學你好！！')
}
}
})
</script>
事件的修飾符
Vue中的事件修飾符（可以連續使用）：
1.prevent：阻止預設事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只觸發一次（常用）；
4.capture：使用事件的捕獲模式；
5.self：只有event.target是當前操作的元素時才觸發事件；
6.passive：事件的預設行為立即執行，無需等待事件回調執行完畢；
-->
修飾符代碼使用展示
<!-- 阻止預設事件（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">點我提示信息</a>
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">點我提示信息</button>
<!-- 修飾符可以連續寫 -->
<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">點我提示信息</a> -->
</div>
<!-- 事件只觸發一次（常用） -->
<button @click.once="showInfo">點我提示信息</button>
<!-- 使用事件的捕獲模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是當前操作的元素時才觸發事件； -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">點我提示信息</button>
</div>
<!-- 事件的預設行為立即執行，無需等待事件回調執行完畢； -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
鍵盤按下事件
點擊查看代碼
<!--
1.Vue中常用的按鍵別名：
回車 => enter
刪除 => delete (捕獲“刪除”和“退格”鍵)
退出 => esc
空格 => space
換行 => tab (特殊，必須配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但註意要轉為kebab-case（短橫線命名）
3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。
(2).配合keydown使用：正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵（不推薦）
5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名
-->
<!-- keydown 和keyup方便表示鍵盤按下就觸發事件和鍵盤按下抬起才觸發事件 -->
<div id="root">
<input type="text" placeholder="按下回車提示輸入" @keydown.huiche="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
Vue.config.keyCodes.huiche = 13 //定義了一個別名按鍵
new Vue({
el:'#root',
data:{
name:'尚矽谷'
},
methods: {
showInfo(e){
// console.log(e.key,e.keyCode) 這個e.key是可以獲取到你按了電腦哪個鍵對應的名稱
// e.keyCode是這個鍵對應的編碼，鍵盤上基本上每個鍵都有一個對應的編碼
console.log(e.target.value)
}
},
})
</script>
vue的計算屬性
計算屬性computed
點擊查看代碼
<!--
計算屬性：
1.定義：要用的屬性不存在，要通過已有屬性計算得來。
2.原理：底層藉助了Objcet.defineproperty方法提供的getter和setter。
3.get函數什麼時候執行？
(1).初次讀取時會執行一次。
(2).當依賴的數據發生改變時會被再次調用。
4.優勢：與methods實現相比，內部有緩存機制（復用），效率更高，調試方便。
5.備註：
1.計算屬性最終會出現在vm上，直接讀取使用即可。
2.如果計算屬性要被修改，那必須寫set函數去響應修改，且set中要引起計算時依賴的數據發生改變。
-->
<!-- 準備好一個容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
測試：<input type="text" v-model="x"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
<!-- 全名：<span>{{fullName}}</span> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
全名：<span>{{fullName}}</span> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
const vm = new Vue({
el:'#root',
data:{
firstName:'張',
lastName:'三',
x:'你好'
},
computed:{
fullName:{
//get有什麼作用？當有人讀取fullName時，get就會被調用，且返回值就作為fullName的值
//get什麼時候調用？1.初次讀取fullName時。2.所依賴的數據發生變化時。
get(){
console.log('get被調用了')
// console.log(this) //此處的this是vm
return this.firstName + '-' + this.lastName
},
//set什麼時候調用? 當fullName被修改時。
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
//簡寫
fullName(){
console.log('get被調用了') // fullname後面加一個函數預設就是get（）
return this.firstName + '-' + this.lastName
}
}
}
})
</script>
vue的監視屬性
watch的基礎用法
點擊查看代碼
<!--
監視屬性watch：
1.當被監視的屬性變化時, 回調函數自動調用, 進行相關操作
2.監視的屬性必須存在，才能進行監視！！
3.監視的兩種寫法：
(1).new Vue時傳入watch配置
(2).通過vm.$watch監視
-->
<!-- 準備好一個容器-->
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="changeWeather">切換天氣</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎熱' : '涼爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
// 法一：
/* watch:{
isHot:{
immediate:true, //當immediate為true時，會讓handler初始化時調用一下
//handler函數什麼時候調用？當isHot發生改變時。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
} */
})
// 法二：
vm.$watch('isHot',{
immediate:true, //初始化時讓handler調用一下
//handler函數什麼時候調用？當isHot發生改變時。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>
深度監視deep=true
點擊查看代碼
//監視多級結構中某個屬性的變化，註意多級的需要加單引號
/* 'numbers.a':{
handler(){
console.log('a被改變了')
}
} */
//監視多級結構中所有屬性的變化，需要設置deep為true
numbers:{
deep:true, 、
handler(){
console.log('numbers改變了')
}
}
簡寫模式
點擊查看代碼
//簡寫
/* isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
} */
//簡寫
/* vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
}) */
計算屬性和監視屬性的對比
<!--
computed和watch之間的區別：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以進行非同步操作。
兩個重要的小原則：
1.所被Vue管理的函數，最好寫成普通函數，這樣this的指向才是vm 或 組件實例對象。
2.所有不被Vue所管理的函數（定時器的回調函數、ajax的回調函數等、Promise的回調函數），最好寫成箭頭函數，
這樣this的指向才是vm 或 組件實例對象。
-->
vue綁定樣式
綁定class和style樣式
點擊查看代碼
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
綁定樣式：
1. class樣式
寫法:class="xxx" xxx可以是字元串、對象、數組。
字元串寫法適用於：類名不確定，要動態獲取。
對象寫法適用於：要綁定多個樣式，個數不確定，名字也不確定。
數組寫法適用於：要綁定多個樣式，個數確定，名字也確定，但不確定用不用。
2. style樣式
:style="{fontSize: xxx}"其中xxx是動態值。
:style="[a,b]"其中a、b是樣式對象。
-->
<!-- 準備好一個容器-->
<div id="root">
<!-- 綁定class樣式--字元串寫法，適用於：樣式的類名不確定，需要動態指定 -->
<!-- :class="mood"是可能需要動態添加的樣式 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
<!-- 綁定class樣式--數組寫法，適用於：要綁定的樣式個數不確定、名字也不確定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!-- 綁定class樣式--對象寫法，適用於：要綁定的樣式個數確定、名字也確定，但要動態決定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
<!-- 綁定style樣式--對象寫法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 綁定style樣式--數組寫法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'尚矽谷',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
// Math.random()的意思是生成【0-1）的隨機數
// Math.random()*3使得可以取到0.xxx、1.xxx、2.xxx不可能到3
// Math.floor將數向下取整
const index = Math.floor(Math.random()*3)
this.mood = arr[index] // 隨機從0、1、2取出一個索引
}
},
})
</script>
vue的條件渲染
v-show、v-if 、v-else-if與v-else
點擊查看代碼
條件渲染：
1.v-if
寫法：
(1).v-if="表達式"
(2).v-else-if="表達式"
(3).v-else="表達式"
適用於：切換頻率較低的場景。
特點：不展示的DOM元素直接被移除。
註意：v-if可以和:v-else-if、v-else一起使用，但要求結構不能被“打斷”。
2.v-show
寫法：v-show="表達式"
適用於：切換頻率較高的場景。
特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉
3.備註：使用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到。
-->
<!-- 準備好一個容器-->
<div id="root">
<h2>當前的n值是:{{n}}</h2>
<button @click="n++">點我n+1</button>
<!-- 使用v-show做條件渲染 -->
<!-- <h2 v-show="false">歡迎來到{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">歡迎來到{{name}}</h2> -->
<!-- <h2 v-show="a">歡迎來到{{name}}</h2> -->
<!-- 使用v-if做條件渲染 -->
<!-- <h2 v-if="false">歡迎來到{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">歡迎來到{{name}}</h2> -->
<!-- v-else和v-else-if -->
<!-- <div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> -->
<!-- v-if與template的配合使用，不能和v-show配合 -->
<template v-if="n === 1">
<h2>你好</h2>
<h2>尚矽谷</h2>
<h2>北京</h2>
</template>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'尚矽谷',
n:0,
a:true
}
})
</script>
vue的列表渲染
基本使用方法
<!--
v-for指令:
1.用於展示列表數據
2.語法：v-for="(item, index) in xxx" :key="yyy"
3.可遍歷：數組、對象、字元串（用的很少）、指定次數（用的很少）
-->
<!-- 準備好一個容器-->
<div id="root">
<!-- 遍曆數組 -->
<h2>人員列表（遍曆數組）</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍歷對象 -->
<h2>汽車信息（遍歷對象）</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍歷字元串 -->
<h2>測試遍歷字元串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍歷指定次數 -->
<h2>測試遍歷指定次數（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'張三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奧迪A8',
price:'70萬',
color:'黑色'
},
str:'hello'
}
})
</script>
v-for指令里key的工作原理
<!--
面試題：react、vue中的key有什麼作用？（key的內部原理）
1. 虛擬DOM中key的作用：
key是虛擬DOM對象的標識，當數據發生變化時，Vue會根據【新數據】生成【新的虛擬DOM】,
隨後Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規則如下：
2.對比規則：
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
①.若虛擬DOM中內容沒變, 直接使用之前的真實DOM！
②.若虛擬DOM中內容變了, 則生成新的真實DOM，隨後替換掉頁面中之前的真實DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key
創建新的真實DOM，隨後渲染到到頁面。
3. 用index作為key可能會引發的問題：
1. 若對數據進行：逆序添加、逆序刪除等破壞順序操作:
會產生沒有必要的真實DOM更新 ==> 界面效果沒問題, 但效率低。
2. 如果結構中還包含輸入類的DOM：
會產生錯誤DOM更新 ==> 界面有問題。
4. 開發中如何選擇key?:
1.最好使用每條數據的唯一標識作為key, 比如id、手機號、身份證號、學號等唯一值。
2.如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用於渲染列表用於展示，
使用index作為key是沒有問題的。
-->
列表過濾（包含補充indexOf方法和filter方法的使用）
<div id="root">
<h2>人員列表</h2>
<input type="text" placeholder="請輸入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//用watch實現
//#region
/* new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'馬冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周傑倫',age:21,sex:'男'},
{id:'004',name:'溫兆倫',age:22,sex:'男'}
],
filPerons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
}) */
//#endregion
//用computed實現
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'馬冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周傑倫',age:21,sex:'男'},
{id:'004',name:'溫兆倫',age:22,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
// indexOf（）方法，判斷括弧內字元出現的位置，沒有就返回-1
// 註意indexOf（""）,返回的是0
return p.name.indexOf(this.keyWord) !== -1
// filter方法，對哪個對象進行過濾，return返回什麼就是按照什麼條件進行過濾
})
}
}
})
</script>
列表排序（sort方法）
<!-- 準備好一個容器-->
<div id="root">
<h2>人員列表</h2>
<input type="text" placeholder="請輸入名字" v-model="keyWord">
<button @click="sortType = 2">年齡升序</button>
<button @click="sortType = 1">年齡降序</button>
<button @click="sortType = 0">原順序</button>
<ul>
<li v-for="(p,index) of filPerons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
<input type="text">
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
keyWord:'',
sortType:0, //0原順序 1降序 2升序
persons:[
{id:'001',name:'馬冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周傑倫',age:18,sex:'男'},
{id:'004',name:'溫兆倫',age:19,sex:'男'}
]
},
computed:{
filPerons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判斷一下是否需要排序
if(this.sortType){
// sort（）方法裡面有兩個參數，a1-a2表示升序，a2-a1表示降序
arr.sort((a1,a2)=>{
return this.sortType === 1 ? a2.age-a1.age : a1.age-a2.age
})
}
return arr
}
}
})
</script>
補充：vue中為列表裡添加數據的方法
// unshift是表示在列表的前面加一個值，push是往後面添加一個值
this.persons.unshift(p)
vue監測數據原理
點擊查看代碼
<!--
Vue監視數據的原理：
1. vue會監視data中所有層次的數據。
2. 如何監測對象中的數據？
通過setter實現監視，且要在new Vue時就傳入要監測的數據。
(1).對象中後追加的屬性，Vue預設不做響應式處理
(2).如需給後添加的屬性做響應式，請使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
3. 如何監測數組中的數據？
通過包裹數組更新元素的方法實現，本質就是做了兩件事：
(1).調用原生對應的方法對數組進行更新。
(2).重新解析模板，進而更新頁面。
4.在Vue修改數組中的某個元素一定要用如下方法：
1.使用這些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特別註意：Vue.set() 和 vm.$set() 不能給vm 或 vm的根數據對象 添加屬性！！！
-->
<!-- 準備好一個容器-->
<div id="root">
<h1>學生信息</h1>
<!-- 邏輯簡單可以直接在click的雙引號里添加 -->
<button @click="student.age++">年齡+1歲</button> <br/>
<button @click="addSex">添加性別屬性，預設值：男</button> <br/>
<button @click="student.sex = '未知' ">修改性別</button> <br/>
<button @click="addFriend">在列表首位添加一個朋友</button> <br/>
<button @click="updateFirstFriendName">修改第一個朋友的名字為：張三</button> <br/>
<button @click="addHobby">添加一個愛好</button> <br/>
<button @click="updateHobby">修改第一個愛好為：開車</button> <br/>
<button @click="removeSmoke">過濾掉愛好中的抽煙</button> <br/>
<h3>姓名：{{student.name}}</h3>
<h3>年齡：{{student.age}}</h3>
<h3 v-if="student.sex">性別：{{student.sex}}</h3>
<h3>愛好：</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友們：</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
const vm = new Vue({
el:'#root',
data:{
student:{
name:'tom',
age:18,
hobby:['抽煙','喝酒','燙頭'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:36}
]
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
this.student.friends[0].name = '張三'
},
addHobby(){
this.student.hobby.push('學習')
},
updateHobby(){
// this.student.hobby.splice(0,1,'開車')
// Vue.set(this.student.hobby,0,'開車')
this.$set(this.student.hobby,0,'開車')
},
removeSmoke(){
this.student.hobby = this.student.hobby.filter((h)=>{
return h !== '抽煙'
})
}
}
})
</script>
vue中收集表單數據
點擊查看代碼
<!--
收集表單數據：
若：<input type="text"/>，則v-model收集的是value值，用戶輸入的就是value值。
若：<input type="radio"/>，則v-model收集的是value值，且要給標簽配置value值。
若：<input type="checkbox"/>
1.沒有配置input的value屬性，那麼收集的就是checked（勾選 or 未勾選，是布爾值）
2.配置input的value屬性:
(1)v-model的初始值是非數組，那麼收集的就是checked（勾選 or 未勾選，是布爾值）
(2)v-model的初始值是數組，那麼收集的的就是value組成的數組
備註：v-model的三個修飾符：
lazy：失去焦點再收集數據
number：輸入字元串轉為有效的數字
trim：輸入首尾空格過濾
-->
<!-- 準備好一個容器-->
<div id="root">
<form @submit.prevent="demo">
賬號：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密碼：<input type="password" v-model="userInfo.password"> <br/><br/>
年齡：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性別：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
愛好：
學習<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戲<input type="checkbox" v-model="userInfo.hobby" value="game">
吃飯<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所屬校區
<select v-model="userInfo.city">
<option value="">請選擇校區</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武漢</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">閱讀並接受<a href="http://www.atguigu.com">《用戶協議》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
vue的過濾器
點擊查看代碼
<!--
過濾器：
定義：對要顯示的數據進行特定格式化後再顯示（適用於一些簡單邏輯的處理）。
語法：
1.註冊過濾器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用過濾器：{{ xxx | 過濾器名}} 或 v-bind:屬性 = "xxx | 過濾器名"
備註：
1.過濾器也可以接收額外參數、多個過濾器也可以串聯
2.並沒有改變原本的數據, 是產生新的對應的數據
-->
<!-- 準備好一個容器-->
<div id="root">
<h2>顯示格式化後的時間</h2>
<!-- 計算屬性實現 -->
<h3>現在是：{{fmtTime}}</h3>
<!-- methods實現 -->
<h3>現在是：{{getFmtTime()}}</h3>
<!-- 過濾器實現 -->
<h3>現在是：{{time | timeFormater}}</h3>
<!-- 過濾器實現（傳參） -->
<h3>現在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">尚矽谷</h3>
</div>
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//全局過濾器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603, //時間戳
msg:'你好，尚矽谷'
},
computed: {
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
//局部過濾器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
})
new Vue({
el:'#root2',
data:{
msg:'hello,atguigu!'
}
})
</script>
vue的內置指令
v-test指令
點擊查看代碼
<!--
我們學過的指令：
v-bind : 單向綁定解析表達式, 可簡寫為 :xxx
v-model : 雙向數據綁定
v-for : 遍曆數組/對象/字元串
v-on : 綁定事件監聽, 可簡寫為@
v-if : 條件渲染（動態控制節點是否存存在）
v-else : 條件渲染（動態控制節點是否存存在）
v-show : 條件渲染 (動態控制節點是否展示)
v-text指令：
1.作用：向其所在的節點中渲染文本內容。
2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。
-->
<!-- 準備好一個容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
name:'尚矽谷',
str:'<h3>你好啊！</h3>'
}
})
</script>
v-html指令
點擊查看代碼
<!--
我們學過的指令：
v-bind : 單向綁定解析表達式, 可簡寫為 :xxx
v-model : 雙向數據綁定
v-for : 遍曆數組/對象/字元串
v-on : 綁定事件監聽, 可簡寫為@
v-if : 條件渲染（動態控制節點是否存存在）
v-else : 條件渲染（動態控制節點是否存存在）
v-show : 條件渲染 (動態控制節點是否展示)
v-text指令：
1.作用：向其所在的節點中渲染文本內容。
2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。
-->
v-cloak指令
點擊查看代碼
<!--
v-cloak指令（沒有值）：
1.本質是一個特殊屬性，Vue實例創建完畢並接管容器後，會刪掉v-cloak屬性。
2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題。
-->
v-once指令
點擊查看代碼
<!--
v-once指令：
1.v-once所在節點在初次動態渲染後，就視為靜態內容了。
2.以後數據的改變不會引起v-once所在結構的更新，可以用於優化性能。
-->
<!-- 準備好一個容器-->
<div id="root">
<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>當前的n值是:{{n}}</h2>
<button @click="n++">點我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
v-pre指令
點擊查看代碼
<!--
v-pre指令：
1.跳過其所在節點的編譯過程。
2.可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯。
-->
<!-- 準備好一個容器-->
<div id="root">
<h2 v-pre>Vue其實很簡單</h2>
<h2 >當前的n值是:{{n}}</h2>
<button @click="n++">點我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
vue中自定義指令
點擊查看代碼
<!--
需求1：定義一個v-big指令，和v-text功能類似，但會把綁定的數值放大10倍。
需求2：定義一個v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素預設獲取焦點。
自定義指令總結：
一、定義語法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置對象} 或 directives{指令名:回調函數}
}) })
(2).全局指令：
Vue.directive(指令名,配置對象) 或 Vue.directive(指令名,回調函數)
二、配置對象中常用的3個回調：
(1).bind：指令與元素成功綁定時調用。
(2).inserted：指令所在元素被插入頁面時調用。
(3).update：指令所在模板結構被重新解析時調用。
三、備註：
1.指令定義時不加v-，但使用時要加v-；
2.指令名如果是多個單詞，要使用kebab-case命名方式，不要用camelCase命名。
-->
<!-- 準備好一個容器-->
<div id="root">
<h2>{{name}}</h2>
<h2>當前的n值是：<span v-text="n"></span> </h2>
<!-- <h2>放大10倍後的n值是：<span v-big-number="n"></span> </h2> -->
<h2>放大10倍後的n值是：<span v-big="n"></span> </h2>
<button @click="n++">點我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定義全局指令
/* Vue.directive('fbind',{
//指令與元素成功綁定時（一上來）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入頁面時
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析時
update(element,binding){
element.value = binding.value
}
}) */
new Vue({
el:'#root',
data:{
name:'尚矽谷',
n:1
},
directives:{
//big函數何時會被調用？1.指令與元素成功綁定時（一上來）。2.指令所在的模板被重新解析時。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //註意此處的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令與元素成功綁定時調用（一上來）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入頁面時調用
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析時調用
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
vue的生命周期
