Vue基礎指令集錦
阿新 • • 發佈：2018-11-03
v-model雙向繫結資料
<input type="text" v-model="msg"> {{msg}} ###v-on 事件 <div id="box"> <button v-on:click="say">按鈕</button> <button @click="say">按鈕</button> </div> <script> new Vue({ el: "#box", data(){ return {} }, methods: { say() { alert(111); } } }) </script>
v-html 能讀取html標籤
<div id="box"> <div v-html="msg"></div> </div> <script> new Vue({ el: "#box", data(){ return { msg:"<h1>121212</h1>" } }, methods: { say() { } } }) </script>
v-class 類名
<style> .red { background: red; } .blue { width: 100px; height: 100px; background: blue; } </style> <div id="box"> <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div> <!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>--> <!--三元運算子方式--> <!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>--> </div> <script> new Vue({ el: "#box", data(){ return { isred:false } } }) </script>
v-text讀取文字不能讀取html標籤
<div id="box">
<div v-text="msg"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"11111"
}
},
methods: {
say() {
alert(111);
}
}
})
</script> v-show 顯示與隱藏
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>v-if顯示與隱藏 （dom元素的刪除新增 個人理解）
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>v-else
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>v-else-if
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>v-bind
<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">點選</a>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"1、v-model.html"
}
}
})
</script>v-on 事件
<div id="box">
<!-- v-on -->
<button v-on:click="say">按鈕</button>
<!--<button @click="say">按鈕</button>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>v-once執行一次事件
<div id="box">
<div v-once>{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data(){
return{
msg:"qwdqwdqwd"
}
}
})
</script>v-cloak防閃爍
<div id="box">
<div v-cloak="">歡迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>v-pre 把標籤內部的元素原位輸出
<div id="box">
<div v-pre>歡迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>總結
Vue簡介
特點： mvvm m=mvc module 模型 v=view 檢視 c=controller 控制器
mvvm m=mvc module 模型 v=view 檢視 vm (檢視與資料之間的傳遞)
vue1 雙向資料繫結 vue2 單向資料流
單頁面應用
v-model 資料繫結
data 返回物件用 return
v-for 迴圈 格式 v-for="欄位名 in(of) 陣列json"
v-show 顯示 隱藏 傳遞的值為布林值 true false 預設為false
v-if 顯示與隱藏 和v-show對比的區別 就是是否刪除dom節點 預設值為false
v-else-if 必須和v-if連用
v-else 必須和v-if連用 不能單獨使用 否則報錯 模板編譯錯誤
v-bind 動態繫結 作用： 及時對頁面的資料進行更改
v-on 繫結事件 函式必須寫在methods裡面
@click 快捷方法
v-text 解析文字
v-html 解析html標籤
v-bind:class 三種繫結方法 1、物件型 '{red:isred}' 2、三目型 'isred?"red":"blue"' 3、陣列型 '[{red:"isred"},{blue:"isblue"}]'
v-once 進入頁面時 只渲染一次 不在進行渲染
v-cloak 防止閃爍
v-pre 把標籤內部的元素原位輸出
原文地址：https://segmentfault.com/a/1190000016779036