JS表達式

• 函數（方法）調用表達式

test() //函數調用表達式

• 屬性調用表達式

var obj = {name:'wt'}; var arr = [123,'bai']; obj.name //屬性調用表達式 arr[0] //屬性調用表達式

• 變量（常量）調用表達式

let name = 'wutao'; name //變量調用表達式

• 字面量表達式

123 //數值字面量表達式 'wtao' //字符串字面量表達式 true //布爾字面量表達式 null //空表達式 undefined //未定義表達式 {name:'wt'} //對象字面量表達式 [123,true] //數組字面量表達式

• 算術表達式

a + 1 //算術表達式 b * 1 //算術表達式

• 三目表達式

conidion ? name : title

模板語法

• 插值

// 語法： 雙大括號{{}} // 使用場景： 標簽內容處使用 // 單向數據綁定 // 支持JS表達式<div id="app">{{msg}}<div>{{getContent()}}</div> </div><script>const vue = new Vue({el: '#app',data: {msg: 'who is this'}，methods: {getContent: function(){return 'wtao';}}}); </script> 插值 與 v-text 區別
兩者都是在標簽內容處插入內容，但v-text是全量插入，而插值更靈活，除了全量插入，還可以使用部分插入
推薦只要使用插值就可以了

• 指令

是模板語法重中之重，常用如下 v-text //使用插值替代 v-html v-show v-if //條件判斷 v-else v-else-if v-for //循環 v-on //綁定事件 v-bind //綁定屬性 v-model //雙向數據綁定 v-pre v-cloak v-once

指令

• 屬性綁定

// 單向數據綁定 // 支持JS表達式 // 使用指令v-bind，需傳入標簽屬性作為參數，例如：v-bind:title=""<div id="app"><div title="你好" :title="go">xxx</div><p :title="test()"></p> </div> <script>const vue = new Vue({el: '#app',data: {go: '振東',test: function(){return 'xxx';}}}); </script> 出現上面的情況，屬性誰后誰顯示，原理是后面替代前面，如果title在:title后面，那單向數據綁定失效
如果是使用函數，必須后面加括號調用（）

• 事件綁定

<div id="app"><div v-html="title" @click="fngo"></div><div v-html="title" @click="getUser"></div> </div> <script>var vm = new Vue({el: '#app',data: {name:'wt',title: '<h1>試試</h1>',fngo: function(){console.log(this); // this代表window}},methods: {getUser: function(){console.log(this); // this代表Vue實例}}}); </script> 注意如果改為如下代碼，this將發生變化 <div id="app"><div v-html="title" @click="fngo()"></div><div v-html="title" @click="getUser"></div> </div> <script>var vm = new Vue({el: '#app',data: {name:'wt',title: '<h1>試試</h1>',fngo: function(){console.log(this); // this代表Vue實例}},methods: {getUser: function(){console.log(this); // this代表Vue實例}}}); </script> 所有函數（方法）的定義，強烈推薦放在methods里，不要定義到data里面

• 條件判斷渲染

// 單向數據綁定 // 支持JS表達式<div v-if="0"></div> //數字0 --> false <div v-else-if="'0'"></div> //字符串0 ---> true <div v-else></div> 注意點：
1、對象和數組轉boolean都是true
2、空字符串轉boolean是false
3、null、underfined、NaN轉boolean是false
4、數值0是false let arr = [] if(arr){console.log('true'); }if(arr == fasle){console.log('true'); // ==兩邊轉數值 }

• 循環渲染

// 單向數據綁定 // 支持JS表達式 // items可以是數字、字符串、數組、對象<ul id="example-1"><li v-for="item in 15">{{ item.message }}</li> </ul><ul id="example-1"><li v-for="(item,key) in 'abcd'">{{ item }} : {{ key }}</li> </ul><ul id="example-1"><li v-for="(item,key) in {name:'taobi',age:18}">{{ item }} : {{key}}</li> </ul>

雙向/單向數據動態綁定__原理

• 單向

var obj = {}; var initValue = 'hello'; Object.defineProperty(obj,"newKey",{get:function (){//當獲取值的時候觸發的函數return initValue;},set:function (value){//當設置值的時候觸發的函數,設置的新值通過參數value拿到initValue = value;} }); //獲取值 console.log( obj.newKey ); //hello 輸出//設置值 obj.newKey = 'change value';console.log( obj.newKey ); //change value console.log( initValue ); //change value

• 雙向

var obj = {}; var initValue = 'hello'; Object.defineProperty(obj,"newKey",{get:function (){//當獲取值的時候觸發的函數return initValue;},set:function (value){//當設置值的時候觸發的函數,設置的新值通過參數value拿到initValue = value;} }); document.getElementById('txt').oninput = function(e){obj.newKey = e.target.value; }

單頁應用 vs 多頁應用

• 多頁應用

頁面跳轉 ---> 返回html優點： 首屏速度快，SEO效果好缺點： 頁面切換慢

• 單頁應用

頁面跳轉 ---> JS動態渲染優點： 頁面切換快缺點： 首屏速度慢，SEO差 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的前端框架_Vue的全部內容，希望文章能夠幫你解決所遇到的問題。

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