生活随笔
收集整理的這篇文章主要介紹了
前端框架_Vue
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
