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 返回對象用 returnv-for 循環 格式 v-for="字段名 in(of) 數組json"v-show 顯示 隱藏 傳遞的值為布爾值 true false 默認為falsev-if 顯示與隱藏 和v-show對比的區別 就是是否刪除dom節點 默認值為falsev-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

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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