Vue複習02-基本使用
阿新 • • 發佈：2021-02-01
技術標籤：vue
一、例項
new Vue({
//掛載到html上
el:'#app',
//資料
data:{},
//成員方法
methods:{},
//計算屬性
computed:{},
//元件
component:{},
//模板
template:{}
})
二、基本語法
- Mustache語法
- v-html v-once v-text v-pre v-cloak
- v-if vs v-show
- v-bind :
- v-on @
- v-for
- v-model
三、基本語法解釋
Mustache語法---vue會自動將html中的{{ }}裡的內容替換為Vue例項中對應的變數名
<div id="app">
<!-- 可以在{{}}內進行任意字串的拼接與計算-->
<h2>{{message}},123</h2>
<h2>{{firstName + ' ' + lastname}}</h2>
<h2>{{counter*2}}</h2>
<h2> v-once---讓html只能得到一次資料,得到Vue例項傳過來的資料後解除繫結
<div id="app">
<h2>{{message}}</h2>
<!-- 讓資料只得到一次，而後不變-->
<h2 v-once>{{message}}</h2>
<h2>
result:
你好啊
你好啊
---------------------------
console ->app.message='123'
---------------------------
result:
123
你好啊
</h2>
</div>
v-html---將data裡面的字串當做html解析
<div id="app">
<h2>{{url}}</h2>
<!-- 如果url是html形式，則用這種方式解析-->
<h2 v-html="url"></h2>
<h2>
result1:<a href="http://www.baidu.com">百度一下</a>
result2:百度一下
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
v-text---和Mastache語法一樣，Mastache語法是v-text的縮寫(不同的是v-text會覆蓋標籤內原有的值)
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message">哈哈哈</h2>
<h2>
result1:你好啊
result2:你好啊
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
v-pre---不解析Mastache語法{{ }}裡的內容
<div id="app">
<h2>{{message}}</h2>
<!-- 不解析{{message}}-->
<h2 v-pre>{{message}}</h2>
<h2>
result1:你好啊
result2:{{message}}
</h2>
</div>
v-cloak---用於解決顯示內容的閃爍問題
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
四、進階語法解釋
v-if和v-show
相同點：都用於解決是否顯示塊元素的問題
不同：v-show本質和css的display：none一樣只是將元素隱藏起來，DOM裡面還存在這個元素。而v-if則是完全不載入這個DOM
用途：
v-show:如果需要對一個塊元素進行頻繁切換
v-if:較少切換時使用
Extra:v-if能夠加在template標籤上，但是v-show不行。
v-if
基本使用
<div id="app">
<h2 v-if="IsShow">
<div>abc</div>
</h2>
<h2 v-else>
<div>edf</div>
</h2>
<h2>
result:edf
---------------
console->app.IsShow=true
---------------
result:abc
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
IsShow:false
}
})
</script>
需要注意的點，如果使用v-if時未給輸入框新增key屬性，則當從v-if切換到v-else時會將輸入框內的值帶到else的輸入框內-------這是因為Vue會複用v-if和v-else的輸入框，當從v-if切換到v-else時改變的其實只是placeholder。
注意給不復用的v-if屬性下的元素新增key
<div id="app">
<span v-if="IsUser">
<label for="username">使用者賬號</label>
<!-- 用key不復用,否則在使用者賬號text輸入的內容會帶到使用者郵箱text中-->
<input type="text" id="username" key="username">
</span>
<span v-else>
<label for="email">使用者郵箱</label>
<input type="text" id="email" key="email">
</span>
<button @click="IsUser=!IsUser">切換型別</button>
</div>
v-bind :
v-bind一般有三種使用形式–
@1 v-bind:src=“imgURL”
@2 v-bind:class={active:isActive}
@3 v-bind:style={color: activeColor}
第一種後面往往跟的是data裡面的字串內容
第二種後面往往跟的是data裡面的Boolean內容
第三種和第一種類似後面跟的是data裡面的字串內容
1.v-bind的基本使用
<div id="app">
<!-- 03-動態繫結屬性-->
<!-- <img v-bind:src="imgURL" alt="">-->
<!-- <a v-bind:href="url">百度一下</a>-->
<!-- 語法糖-->
<img :src="imgURL" alt="">
<a :href="url">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
imgURL:"../monobeno1.png",
url:"http://www.baidu.com"
}
})
</script>
2.用v-bind：繫結class
物件語法—當isActive為true時將active繫結到class上
<div id="app">
<h2 class="title" :class={active:isActive}>{{message}}</h2>
<button v-on:click="btnclick">按鈕</button>
<h2>
class:title active
--------------
console->app.isActive=false
-------------
class:title
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
isActive:true,
},
methods:{
btnclick:function () {
this.isActive=!this.isActive
}
}
})
</script>
陣列語法—一般用於直接繫結上對應的Class而不進行Class的修改
<div id="app">
<h2 :class="[active,line]">{{message}}</h2>
<h2>
class :active line
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
active:'nono',
line:'yesyes'
}
})
</script>
3.用v-bind：繫結style----與繫結class類似
經常將繫結的條件判斷寫成一個計算屬性
<div id="app">
<h2 :style="GetStyles">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
finalSize:200,
color:"red"
},
computed:{
GetStyles:function () {
return {fontSize:this.finalSize+'px',color:this.color}
}
}
})
</script>
v-on @
v-on一般用於事件監聽 v-on:click 類似於 js的onclick函式
<div id="app" v-cloak>
<h2>{{counter}}</h2>
<button @click="Increase">+</button>
<button @click="Delete">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
counter:0
},
methods:{
Increase(){
this.counter++;
},
Delete(){
this.counter--;
}
}
})
</script>
v-on的修飾符
{
stop
prevent
once
}
<div id="app">
<!--1 .stop修飾符的使用 ----防止事件冒泡即點選按鈕 既觸發了btnClick函式又觸發了divClick函式 -->
<div @click="divClick">
aaaaa
<button @click.stop="btnClick">按鈕</button>
</div>
<!--2 .prevent修飾符的使用 阻止預設事件如表單提交-->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!--3 監聽某個鍵盤的鍵帽-->
<input type="text" @keyup="KeyUp">
<!-- 4 once修飾符的使用,點選只能觸發一次-->
<button @click.once="onceClick">按鈕2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊"
},
methods:{
btnClick(){
console.log("btnClick")
},
divClick(){
console.log("divClick")
},
submitClick(){
console.log("submitClick")
},
KeyUp(){
console.log("KeyUp")
},
onceClick(){
console.log("onceClick")
}
}
})
</script>
v-for
v-for遍歷陣列 (item,index) in items
v-for遍歷物件 (value,key,index) in items
div id="app">
<!-- 1.在遍歷過程中，沒有使用索引值-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 1.在遍歷過程中，使用索引值-->
<ul>
<li v-for="(item,index) in names">
{{index+1}} {{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
names:['why','kobe','james','curry']
}
})
</script>
<div id="app">
<!-- 1.在遍歷物件的過程中，如果只是獲取一個值那麼獲取到的是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2.獲取key和value (value,key)-->
<ul>
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>
<!-- 2.獲取key和value和index (value,key,index)-->
<ul>
<li v-for="(value,key,index) in info">{{value}}-{{key}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
info:{
name:'why',
age:18,
height:1.88
}
}
})
</script>
在v-for使用過程中最好給每個v-for遍歷的元素新增上key屬性，用於跟蹤每個節點的值
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
</div>
v-for和v-if同時使用
當它們處於同一節點，v-for 的優先順序比 v-if 更高，這意味著 v-if 將分別重複運行於每個 v-for 迴圈中。一般將v-for和v-if分在不同級元素中使用
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
v-model
v-model用於和data裡面的資料的雙向繫結。
不同於v-bind只能修改data裡面的內容才能修改html的值，同時v-model會忽略表單所有元素的初始值而只與Vue例項的data有關
原理 ：對html做v-bind繫結—修改data能修改html，在html元素中新增事件，事件觸發後修改data的值—修改html能修改data
事件：
- text 和 textarea 元素使用 value property 和 input 事件
- checkbox 和 radio 使用 checked property 和 change 事件
- select 欄位將 value 作為 prop 並將 change 作為事件。
<div id="app" style="font-size:40px">
<!-- 雙向繫結-->
<!-- <input type="text" v-model="message">-->
<input type="text" :value="message" @input="click">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊"
},
methods:{
click(event){
this.message=event.target.value
}
}
})
</script>
修飾符
lazy 失去焦點或回車時才改變值
number 讓輸入為number型別
trim 去掉頭尾空格
<div id="app" style="font-size:40px">
<!--1 .修飾符:lazy 失去焦點或者回車時才修改值-->
<input type="text" v-model.lazy="message">
{{message}}
<br>
<!-- 2.修飾符:number，讓輸入的為number型別-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>
<br>
<!-- 3.修飾符：trim-->
<input type="text" v-model.trim="message">
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
age:0
}
})
</script>