vue2.5入門——2.vue基礎語法
阿新 • • 發佈：2019-02-01
一、建立第一個vue例項
vue/vue.js
寫入vue.js開發版
vue/index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue入門</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body> 在瀏覽器開啟顯示hello world
二、掛載點、模板與例項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue入門</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 掛載點、模板，例項之間的關係 -->
<div id="root"> </div ①最外層id = root的div稱為例項vue的掛載點。
三、Vue例項中的資料、事件和方法
<div v-text = "msg"></div>
<div v-html = "msg"></div>
<div>msg</div>注意v-text和v-html的區別。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue入門</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root" v-on:click="handleClick">hello {{msg}}</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello"
},
methods:{
handleClick:function() {
this.msg = "world"
}
}
})
</script>
</body>
</html>以上實現了方法 點選（事件）hello變成world
v-on可以簡寫為@
四、vue中的屬性繫結和雙向資料繫結
1、屬性繫結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>屬性繫結和雙向資料繫結</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="title">hello world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world"
}
})
</script>
</body>
</html>v-bind:title=”title”,則繫結data下面的title。
可以簡寫為:titile
相當於title = “this is hello world”
title 滑鼠放上去顯示的內容
2、雙向資料繫結
<div id="root">
<input v-model = "content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"this is content"
}
})
</script>v-model模板指令，輸入框內容改變，data裡面也改變。雙向繫結
:value，data不改變，單向繫結
四、vue中的計算屬性和偵聽器
1、計算屬性 computed
<body>
<div id="root">
姓：<input v-model="firstname" />
名：<input v-model="lastname" />
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstname:'',
lastname:''
},
computed:{
fullName: function(){
return this.firstname + ' ' + this.lastname
}
}
})
</script>2、偵聽器 watch
<div id="root">
姓：<input v-model="firstname" />
名：<input v-model="lastname" />
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstname:'',
lastname:'',
count:0
},
computed:{
fullName: function(){
return this.firstname + ' ' + this.lastname
}
},
watch:{
firstname: function(){
this.count ++
},
lastname: function(){
this.count ++
}
}
})
</script>也可以修改為
watch:{
fullName: function(){
this.count ++
}
}當輸入框裡面發生改變時，count加一
六、v-if，v-show，v-for指令
1、v-if
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick: function () {
this.show = !this.show;
}
}
})
</script>當點選toggle按鈕時，hello world會顯示或者隱藏
在控制檯，當點選toggle按鈕，hello world消失時，是對dom中直接把div標籤移除。
當修改為 v-show ,hello world消失時，是style =“display:none”
用v-show比較頻繁時更好。
2、v-for
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
new Vue({
el:"#root",
data:{
list:[1,2,3]
}“item of list”意思：迴圈llist這個資料項；每一次迴圈吧=把項的內容放到item這個變數裡面去；後邊把item輸出出來。
key的屬性，提升每一項渲染的效率/效能。每一項key都不相同。