vue2.0學習(一)


1.解決雙花括號在初始化時的閃爍,兩種方式,一種是<div v-text="name"></div>,將用v-text指令來顯示,類似於angular的ng-bind;

另外一種是用v-clock配合css:

<div v-cloak>{{name}}</div>

<style>
  [v-cloak]{
    display:none;
  }

</style>

當然在這里css只需要寫一次就好了。

2.雙花括號中可以運行js表達式(只能有一個),比如說if語句不可以在雙花括號中運行,簡單的語句可以用三目運算,復雜建議用computed;模板表達式都被放在沙盒中,只能訪問全局變量的一個白名單,如 Math 和 Date 。你不應該在模板表達式中試圖訪問用戶定義的全局變量。

3.所有的內置filter都去掉了,所以filter只能自己去定義。

4.var obj =  {};Object.keys(obj);這個可以取到所有的對象的屬性。屬於es5的方法。

5.vue雙向數據綁定的原理

var a= {}
Object.defineProperty(a,"b",{
  set:function(newValue){

    console.log("你要賦值給我,我的新值是"+newValue)

  },
  get:function(){
    console.log("你取我的值")
  }
})

var defineA = function(){
  a.b = 1;
}
defineA();

這里利用的是es5的Object.defineProperty,用這種方法給每個data創建一個set和get,當給data賦值的時候,就會觸發set,進而去通知v-text這個指令去改變相應的值。具體如下圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM