vue學習之常用命令
阿新 • • 發佈：2018-10-30
常用命令 posit num 綁定 this scrip efs lazy 性能
一、插值
1.1 +號運用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">{{ greeting + greeting }}</div>
<script>
new Vue({
el: "#app",
data: {
greeting: "Hello world"
}
})
</script>
</body>
</html>
二、v-text
類似雙大括號語法渲染數據的另一種方式是使用v-text。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" v-text="greeting"></div>
<script>
new Vue({
el: "#app",
data: {
greeting: "Hello world"
}
})
</script>
</body>
</html>
三、v-html
雙大括號語法無法渲染HTML標簽，我們需要使用v-html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" v-html="greeting"></div>
<script>
new Vue({
el: "#app",
data: {
greeting: "<h1>Hello world</h1>"
}
})
</script>
</body>
</html>
四、v-for
接下來，我們看看數組和對象的渲染方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" >
<ul>
<li v-for="item in guniang">{{ item }}</li>
</ul>
<ul>
<li v-for="item in students">{{ item.name }}的愛好是{{ item.hobby }}</li>
</ul>
<ul>
<li v-for="item in student">{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
guniang: [‘逛街‘, ‘美甲‘, ‘吃‘],
students: [
{
name: "jiaxiaoliang",
hobby: ‘girls‘
},
{
name: "zhaofengfeng",
hobby: ‘girls‘
},
{
name: ‘xiaohe‘,
hobby: ‘boys‘
}
],
student: {
name: ‘alex‘,
age: 87
}
}
})
</script>
</body>
</html>
五、v-if
渲染數據的時候，同樣也可以使用條件判斷，我們來看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app" >
<div v-if="name == ‘guniang‘">
歡迎美女光臨~~
</div>
<div v-else-if="name == ‘pizza‘">
歡迎帥哥光臨
</div>
<div v-else>
滾~~
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "guniang"
}
})
</script>
</body>
</html>
通過上面的代碼我們可以看出，v-if的作用是控制標簽的顯示，它通過判斷添加標簽，底層采用的是appendChild來實現的，下面我們來看一個同樣也是控制標簽顯示的另一個指令v-show。
六、v-show
與v-if不同的是，v-show通過樣式的display控制標簽的顯示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" >
<div v-show="isShow" class="box">xxxx</div>
</div>
<script>
new Vue({
el: "#app",
data: {
isShow: true
}
})
</script>
</body>
</html>
與v-if不同的是，v-show通過樣式的display控制標簽的顯示。
v-if和v-show的性能比較
我們簡單比較一下二者的區別：
實現方式：v-if底層采用的是appendChild來實現的，v-show通過樣式的display控制標簽的顯示，正因為實現方式上面有差異，導致了他們的加載速度方面產生了差異；
加載性能：v-if加載速度更快，v-show加載速度慢
切換開銷：v-if切換開銷大，v-show切換開銷小
v-if是惰性的，它是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建，v-if 也是惰性的：如果在初始渲染時條件為假，則什麽也不做——直到條件第一次變為真時，才會開始渲染條件塊。
v-show 就簡單得多——不管初始條件是什麽，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好，如果在運行時條件很少改變，則使用v-if較好。
七、v-bind
綁定屬性，不多說了，註意冒號後面跟標簽的屬性，屬性後面的等號指向數據，它可以簡寫為 :class, :href。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.active {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" >
<!--<div v-bind:class="{active: isActive}">xxxx</div>-->
<!--<div v-bind:class="[isActive]">Hello World!</div>-->
<div :class="[isActive]">Hello World!</div>
</div>
<script>
new Vue({
el: "#app",
data: {
isActive: ‘active‘,
}
})
</script>
</body>
</html>
八、v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.active {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" >
<input type="text" v-model="name"/>
<input type="checkbox" value="男" v-model="gender"/>
<input type="checkbox" value="女" v-model="gender"/>
<p>請選擇你的女朋友</p>
<select id="" name="" v-model="girlFriends">
<option>alex</option>
<option>peiqi</option>
<option>egon</option>
</select>
<hr>
{{ name }}
{{ gender }}
{{ girlFriends}}
</div>
<script>
new Vue({
el: "#app",
data: {
name: ‘pizza‘,
gender: [],
girlFriends: []
}
})
</script>
</body>
</html>
九、v-on
另一個非常重要的指令是v-on，使用v-on我們可以在標簽上面綁定事件，註意我們新建的vue實例app01中多了一個屬性，methods，在methods中，是我們具體事件的實現方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</head>
<body>
<div id="app" >
<p v-bind:class="{box: isShow}">alex</p>
<button v-on:click="doAlex">點擊讓Alex變綠</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: ‘pizza‘,
gender: [],
girlFriends: [],
isShow: false
},
methods: {
doAlex: function () {
this.isShow = true;
},
doPeiqi: function () {
}
}
})
</script>
</body>
</html>
十、指令修飾符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</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.number="python"/></td>
</tr>
<tr>
<td>Linux</td>
<td><input type="text" v-model.lazy="linux"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model.trim="vue"/></td>
</tr>
</tbody>
</table>
<hr>
{{ python }}
{{ linux }}
{{ vue }}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
python: 60,
linux: 60,
vue: 60
}
})
</script>
</body>
</html>
十一、計算屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</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.number="python"/></td>
</tr>
<tr>
<td>Linux</td>
<td><input type="text" v-model.lazy="linux"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model.trim="vue"/></td>
</tr>
<tr>
<td>總成績</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
<hr>
{{ python }}
{{ linux }}
{{ vue }}
{{ sumScore }}
<h1>{{ greeting }}</h1>
<h1>{{ reversedGreeting }}</h1>
<input type="text" v-model="name"/>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
python: 60,
linux: 60,
vue: 60,
greeting: "hello vue!",
name: ‘alex‘,
},
methods: {
},
computed: {
sumScore: function () {
console.log(1);
return this.python + this.linux + this.vue;
},
reversedGreeting: function () {
return this.greeting.split(‘‘).reverse().join(‘‘);
},
},
watch: {
name: function () {
console.log(2);
console.log("hahahah");
}
}
})
</script>
</body>
</html>
十二、自定義屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app" >
<div v-pos.bottom.right="post" v-bind:class="{ box: isBox }">alex is big sb.</div>
</div>
<script>
Vue.directive("pos", function (el, bindding) {
console.log("el: ", el);
console.log("bindding: ", bindding);
if (bindding.value) {
el.style.position = ‘fixed‘;
for (let key in bindding.modifiers) {
el.style[key] = 0;
}
}
});
const vm = new Vue({
el: "#app",
data: {
isBox: true,
post: false,
},
methods: {
},
computed: {
},
watch: {
}
})
</script>
</body>
</html>
十三、獲取DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
.box {
color: green;
}
</style>
</head>
<body>
<div id="app" >
<p ref="myAlex">alex</p>
<button v-on:click="doAlex">點擊讓Alex變綠</button>
</div>
<script>
const VM = new Vue({
el: "#app",
data: {
name: ‘pizza‘,
gender: [],
girlFriends: [],
isShow: false
},
methods: {
doAlex: function () {
this.$refs.myAlex.style.color = ‘green‘;
},
doPeiqi: function () {
}
}
})
</script>
</body>
</html>
vue學習之常用命令