Vue入門(1)
阿新 • • 發佈:2019-01-07
安裝
$ npm install vue
安裝完目錄檔案介紹
然後新建一個頁面,引入vue.js, 建立vue物件
<div id="app"></div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app", //掛載點
//el:document.getElementById('app'),
//或者可以這麼寫,更為優化,將元素直接找到,避免vue內部做判斷
template:"<h1>{{text}} Vue</h1>", //模版,
data:function(){ //動態資料的宣告,data後也可以直接是一個物件
return{
text:"hello"
}
}
})
</script>
插值表示式
{{text}}叫做插值表示式,{{}}裡可以是物件,字串,布林值或者三元表示式。
!注意:{{}}裡的值或者表示式必須在data這個函式返回的物件中宣告
指令
在vue中提供了一些對於頁面+資料的更為方便的輸出,這些操作就叫做指令,以v-xxx表示。 指令中封裝了一些DOM行為,結合屬性作為一個暗號,暗號有對應的值,根據不同的值,框架會進行相關DOM操作的繫結。
1.v-text和v-html
必須用於雙標籤
v-text 相當於innerText
v-html 相當於innerTHTML
<div id="app">
<div v-text="val1">啊哈哈哈哈哈</div>
<div v-html="val2">啊哈哈哈哈哈</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app", //發生行為的目的地
data:function(){
return{
val1: '<h1>val2</h1>',
val2: '<h1>val2</h1>',
}
}
})
</script>
效果圖:
2.v-if , v-else-if , v-else
v-if通過操作dom渲染,消耗記憶體和效能的 如果為假,直接清除掉dom節點
以上三個指令的使用必須是相鄰的dom元素
<div id="app">
<h1 v-if="num == 1">顯示v-if</h1>
<h1 v-else-if="num == 2">顯示v-else-if</h1>
<h1 v-else>顯示v-else</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app", //發生行為的目的地
data:function(){
return{
num:2,
}
}
})
</script>
效果圖:
3.v-show
顯示隱藏,只改變css,不消耗記憶體和效能|
為false時候相當於給元素新增display;none屬性,dom節點還存在
<div id="app">
<h2 v-show="isShow">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app", //發生行為的目的地
data:function(){
return{
isShow:false,
}
}
})
</script>
4.v-bind
給元素屬性賦值,v-bind:屬性名,可以簡寫為 :屬性名
是從vue到頁面的單向資料流
<div id="app">
<div :class="{ active: isActive}">測試1</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">測試2</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app", //發生行為的目的地
data:function(){
return{
activeColor: 'red',
fontSize: 30,
isActive: false
}
}
})
</script>
5.v-on
給元素繫結事件 v-on:原生事件名字="進行的操作或者函式名",
可以簡寫為 @原生事件名字="進行的操作或者函式名"
<div id="app">
<button @click="add">add</button>
<button @click="del">del</button>
{{counter}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app", //發生行為的目的地
data:function(){
return{
counter:999,
}
},
methods:{
add(){
console.log(this);
this.counter ++;
},
del(){
this.counter --;
}
}
})
</script>
控制檯看下列印的this:
關於this
1. vue已經把以前this是window或者事件物件的問題搞定了
2. methods和data本身是在同一個物件中的,所以在該物件中可以通過this.隨意取
3. this.xxx取data中的值,this.xxxMethod呼叫methods中的函式。
6.v-model
雙向資料繫結
!注意:v-model只能給具有value屬性的元素進行雙向資料繫結
<div id="app">
<input type="text" v-model="counter"/>當輸入100時候下面按鈕顯示出來
<br/>
<button v-show=" counter == '100' ">按鈕</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app", //發生行為的目的地
data:function(){
return{
counter:999
}
}
})
</script>
7.v-for
陣列迴圈 v-for="value,index in arr
物件迴圈 v-for="value,key,index in obj
<div id="app">
<ul>
<li v-for="value,index in arr">
{{value}}--{{index}}
</li>
</ul>
<ol>
<li v-for="value,key,index in obj">
{{key}}---{{value}}--{{index}}
</li>
</ol>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app", //發生行為的目的地
data:function(){
return{
arr: [1,2,3,4,5,6],
obj:{
name:"緣滅",
age:18,
}
}
}
})
</script>
效果圖: