Vue經常使用特性
一.表單基本操做
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.複選框操做
咱們如法炮製寫一下複選框javascript
<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自定義全局指令html
<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>
dmoe下載：https://gitee.com/li_shang_shan/vue-feature-demovue
我的學習，內容簡略java
相關文章
- 1. ES6經常使用特性
- 2. vue經常使用屬性
- 3. Vue常用特性
- 4. MVC經常使用特性使用
- 5. Vue經常使用特性-過濾器和生命週期
- 6. Vue學習筆記（一）—— 經常使用特性
- 7. H5經常使用新特性
- 8. ECMAScript6經常使用新特性總結
- 9. es6經常使用語法和特性
- 10. 五6、ES6經常使用新特性
- 更多相關文章...
- • C# 特性（Attribute） - C#教程
- • SQLite 常用函數 - SQLite教程
- • JDK13 GA發佈：5大特性解讀
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ES6經常使用特性
- 2. vue經常使用屬性
- 3. Vue常用特性
- 4. MVC經常使用特性使用
- 5. Vue經常使用特性-過濾器和生命週期
- 6. Vue學習筆記（一）—— 經常使用特性
- 7. H5經常使用新特性
- 8. ECMAScript6經常使用新特性總結
- 9. es6經常使用語法和特性
- 10. 五6、ES6經常使用新特性