vue基本寫(xiě)法及注意事項(xiàng)：

1、vue結(jié)構(gòu)需要引用vue.min.js運(yùn)行：

<script src="./node_modules/vue/dist/vue.min.js"></script>

2、vue基本結(jié)構(gòu)表達(dá)寫(xiě)法：

<div id="app"><!-- 插值表達(dá)式語(yǔ)法 --><h1>{{msg}}</h1></div> </body> <script src="./node_modules/vue/dist/vue.min.js"></script> <script>new Vue({// 掛載點(diǎn)el: "#app",// 定義數(shù)據(jù) 數(shù)據(jù)驅(qū)動(dòng)視圖data: {msg: "萬(wàn)里長(zhǎng)城人未還"}}) </script>

vue綁定事件：

<div id="app"><!-- 插值表達(dá)式語(yǔ)法 --><h1 @mouseover="mousfn('不教胡馬度陰山')">{{msg}}</h1><h1>{{status==0?"未發(fā)貨":"已發(fā)貨"}}</h1><h1 v-on:click="show">111</h1><h1 @click="showMsg">44</h1></div> </body> <script src="./node_modules/vue/dist/vue.min.js"></script> <script>new Vue({// 掛載點(diǎn)el: "#app",// 定義數(shù)據(jù) 數(shù)據(jù)驅(qū)動(dòng)視圖data: {msg: "萬(wàn)里長(zhǎng)城人未還",status: "!"},methods: {show: function () {// alert(1)this.showMsg()},showMsg() {alert(this.msg)},mousfn(i) {alert(i)}}})

vue條件判斷寫(xiě)法：if? && else if?

<div id="app"><input type="text" value="輸入框" @click="opens"><h2 v-if="status==1">你好</h2><h2 v-else-if="status==2">hello</h2><h2 v-else>關(guān)關(guān)雎鳩</h2></div> </body> <script src="./node_modules/vue/dist/vue.min.js"></script> <script>new Vue({// 掛載點(diǎn)el: "#app",// 定義數(shù)據(jù) 數(shù)據(jù)驅(qū)動(dòng)視圖data: {msg: "萬(wàn)里長(zhǎng)城人未還",status: 1},methods: {opens() {var p = prompt("請(qǐng)輸入數(shù)字")this.status = p}}})

vue顯示v-show

<button @click="opens">切換</button><!-- v-if是把元素從文檔中刪除，而v-show是使用行內(nèi)樣式的display屬性控制顯示和隱藏 --><!-- v-if頻繁的切換，比較消耗性能，推薦在首次渲染的時(shí)候使用；v-show在頻繁切換的時(shí)候，對(duì)性能的影響更小，適合頻繁切換 --><p v-show="show">完蛋了</p></div><script src="./node_modules/vue/dist/vue.min.js"></script><script>new Vue({el: "#app",data: {num: 1,mes: "真棒",mes2: "優(yōu)秀",show: true},methods: {opens() {this.show = !this.show}}})</script>

vue動(dòng)態(tài)綁定v-bind:? 可以簡(jiǎn)寫(xiě)為 ：

<tr v-for="(v,i) in list" v-bind:key="v.id"><td>{{v.name}}</td><td>{{v.age}}</td></tr>

vue樣式v-class:

<div id="app"><h1 :class="{red:flag，bg:flag2}">用戶系統(tǒng)</h1><table border="1" cellpadding="5"><tr><th>姓名</th><th>年紀(jì)</th></tr><!-- 循環(huán)的時(shí)候，需要?jiǎng)討B(tài)綁定一個(gè)key 動(dòng)態(tài)綁定需要使用v-bind,可以簡(jiǎn)寫(xiě)為 ： --><tr v-for="(v,i) in list" v-bind:key="v.id"><td>{{v.name}}</td><td>{{v.age}}</td></tr></table></div><script src="./node_modules/vue/dist/vue.min.js"></script><script>new Vue({el: "#app",data: {flag: true,flag2:true,list: [{id: 1,name: "張三",age: 30},{id: 2,name: "李四",age: 30},{id: 3,name: "王五",age: 30},]}})

vue樣式? :style

<tr v-for="(v,i) in list" v-bind:key="v.id" :style="{color:v.flag?'red':'green'}">

總結(jié)

以上是生活随笔為你收集整理的Vue基本写法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。