86 vue.js常用屬性
阿新 • • 發佈：2018-11-07
主要內容:https://pizzali.github.io/B%A4/
1 vue.js的使用方式及文字插值
<div id="app">{{ greeting }}</div>
<script>
new Vue({
el: "#app",
data: {
greeting: "Hello Vue",
}
})
</script>
採用原生的dom
// 原生js
let odiv = document.getElementById("app-01");
odiv.innerText = "Hello Vue!";
2 常用指令:
2.1 v-text: 類似於雙大括號渲染資料的另外一種方式
<div id="app" v-text="greeting"></div>
<script>
new Vue({
el: '#app',
data: {
greeting: "Hello World"
}
})
</script>
2.2 v-html: 由於v-test無法渲染標籤字串, 所以引出v-html
<div id="app" v-html="greeting"></div>
<script>
new Vue({
el: "#app",
data: {
greeting: "<h1>Hello Vue</h1>"
}
})
</script>
2.3 v-for : 陣列和物件的渲染方式
<div id="app"> <ul> <li v-for="aihao in fuming">{{aihao}}</li> </ul> <ul> <li v-for="student in students">姓名:{{student.name}}年齡:{{student.age}}愛好:{{student.hobby}}</li> </ul> </div> <script> newView CodeVue({ el: '#app', data: { fuming: ['黃袍哥', '吃雞', '大魚大肉'], students:[ { name: '張敏聰', age: 23, hobby: 'girls', }, { name:'毛尖妹妹', age: 18, hobby: 'study', }, ], } }) </script>
2.4 v-if: 渲染資料的時候根據條件進行判斷
<div id="app">
<div v-if="role == 'cainingning'">
<h1>歡迎美女光臨</h1>
</div>
<div v-else-if="role == 'juyingying'">
<h2>'''''</h2>
</div>
<div v-else>
<h1>努力學習</h1>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
role: 'cainingning'
}
})
</script>
2.5 v-show:
<div id="app">
<div v-show="isShow">Hello yiyi</div>
</div>
<script>
//v-開頭的資料就是幫我們渲染資料用的
let vm = new Vue({
el: '#app',
data: {
isShow: true,
}
})
</script>
注意: v-if 的底層採用的是appendChild來實現的, v-show通過樣式的display控制標籤的顯示
載入效能：v-if載入速度更快，v-show載入速度慢
切換開銷：v-if切換開銷大，v-show切換開銷小
v-if是惰性的，它是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建，v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好，如果在執行時條件很少改變，則使用v-if較好。
2.6 v-bind: 繫結屬性, 冒號後面跟標籤的屬性, 屬性後面的等號指向資料,
<div id="app">
<a v-bind:href="jingdong">去京東</a>
<div :class="[isActive]"></div>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
jingdong: "https://www.jd.com",
isActive: 'active',
}
})
</script>
2.7 v-on:使用v-on可以在標籤上面繫結事件,注意新建的例項vue.app 中多了一個屬性, methods, 在methods中, 是我們具體事件的實現方式
<div id="app">
<h1 :class="{ active: isActive}">悶騷哥</h1>
<button v-on:click="changeColor">點選變粉</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
isActive: false
},
methods: {
changeColor: function () {
this.isActive = !this.isActive
}
}
})
</script>
2.8 v-model: 當我們修改資料後, 修改後的資料能夠及時的渲染到模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name"/> <input type="checkbox" value="男" v-model="genders"/> <input type="checkbox" value="女" v-model="genders"/> <select v-model="girlfriends" multiple> <option>毛尖妹妹</option> <option>小萌芽</option> <option>寧寧</option> </select> <hr> {{name}} {{genders}} {{girlfriends}} </div> <!--v-model 當我們修改資料後, 修改後的資料能夠及時的渲染到模板--> <script> let vm = new Vue({ el: "#app", data:{ name: 'juyingying', genders:[], girlfriends:[] } }) </script> </body> </html>View Code
v-model: 計算屬性和監聽: ,(一下兩個有一個有屬性和監聽的詳細解釋和區別)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>學科</th> <th>成績</th> </tr> </thead> <tbody> <tr> <td>python</td> <td><input type="text" v-model="python"></td> </tr> <tr> <td>vue</td> <td><input type="text" v-model="vue"></td> </tr> <tr> <td>go</td> <td><input type="text" v-model="go"></td> </tr> <tr> <td>總成績</td> <td>{{sumScore}}</td> </tr> </tbody> </table> <hr> {{python}} {{sumScore}} </div> <script> let vm = new Vue({ el:"#app", data:{ python:88, vue:89, go:90, }, //計算 computed:{ //在頁面載入的時候執行 sumScore: function () { console.log(1); return this.python + this.vue + this.go } }, //當計算的邏輯比較複雜時, 引入了watch //當data裡面的資料發生改變的時候, 才會執行, 用於監聽data的改變 watch:{ python: function () { console.log(2); alert("python 被修改了") } } }) </script> </body> </html>View Code
2.9 常用指令之指令修飾符: number:可以轉換成數字, lazy: 移除游標時計算
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>學科</th> <th>成績</th> </tr> </thead> <tbody> <tr> <td>python</td> <td><input type="text" v-model="python"></td> </tr> <tr> <td>vue</td> <td><input type="text" v-model="vue"></td> </tr> <tr> <td>go</td> <td><input type="text" v-model="go"></td> </tr> <tr> <td>總成績</td> <td>{{sumScore}}</td> </tr> </tbody> </table> <hr> {{python}} {{sumScore}} </div> <script> let vm = new Vue({ el:"#app", data:{ python:88, vue:89, go:90, }, //計算 computed:{ //在頁面載入的時候執行 sumScore: function () { console.log(1); return this.python + this.vue + this.go } }, //computes, 也可以實現監聽事件,但是當計算邏輯比較複雜的時候, 載入速度慢, 所以不合適, //當data裡面的資料發生改變的時候, 才會執行, 用於監聽data的改變 watch:{ python: function () { console.log(2); alert("python 被修改了") } } }) </script> </body> </html>View Code
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>學科</th> <th>成績</th> </tr> </thead> <tbody> <tr> <!--number就是指令修飾符, 把他轉換成數字 , lazy就是退出游標後計算--> <td>python</td> <td><input type="text" v-model.number.lazy="python"> </td> </tr> <tr> <td>vue</td> <td><input type="text" v-model.number.lazy="vue"> </td> </tr> <tr> <td>go</td> <td><input type="text" v-model.number.lazy="go"> </td> </tr> <tr> <td>總成績</td> <td>{{sumScore}}</td> </tr> </tbody> </table> </div> <script> let vm = new Vue({ el: '#app', data: { python: 88, vue: 99, go: 100 }, computed:{ sumScore: function () { console.log(this); return this.python + this.vue + this.go } } }) </script> </body> </html>View Code
2.10 常用指令之後去dom元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> <style> .active { background-color: #c1e2b3; } </style> </head> <body> <div id="app"> <div ref="myRe">peiqi</div> <!--<div :class="[isActive]">peiqi</div>--> <button v-on:click="changeColor">點選讓佩奇變綠</button> <script> let vm = new Vue({ el: '#app', data: { isActive:'active', }, methods: { changeColor:function () { console.log(this); this.$refs.myRe.className = this.isActive } } }) </script> </div> </body> </html>View Code
2.11 常用指令之自定義指令:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="static/vue.min.js"></script>
<style>
.box {
width: 50px;
height: 60px;
background-color: #5bc0de;
}
</style>
</head>
<body>
<div id="app">
<div v-pos.right.bottom="post" class="box">Hello World</div>
<!--<div v-pos="post" class="box">Hello World</div>-->
</div>
<script>
Vue.directive('pos', function (el, bindding) {
console.log('el', el);
console.log('bindding', bindding);
let decorators = bindding.modifiers;
if(bindding.value){
//方法一
// el.style['position'] = 'fixed';
// el.style['right'] = 0;
// el.style['bottom'] = 0;
//加指令修飾符
el.style['position'] = 'fixed';
for(let key in decorators){
el.style[key] = 0
}
}
});
//自定義屬性
let vm = new Vue({
el: '#app',
data:{
post: true
}
})
</script>
</body>
</html>