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="https://www.cnblogs.com/suncolor/archive/2022/11/js/vue.js"></script>
</head>
<body>
<!--
Vue模板語法有2大類：
1.插值語法：
功能：用于決議標簽體內容，
寫法：{{xxx}}，xxx是js運算式，且可以直接讀取到data中的所有屬性，
2.指令語法：
功能：用于決議標簽（包括：標簽屬性、標簽體內容、系結事件.....），
舉例：v-bind:href="https://www.cnblogs.com/suncolor/archive/2022/11/10/xxx" 或 簡寫為 :href="https://www.cnblogs.com/suncolor/archive/2022/11/10/xxx"，xxx同樣要寫js運算式，
且可以直接讀取到data中的所有屬性，
備注：Vue中有很多的指令，且形式都是：v-????，此處我們只是拿v-bind舉個例子，
-->
<!-- 準備好一個容器-->
<div id="root">
<h1>插值語法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令語法</h1>
<a v-bind:href="https://www.cnblogs.com/suncolor/archive/2022/11/10/school.url.toUpperCase()" x="hello">點我去{{school.name}}學習1</a>
<a :href="https://www.cnblogs.com/suncolor/archive/2022/11/10/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="https://www.cnblogs.com/suncolor/archive/2022/11/10/name"><br/>
雙向資料系結：<input type="text" v-model:value="https://www.cnblogs.com/suncolor/archive/2022/11/10/name"><br/>
<!-- 簡寫 -->
單向資料系結：<input type="text" :value="https://www.cnblogs.com/suncolor/archive/2022/11/10/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 @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 @click.capture="showMsg(1)">
div1
<div @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是當前操作的元素時才觸發事件； -->
<div @click.self="showInfo">
<button @click="showInfo">點我提示資訊</button>
</div>
<!-- 事件的默認行為立即執行，無需等待事件回呼執行完畢； -->
<ul @wheel.passive="demo" >
<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="https://www.cnblogs.com/suncolor/archive/2022/11/js/vue.js"></script>
</head>
<body>
<!--
系結樣式：
1. class樣式
寫法: xxx可以是字串、物件、陣列，
字串寫法適用于：類名不確定，要動態獲取，
物件寫法適用于：要系結多個樣式，個數不確定，名字也不確定，
陣列寫法適用于：要系結多個樣式，個數確定，名字也確定，但不確定用不用，
2. style樣式
:style="{fontSize: xxx}"其中xxx是動態值，
:style="[a,b]"其中a、b是樣式物件，
-->
<!-- 準備好一個容器-->
<div id="root">
<!-- 系結class樣式--字串寫法，適用于：樣式的類名不確定，需要動態指定 -->
<!-- :是可能需要動態添加的樣式 -->
<div : @click="changeMood">{{name}}</div> <br/><br/>
<!-- 系結class樣式--陣列寫法，適用于：要系結的樣式個數不確定、名字也不確定 -->
<div :>{{name}}</div> <br/><br/>
<!-- 系結class樣式--物件寫法，適用于：要系結的樣式個數確定、名字也確定，但要動態決定用不用 -->
<div :>{{name}}</div> <br/><br/>
<!-- 系結style樣式--物件寫法 -->
<div :style="styleObj">{{name}}</div> <br/><br/>
<!-- 系結style樣式--陣列寫法 -->
<div :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="https://www.cnblogs.com/suncolor/archive/2022/11/10/male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="https://www.cnblogs.com/suncolor/archive/2022/11/10/female"> <br/><br/>
愛好：
學習<input type="checkbox" v-model="userInfo.hobby" value="https://www.cnblogs.com/suncolor/archive/2022/11/10/study">
打游戲<input type="checkbox" v-model="userInfo.hobby" value="https://www.cnblogs.com/suncolor/archive/2022/11/10/game">
吃飯<input type="checkbox" v-model="userInfo.hobby" value="https://www.cnblogs.com/suncolor/archive/2022/11/10/eat">
<br/><br/>
所屬校區
<select v-model="userInfo.city">
<option value="">請選擇校區</option>
<option value="https://www.cnblogs.com/suncolor/archive/2022/11/10/beijing">北京</option>
<option value="https://www.cnblogs.com/suncolor/archive/2022/11/10/shanghai">上海</option>
<option value="https://www.cnblogs.com/suncolor/archive/2022/11/10/shenzhen">深圳</option>
<option value="https://www.cnblogs.com/suncolor/archive/2022/11/10/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="https://www.cnblogs.com/suncolor/archive/2022/11/10/n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定義全域指令
/* Vue.directive('fbind',{
//指令與元素成功系結時（一上來）
bind(element,binding){
element.value = https://www.cnblogs.com/suncolor/archive/2022/11/10/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 = https://www.cnblogs.com/suncolor/archive/2022/11/10/binding.value
},
//指令所在元素被插入頁面時呼叫
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新決議時呼叫
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
vue的生命周期
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/531526.html
標籤：其他