gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 雙括弧用來數據綁定 (1)寫法一: {{message}},這種可以實時響應 (2)寫法二: {{*message}},單次插值,今後的數據變化就不會再引起插值 ...
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04
一 雙括弧用來數據綁定
(1)寫法一: {{message}},這種可以實時響應
(2)寫法二: {{*message}},單次插值,今後的數據變化就不會再引起插值更新了
(3)雙括弧標簽也可以用在屬性上
舉個慄子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue插值</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> .lili-xiaoman { color: red; } </style> </head> <body> <div class="test"> <p>{{message}}</p> <!--這個值可以實時響應--> <p>{{*message}}</p> <!--單次插值,今後的數據變化就不會再引起插值更新了,例如在控制台寫入:myVue.message=123--> <p class="lili-{{message}}">雙括弧標簽也可以用在屬性上</p> </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { message:"xiaoman" } }) </script> </body> </html>
當我在控制台改變message時,{{*message}}不會跟著改變值
二 雙括弧裡面可以為javascript單元表達式
比如(只支持單元表達式)
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
但是不支持
<!-- 這是一個語句，不是一個表達式： --> {{ var a = 1 }} <!-- 流程式控制制也不可以，可改用三元表達式 --> {{ if (ok) { return message } }}
完整測試代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue雙括弧裡面的內容</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="test"> <p>{{message+1}}</p> <!--JavaScript 表達式,但是只支持單元表達式--> </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { message:12 } }); </script> </body> </html>
上面的輸出是13
三 雙括弧可以放過濾器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue數據綁定</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="test"> <p>{{message | sum}}</p> </div> <script type="text/javascript"> Vue.filter("sum", function(value) { //全局方法 Vue.filter() 註冊一個自定義過濾器,必須放在Vue實例化前面 return value + 4; }); var myVue = new Vue({ el: ".test", data: { message: 12 } }); </script> </body> </html>
上面代碼的輸出值是16
四 用指令綁定數據( 指令 是特殊的帶有首碼 v- 的特性)
舉個v-if的例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue數據綁定</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="test"> <p v-if="isShow">isShow控制著我是否顯示1</p> <p v-if="!isShow">isShow控制著我是否顯示2</p> </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { isShow: true, } }); </script> </body> </html>
上面只顯示第一個div
五 v-bind綁定數據
需要註意事項:
(1) 直接在屬性裡面寫{{}}也是正確的,因為Vue內部渲染的時候會把屬性裡面的雙括弧轉為v-bind,這樣會比直接用v-bind效率效率稍微慢一點
(2) v-bind可簡寫為 :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue數據綁定</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="test"> <a href={{url}}>點擊我跳到百度首頁</a> <!--這種寫法沒錯,實際上在內部特性插值會轉為 v-bind 綁定,這樣會稍微降低效率--> <a v-bind:href="url">點擊我跳到百度首頁</a> <!--簡寫為:href--> <div style="color: {{colorA}}">我是紅色</div> <!--這種寫法沒錯,實際上在內部特性插值會轉為 v-bind 綁定,這樣會稍微降低效率--> <div v-bind:style="{color: colorB}">我是綠色</div> <!--簡寫為:style--> </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { url: "https://www.baidu.com/", colorA: 'red', colorB: 'green' } }); </script> </body> </html>
六 v-on綁定數據
(1) v-on是在vue的methods裡面實現的
(2) v-on可以簡寫為 @
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue數據綁定</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="test"> <button v-on:click="goAction()"> <!--可以簡寫為@click--> 點擊我跳到百度 </button> </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", methods: { goAction: function () { location.href = "https://www.baidu.com/"; } } }); </script> </body> </html>
