文章目錄
- 前言
- 一、初識vue
- 1.vue的核心特性
- 2.安裝方式
- 3.基礎選項
- 二、vue基礎指令
- 1.v-once指令
- 2.v-text
- 3.v-html
- 4.v-bind
- 4.v-for
- 5.v-show
- 6.v-if
- 三、事件與表單處理
- 1.v-on
- 2.v-model表單輸入系結
- 四、修飾符
- 1.事件修飾符
- 2.按鍵修飾符
- 3.系統修飾符
- 4.滑鼠按鍵修飾符
- 5.v-model修飾符
- 五、進階語法
- 1.自定義指令
- 2.過濾器
- 3.計算屬性
- 4.偵聽器
- 總結
前言
指令的本質就是HTML自定義屬性，Vue.js的指令就是以v-開頭的自定義屬性，接下來開始學習指令，
一、初識vue
1.vue的核心特性
vue有兩個核心特性：資料驅動視圖，組件化開發，
資料驅動視圖：資料變化會自動更新到對應元素中，無需手動操作 DOM,這種行為稱作單向資料系結，對于輸入框等可輸入元素，可設定雙向資料系結，
組件化開發：組件化開發，允許我們將網頁功能封裝為自定義HTML標簽，復用時書寫自定義標簽名即可，組件不僅可以封裝結構，還可以封裝樣式與邏輯代碼，大大提高了開發效率與可維護性，
2.安裝方式
1.本地引入
開發版本:https://cn.vuejs.org/js/vue.js
生產版本:https://cn.vuejs.org/js/vue.min.js
2.cdn引入
最新穩定版:https://cdn.jsdelivr.net/npm/vue
指定版本:https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js
3.npm引入
3.基礎選項
1.el選項
可以為CSS選擇器格式的字串或HTMLElement實體，但不能為html或 body
掛載完畢后，可以通過vm.$el進行訪問，
2.data選項
用于存盤Vue實體需要使用的資料,值為物件型別，data 中的資料可以通過 vm.$data.資料或vm.資料訪問，
3.methods選項
用于存盤需要在 Vue 實體中使用的函式，
二、vue基礎指令
1.v-once指令
使元素內部差值運算式只生效一次，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>隨著內容變化而變化：{{content}}</p>
<p v-once>內容變化而不變化：{{content}}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
content:"文本內容"
}
})
</script>
</body>
</html>
2.v-text
為元素添加指定的內容，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-text="100"></p>
<p v-text="content">原內容</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
content:"文本內容"
}
})
</script>
</body>
</html>
3.v-html
為元素添加標簽元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-html="content">默認內容</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
content:"<span>span里面的內容</span>"
}
})
</script>
</body>
</html>
4.v-bind
用于動態系結HTML屬性，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-bind:title="title">內容文本</p>
<p :title = "title">內容文本</p>
<p :class = "'a' + 1 + 2">內容文本</p>
<p v-bind = "arrObj">內容文本</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue ({
el:"#app",
data:{
title:"這是標題內容",
arrObj:{
id:"hh",
class:"four",
title:"這是第四個標題內容",
about:"簡潔"
}
}
})
</script>
</body>
</html>
4.v-for
用于遍歷陣列、物件、單個值資料從而渲染結構，（與：key結合使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- <li v-for="item in arr">{{item}}</li> -->
<!-- <li v-for="(item,index) in arr">{{item}}，{{index}}</li> -->
<li v-for="(value,key,index) in obj">{{value}}，{{key}},{{index}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue ({
el:"#app",
data:{
// arr:['內容1','內容2','內容3']
obj:{
c1:'蘋果',
c2:'梨子',
c3:'橘子'
}
}
})
</script>
</body>
</html>
5.v-show
用于控制元素顯示或隱藏，適用于顯示隱藏頻繁切換時使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-show="12 > 3">標簽內容</p>
<p v-show="false">標簽內容</p>
<p v-show="bool">標簽內容</p>
</div>
<script src="vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
bool:true
}
})
</script>
</body>
</html>
6.v-if
用于根據條件控制元素的創建與移除，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="12 < 3">標簽內容1</p>
<p v-else-if="false">標簽內容2</p>
<p v-else>標簽內容3</p>
</div>
<script src="vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
bool:true
}
})
</script>
</body>
</html>
三、事件與表單處理
1.v-on
用于進行元素的事件系結，
<!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>
<div id="app">
<p>{{ content }}</p>
<button v-on:click="content='新的內容1'">按鈕1</button>
<button @click="content='新內容2'">按鈕2</button>
<button @click="fn">按鈕3</button>
<button @click="fn2(200, $event)">按鈕4</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: '這是默認內容'
},
methods:{
fn (event) {
console.log(event)
this.content="內容3"
},
fn2 (value,event) {
console.log(value, event);
}
}
})
</script>
</body>
</html>
2.v-model表單輸入系結
用于給 、及元素設定雙向資料系結，
四、修飾符
1.事件修飾符
.once:事件只執行一次的修飾符
.stop:阻止事件向外傳播（事件冒泡）的修飾符
.prevent:阻止默認事件行為的修飾
修飾符除此之外還有，可查看官方檔案進行學習，
2.按鍵修飾符
.a .b 等字母按鍵可直接寫字母進行設定，數字按鍵keycode按鍵碼進行設定，
.esc .enter .delete .space等特殊按鍵使用內置別名進行設定，
3.系統修飾符
.ctrl .shift .alt等系統修飾符
4.滑鼠按鍵修飾符
.left .right .middle滑鼠左鍵、右鍵、滾輪鍵修飾符
5.v-model修飾符
.trim用于將輸入框兩端的空格去掉的修飾符
.lazy用于將input觸發形式改為change形式的修飾符
.number將輸入內容含有數字型別時轉換為parseFloat的浮點數，
五、進階語法
1.自定義指令
（1）自定義全域指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
<script src="vue.js"></script>
<script>
Vue.directive("focus",{
inserted(el) {
el.focus()
}
})
new Vue ({
el:"#app",
data:{
}
})
</script>
</body>
</html>
（2）自定義區域指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
<script src="vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
},
directives:{
focus:{
inserted(el){
el.focus()
}
}
}
})
</script>
</body>
</html>
2.過濾器
過濾器能在插值運算式和v-bind 中使用，通過管道符|連接資料，
（1）全域過濾器
可以在全域使用，
（2）區域過濾器
只能在當前的vue實體中使用，
3.計算屬性
使用時為屬性形式，計算式時自動使用對應函式，
計算屬性默認只有getter,Vue.js也允許給計算屬性設定setter ，
4.偵聽器
偵聽器用于監聽資料變化，并執行指定操作，
注意:當更改（非替換）陣列或物件時，回呼函式中的新值與舊值相同，因為它們的參考都指向同一個陣列、物件，
注意:陣列操作不要使用索引與length，無法觸發偵聽器函式，
總結
這部分學習了vue的基礎，vue的基本使用操作已經掌握了，每天堅持學習前端，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296894.html
標籤：其他