- v-once:只能使得元件解析執行一次的指令，如：
<div id="app">
<p>{{count}}</p>
<!--count在v-once那行中只會渲染改變一次。-->
<p v-once>{{count}}</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
count: 0
},
</script>
- v-html：可以解析變數中的html程式碼塊，如：
<div id="app">
<p v-html="url"></p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url:'<a href="http://www.baidu.com">百度一下</a>',
},
</script>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message:'haha'
},
</script>
- V-bind：動態繫結屬性(v-bind的語法糖：v-bind:src="imgUrl"等價於:bind:src="imgUrl")
<div id="app">
<a v-bind:href="url"></a>
<img v-bind:src="imgUrl">
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url:'http://www.baidu.com'
imgUrl:'https://i0.hdslb.com/bfs/sycp/creative_img/202108/e9420839c81a40a9cf40280acb2bed46.jpg'
},
</script>
- computed 計算屬性：類似於method但不同於method，如：
<div id="app">
<h1>{{fullName}}</h1>
<h1>{{fullName2}}</h1>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
firstName:'Eva',
LastName:'Green'
},
methods:{
},
// 計算屬性，多次呼叫，只需要呼叫一次，因為內部有快取，所以比Medthod效能更高
computed:{
fullName:function(){
return this.firstName+' '+this.LastName
},
fullName2:{
set:function(names){
const name=names.split(' ')
this.firstName=name[0]
this.LastName=name[1]
},
get:function(){
return this.firstName+' '+this.LastName
}
}
}
})
</script>
<div id="app">
<!-- 沒有引數不用加（） -->
<button type="button" v-on:click="increment">{{counter}}</button>
<!-- 水果糖，有引數 -->
<button type="button" @click="increment('haha',12)">{{counter}}</button>
<!-- 手動獲取瀏覽器自動獲取的event引數 -->
<button type="button" @click="increment(12,$event)">{{counter}}</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
counter:0
},
methods:{
increment(e,event){
this.counter++
console.log('ee',e,event)
}
}
})
</script>
<div id="app">
<!-- 沒有引數不用加（） -->
<button type="button" v-on:click="increment">{{counter}}</button>
<!-- 水果糖，有引數 -->
<button type="button" @click="increment('haha',12)">{{counter}}</button>
<!-- 手動獲取瀏覽器自動獲取的event引數 -->
<button type="button" @click="increment(12,$event)">{{counter}}</button>
<div @click="divClick">haha
<!-- .stop修飾符的使用，點選button時只響應btnClick -->
<button type="button" @click.stop="btnClick">{{counter2}}</button>
<!-- .once修飾符的使用，只觸發一次 -->
<button type="button" @click.once="btnClick">{{counter2}}</button>
</div>
<form action="baidu" method="">
<!-- .prevent修飾符的使用，阻住預設事件的發生，這裡會預設跳轉action -->
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
counter:0,
counter2:0,
},
methods:{
increment(e,event){
this.counter++
console.log('ee',e,event)
},
divClick(){
console.log('divClick')
},
btnClick(){
console.log('btnClick')
},
submitClick(){
console.log('submitClick')
}
}
})
</script>
<div id="app">
<!-- v-show對比V-if的區別是它的實質是改變元件樣式來實現，實際上還是存在，只是style:disable改變了 -->
<button v-show="isShow" @click="changShow">1</button>
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
isShow:true
},
methods:{
changShow(){
this.isShow=false
}
}
})
</script>
<div id="app">
<!-- 遍歷陣列 -->
<ul>
<li v-for="(item,index) in movies">No {{index+1}} is {{item.name}}</li>
</ul>
<br>
<!-- 遍歷物件 -->
<ul>
<li v-for="(value,key) in movies[0]">the movie's {{key}} is {{value}}</li>
</ul>
<button @click="changeList" type="button">陣列改變</button>
<h1 @click="sum(1,2,3,4,5,6,7,8,9)">sum</h1>
<input type="text" name="" v-model="message" />{{message}}
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
const app=new Vue({
el:'#app',
data:{
message:'你好',
movies:[
{
name:'銀翼殺手',
time:120,
score:9.5
},
{
name:'星球大戰',
time:110,
score:7.5
},
{
name:'霍位元人',
time:100,
score:8.5
}
]
},
methods:{
changeList(){
const movie1={
name:'指環王',
time:200,
score:9.9
},
const movie2={
name:'蝙蝠俠',
time:130,
score:9.8
},const movie3={
name:'漢尼拔',
time:140,
score:9.7
}
this.movies[0].time=12//不能響應式
this.movies.shift()//刪除最前面的元素
this.movies.pop()//刪除最後面的元素
this.movies.unshift(movie2)//最前面新增元素，可以一次加多個元素
this.movies.push(movie1)//後面新增元素，可以一次加多個元素
},
sum(...num){
//這樣的引數表示可以接受任意數量引數，而儲存在num陣列中
console.log('num',num)
}
}
})
</script>