Vue常用特性
阿新 • • 發佈：2020-11-30
一.表單基本操作
1. 單選框操作
<head> <meta charset="utf-8" /> <title>vue特性</title> </head> <body> <!-- 測試 vue input 單選框選中 --> <div id="app"> <!-- 在vue根據後臺資料來選中男女以前基本使用if判斷 --> <div v-if="gender===1"> <!-- 如果為1讓男選中 --> <input type="radio" name="" id="man" value="1" checked="checked" /> <label for="man">男</label> </div> <div v-else> <!-- 如果為1讓男選中 --> <input type="radio" name="" id="man" value="1" /> <label for="man">男</label> </div> <div v-if="gender===2"> <!-- 如果為2讓女選中 --> <input type="radio" name="" id="woman" value="2" checked="checked" /> <label for="woman">女</label> </div> <div v-else> <!--如果不為2讓女不選中 --> <input type="radio" name="" id="man" value="1" /> <label for="man">女</label> </div> <br> <!-- 使用if判斷會顯得格外的繁瑣 --> <hr> <!-- vue通過v-model的雙向繫結的來監控 若 gender的值與該單選框的value的值想等則該 單選框選中，可以試著把value都改為2試試 --> <input type="radio" name="" id="man" value="1" v-model="gender" /> <label for="man">男</label> <input type="radio" name="" id="woman" value="2" v-model="gender" /> <label for="woman">女</label> </div> <!-- 測試時將gender值切換 --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { // 假設 儲存的性別為 2 即為女 gender: 2, } }) </script> </body>
2.複選框操作
我們如法炮製寫一下複選框
<body> <div id="app"> <!-- 定義三組愛好 --> <input type="checkbox" name="" id="daqiu" value="打球" v-model="hobby" /> <label for="daqiu">打球</label> <input type="checkbox" name="" id="qiaodaima" value="敲程式碼" v-model="hobby" /> <label for="qiaodaima">敲程式碼</label> <input type="checkbox" name="" id="xuexi" value="學習" v-model="hobby" /> <label for="xuexi">學習</label> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { /* 定義複選框 資料時使用陣列,與單選框同樣的性質 ，若 hobby 的值有單選框中的value值則選中 */ hobby: ['打球', '敲程式碼'] }, }) </script> </body>
3.表單修飾符
<body> <div id="app"> <!-- number 修飾符 type="number" 是html 表單自帶的屬性 在表面上一看其實加不加number都無所謂,其實在獲取表單value 時我們獲取的都是字串型別,加上了.number會自動轉換為整型(或浮點型) --> <input type="number" v-model.number="number" /> <!-- v-model.trim的作用是清除使用者輸入的兩端空格 --> <input v-model.trim="msg" v-on:focusout="print" /> <br> <hr /> <p style="color: red;"> .lazy 在更新頁面資料時不會實時更新而是當input失去焦點，回車這些事件時二發生改變下面兩個 表單一個加了.lazy一個沒有加 </p> <input v-model.lazy="msg"> <input v-model="msg"> <span v-text="msg"></span> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { number: 121 + "212.2", msg: "定義一個有空格的字串", }, methods: { /* 失去焦點時將msg列印一下 會發現v-model.trim會清空 兩端空格 而普通的v-model 不會 */ print: function() { console.log(this.msg); } } }) </script> </body>
4.自定義指令
Vue.directive自定義全域性指令
<body>
<div id="app">
<input type="text" v-focus />
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 全域性指令在定義時 定義在其他vue例項之外
/*
自定義指令在定義時 如果採用駝峰命名法，例如
定義為 focusF 則在檢視使用時應該 用v-focus-f 這樣使用
如果只是單純的focusf 則用 v-focusf 這樣使用
*/
// 自定義一個全域性指令 自動聚焦
Vue.directive('focus', {
inserted: function(el) {
el.focus();
el.placeholder = "自定義自動聚焦指令"
}
});
new Vue({
el: "#app",
})
</script>
</body>
- Vue.directive 註冊全域性指令帶引數
<body>
<div id="app">
<div v-color="msg">
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 定義全域性帶參指令 v-color
/* 全域性變數將 使用者傳入 的資料解析 並賦值給該例項 */
Vue.directive('color', {
//bind - 只調用一次，在指令第一次繫結到元素上時候呼叫
// binding 為自定義的函式形參 通過自定義屬性傳遞過來的值 存在 binding.value 裡面
bind: function(el, binding) {
// 根據指令的引數設定背景色 寬 高
el.style.backgroundColor = binding.value.color;
el.style.width = binding.value.width;
el.style.height = binding.value.height;
}
})
new Vue({
el: "#app",
data: {
// 定義一組樣式資料
msg: {
color: "red",
width: "200px",
height: "200px"
},
}
})
</script>
</body>
- 自定義區域性指令
- 區域性指令，需要定義在 directives 的選項 用法和全域性用法一樣
- 區域性指令只能在當前元件裡面使用
- 當全域性指令和區域性指令同名時以區域性指令為準
<body>
<div id="app" v-color="msg">
<input type="text" v-focus/>
</div>
<br><br>
<p>
在第二個app1例項中我們同樣使用了v-color指令，當有與v-color是app
中的區域性指令所以無法生效，當v-focus卻可以生效
</p>
<div id="app1" v-color="msg">
<input type="text" v-focus/>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 在這裡我們定義一個全域性元件 它可以在 全域性使用
Vue.directive('focus', {
inserted: function(el) {
el.focus();
el.placeholder = "我使用了自定義自動聚焦指令"
}
});
// 建立 第#app 例項
var vm = new Vue({
el: "#app",
data: {
msg: {
color: 'red',
width: "200px",
height: "200px"
},
},
// 在這裡我們定義一個 區域性指令 它只能在#app元件上使用
directives: {
color: {
bind: function(el, binding) {
// 根據指令的引數設定背景色 寬 高
el.style.backgroundColor = binding.value.color;
el.style.width = binding.value.width;
el.style.height = binding.value.height;
}
}
}
});
new Vue({
el:"#app1",
})
</script>
</body>
二.監聽器和過濾器
1.計算屬性
<body>
<div id="app">
<!--
當多次呼叫 reverseString 的時候
只要裡面的 num 值不改變 他會把第一次計算的結果直接返回
直到data 中的num值改變 計算屬性才會重新發生計算
-->
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<!-- 呼叫methods中的方法的時候 他每次會重新呼叫 -->
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
計算屬性與方法的區別:計算屬性是基於依賴進行快取的，而方法不快取
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao',
num: 10
},
methods: {
reverseMessage: function() {
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
//computed 屬性 定義 和 data 已經 methods 平級
computed: {
// reverseString 這個是我們自己定義的名字
reverseString: function() {
console.log('computed')
var total = 0;
// 當data 中的 num 的值改變的時候 reverseString 會自動發生計算
for (var i = 0; i <= this.num; i++) {
total += i;
}
// 這裡一定要有return 否則 呼叫 reverseString 的 時候無法拿到結果
return total;
}
}
});
</script>
</body>
2.偵聽器 watch
- 使用watch來響應資料的變化
- 一般用於非同步或者開銷較大的操作
- watch 中的屬性 一定是data 中 已經存在的資料
- 當需要監聽一個物件的改變時，普通的watch方法無法監聽到物件內部屬性的改變，只有data中的資料才能夠監聽到變化，此時就需要deep屬性對物件進行深度監聽
<body>
<div id="app">
<p>當 input值發生改變時觸發監聽器 求和</p>
<!-- 定義 兩個 數使用監聽器來 求和 -->
<label for="fristNumber">第一個數</label>
<input type="number" name="" id="fristNumber" v-model.number="fristNumber" />
<label for="lastNumber">第二個數</label>
<input type="number" name="" id="lastNumber" v-model.number="lastNumber" />
<br>兩者之和:{{sum}}
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
fristNumber: 21,
lastNumber: 12,
sum: ''
},
// mounted 鉤子函式 在初始化頁面 後執行
mounted: function() {
this.sum = this.fristNumber+this.lastNumber
},
// 監聽器
watch: {
// 第一個數的監聽器 當第一個數改變時,執行方法求和
fristNumber: function(val) {
this.sum = val + this.lastNumber;
},
// 第二個數的監聽器 當第一個數改變時,執行方法求和
lastNumber: function(val) {
this.sum = val + this.fristNumber;
}
}
})
</script>
</body>
3.過濾器
- vue.js允許自定義過濾器
- 過濾器不該變真正的data資料，改變的是渲染頁面的結果
- 全域性過濾器使用filter定義，區域性使用filters定義，一個不加s一個加s
- 支援級聯
1.全域性過濾器
<body>
<div id="app">
<!-- <p>修改input值</p>
<input type="text" name="" id="" v-model="msg"/> -->
<!-- 在msg 渲染頁面時 ，先走了一遍msgFormat這個過濾器以過濾器反覆的資料為準 -->
<p>{{msg | msgFormat}}</p>
// 全域性 帶參
<p>{{msg | msgFormat2(1,3,5)}}</p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 定義全域性 過濾器
Vue.filter('msgFormat', function(msg) {
//
if (1 === msg) {
return "msg等於1";
} else {
return "msg不等於1";
}
});
<!-- 定義全域性帶參過濾器 msg是例項中的msg,...arg是可變引數 -->
Vue.filter("msgFormat2", function(msg, ...arg) {
// 將過濾器傳入的值進行遍歷求和並返回渲染
var sun = 0;
for (var i = 0; i < arg.length; i++) {
sun = sun + arg[i]
}
sun = sun+msg;
return arg.length+"數之和加上msg等於"+sun
});
new Vue({
el: "#app",
data: {
// 設定msg等於1
msg: 1,
}
});
</script>
</body>
2.區域性過濾器
<body>
<!--
區域性過濾器和全域性過濾器很相似 就像區域性監聽器監聽器一樣只能
在當前例項中使用，在其他例項中使用不起效果
-->
<div id="app">
<p>{{msg | msgFormat}}</p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: 1,
},
// 區域性過濾器
filters: {
// msgFormat過濾器
msgFormat: function(msg) {
if (msg === 1) {
return "msg的值等於1";
} else {
return "msg的值不等於1";
}
}
}
})
</script>
</body>
三.生命週期和鉤子函式
1.生命週期
- 事物從出生到死亡的過程
- Vue例項從建立 到銷燬的過程 ，這些過程中會伴隨著一些函式的自呼叫。我們稱這些函式為鉤子函式
2.常用的鉤子函式
| beforeCreate | 在例項初始化之後，資料觀測和事件配置之前被呼叫 此時data 和 methods 以及頁面的DOM結構都沒有初始化 什麼都做不了 |
|---|---|
| created | 在例項建立完成後被立即呼叫此時data 和 methods已經可以使用 但是頁面還沒有渲染出來 |
| beforeMount | 在掛載開始之前被呼叫 此時頁面上還看不到真實資料 只是一個模板頁面而已 |
| mounted | el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該鉤子。 資料已經真實渲染到頁面上 在這個鉤子函式裡面我們可以使用一些第三方的外掛 |
| beforeUpdate | 資料更新時呼叫，發生在虛擬DOM打補丁之前。 頁面上資料還是舊的 |
| updated | 由於資料更改導致的虛擬DOM重新渲染和打補丁，在這之後會呼叫該鉤子。 頁面上資料已經替換成最新的 |
| beforeDestroy | 例項銷燬之前呼叫 |
| destroyed | 例項銷燬後呼叫 |
3.鉤子函式使用演示
<body>
<div id="app">
<input v-model="msg" />
<p v-text="msg"></p>
<button type="button" v-on:click="destroyVm">點選銷燬例項</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: "鉤子函式演示"
},
beforeCreate: function() {
console.log("beforeCreate例項初始化之後呼叫");
},
created: function() {
console.log("例項建立完成後created被呼叫");
},
beforeDestroy:function(){
console.log("銷燬之前呼叫");
},
destroyed:function(){
console.log("銷燬之後呼叫");
},
methods: {
destroyVm: function() {
alert("例項被銷燬");
// $destroy 銷燬 vm例項銷燬後vm例項將不存在
vm.$destroy();
}
}
});
</script>
</body>
四.vue陣列拓展方法
- 在 Vue 中，直接修改物件屬性的值無法觸發響應式。當你直接修改了物件屬性的值，你會發現，只有資料改了，但是頁面內容並沒有改變
- 變異陣列方法即保持陣列方法原有功能不變的前提下對其進行功能拓展
push() |
往陣列最後面新增一個元素，成功返回當前陣列的長度 |
|---|---|
pop() |
刪除陣列的最後一個元素，成功返回刪除元素的值 |
shift() |
刪除陣列的第一個元素，成功返回刪除元素的值 |
unshift() |
往陣列最前面新增一個元素，成功返回當前陣列的長度 |
splice() |
有三個引數，第一個是想要刪除的元素的下標（必選），第二個是想要刪除的個數（必選），第三個是刪除 後想要在原位置替換的值 |
sort() |
sort() 使陣列按照字元編碼預設從小到大排序,成功返回排序後的陣列 |
reverse() |
reverse() 將陣列倒序，成功返回倒序後的陣列 |
替換陣列
- 不會改變原始陣列，但總是返回一個新陣列
| filter | filter() 方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。 |
|---|---|
| concat | concat() 方法用於連線兩個或多個數組。該方法不會改變現有的陣列 |
| slice | slice() 方法可從已有的陣列中返回選定的元素。該方法並不會修改陣列，而是返回一個子陣列 |
動態陣列響應式資料
- Vue.set(a,b,c) 讓 觸發檢視重新更新一遍，資料動態起來
- a是要更改的資料 、 b是資料的第幾項、 c是更改後的資料
五.章節小題
- 使用vue完成頁面crud操作
<body>
<!-- 我們定義一個頁面級的增刪查改案例來練習陣列的操作 -->
<div id="app" class="tableCard">
<input type="text" v-model="id" disabled="disabled" />
<span>{{name}}</span><input type="text" name="" id="name" value="" v-model="name" />
<button type="button" v-on:click="addList">提交</button>
<table class="tableBody">
<!-- 表頭 -->
<tr>
<th v-for="t in title">
{{t}}
</th>
</tr>
<!-- 主體 -->
<tr v-for="(list,index) in dataList">
<td>{{list.id}}</td>
<td>{{list.name}}</td>
<td>
<a href="#" v-on:click="update(list.id)">修改</a>
<a href="#" v-on:click="deleteData(list.id)">刪除<a>
</td>
</tr>
</table>
<div id="" style="text-align: center;">
總資料量:<span>{{total}}</span>
</div>
</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
flag: false,
name: '',
id: '',
title: ["id", "姓名", "操作"],
dataList: [{
id: 1,
name: "李四"
},
{
id: 2,
name: "王五"
},
{
id: 3,
name: "張飛"
},
{
id: 4,
name: "小喬"
},
]
},
methods: {
// 定義新增 方法
addList: function() {
// 新增
if (this.flag === false) {
var data = {};
// 獲取 addName
data.name = this.name;
// console.log(addName);
// 求新增前資料長度
data.id = this.dataList.length + 1;
// console.log(dataSzie)
// push 操作 往陣列最後一個新增資料
this.dataList.push(data);
} else {
// 修改
var list = this.dataList;
for (var i = 0; i <= list.length; i++) {
if (this.id == list[i].id) {
// 遍歷 資料集合 將 對應id的值改為修改後的值
list[i].name = this.name;
break;
}
}
this.flag = false;
/* this.name = '';
this.id = ''; */
}
// 新增 過後清空
this.name = '';
this.id = '';
},
update: function(dataId) {
var list = this.dataList;
for (var i = 0; i <= list.length; i++) {
if (list[i].id == dataId) {
this.id = list[i].id;
this.name = list[i].name;
this.flag = true;
}
}
},
deleteData: function(dataId) {
// 使用過濾器 將 刪除 的資料過濾出去
this.dataList = this.dataList.filter(function(item) {
return item.id != dataId;
});
}
},
computed: {
total: function() {
// 3.1 計算圖書的總數
return this.dataList.length;
}
}
})
</script>
</body>
個人學習，內容簡略