掛載點：最外層標簽就是vue實例的掛載點，即id或者類對應的
dom節點

模板：指掛載點內部的內容，在實例里使用template標簽來構
建

h1標簽放在body里面不使用 “template”是一樣的效果；
{{msg}}：插值表達式

new Vue({
el:"#root",

template:'<h1>hello {{msg}}</h1>',

data:{
msg:"world" ,
content:"this is content"
}
})

指令：v-text 會轉義即會將標簽名原樣輸出
v-html 不會轉義，即只會輸出標簽內的內容不會輸出
標簽
v-on:click = @click

核心：對數據進行操作，數據改變了頁面內容也就隨著一起改變

? ? ? ? ?數據決定頁面的顯示，頁面無法左右數據的內容

屬性綁定：
模板指令
v-bind:title="title" == ：title="title"
<div v-bind:title="title"></div>
<input />
外部的content內容：<div>{{content}}</div>
<input :value="content"/>表示輸入框的值就是
content的值，實現了單向數據綁定
但是輸入框的值改變時外部的content并沒有跟著一起改變。
<input v-modal="content"/>模板指令：當輸入框的值
改變時，外部的contnet會跟著一起改變，實現了數據雙向綁定

<input v-modal="firstName"/>
<input v-modal="lastName"/>
<div>{{fullName}}</div>

計算屬性：當firstName的值沒有改變且lastName值也沒有改
變時，fullName會使用之前的計算緩存的結果輸出，當依賴的
屬性lastName或firstName其中一個值改變時 fullName才能改
變
new Vue({
el:"#root",

template:'<h1>hello {{msg}}</h1>',

data:{
firstName:'',
lastName:'',
count:0
},
computed:{//計算屬性：
fullName:function(){
return this.firstName+''+this.lastName
},
watch:{//偵聽器

fullName:function(){
this.count++
}
}
}
});

指令：
<div v-if="show">hello world</div>
<div v-show="show">hello world</div>
//表示要循環的列表是list：循環后放在item中,每次item的
值不同，:key="index"可以換成:key="item"。
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}</li>
</ul>
<button @click="change"></button>
new Vue({
el:"#root",

data:{
show:true,
list:[1,2,3]
},
methods:{
change:function(){
this.show=!this.show;//控制顯示或隱藏
}
}
});

v-if 指令實現的效果是顯示或者隱藏，但是實質是當show值
為false時，整個被操作的標簽完全刪除，當show值為true時
，被操作的整個div又重新生成并顯示出來

v-show：指令：也是實現了顯示或隱藏，但是
當show值為false時，被操作的標簽元素會自動加上一個屬性
：display:none。

v-for：指令：當有數據需要循環展示時：就使用該指令輸出

?

?

?

轉載于:https://www.cnblogs.com/LindaBlog/p/9316810.html

總結

以上是生活随笔為你收集整理的vue指令问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。