vue基本寫法及注意事項：

1、vue結構需要引用vue.min.js運行：

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

2、vue基本結構表達寫法：

<div id="app"><!-- 插值表達式語法 --><h1>{{msg}}</h1></div> </body> <script src="./node_modules/vue/dist/vue.min.js"></script> <script>new Vue({// 掛載點el: "#app",// 定義數據 數據驅動視圖data: {msg: "萬里長城人未還"}}) </script>

vue綁定事件：

<div id="app"><!-- 插值表達式語法 --><h1 @mouseover="mousfn('不教胡馬度陰山')">{{msg}}</h1><h1>{{status==0?"未發貨":"已發貨"}}</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({// 掛載點el: "#app",// 定義數據 數據驅動視圖data: {msg: "萬里長城人未還",status: "!"},methods: {show: function () {// alert(1)this.showMsg()},showMsg() {alert(this.msg)},mousfn(i) {alert(i)}}})

vue條件判斷寫法：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>關關雎鳩</h2></div> </body> <script src="./node_modules/vue/dist/vue.min.js"></script> <script>new Vue({// 掛載點el: "#app",// 定義數據 數據驅動視圖data: {msg: "萬里長城人未還",status: 1},methods: {opens() {var p = prompt("請輸入數字")this.status = p}}})

vue顯示v-show

<button @click="opens">切換</button><!-- v-if是把元素從文檔中刪除，而v-show是使用行內樣式的display屬性控制顯示和隱藏 --><!-- v-if頻繁的切換，比較消耗性能，推薦在首次渲染的時候使用；v-show在頻繁切換的時候，對性能的影響更小，適合頻繁切換 --><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: "優秀",show: true},methods: {opens() {this.show = !this.show}}})</script>

vue動態綁定v-bind:? 可以簡寫為 ：

<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}">用戶系統</h1><table border="1" cellpadding="5"><tr><th>姓名</th><th>年紀</th></tr><!-- 循環的時候，需要動態綁定一個key 動態綁定需要使用v-bind,可以簡寫為 ： --><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'}">

總結

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

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