（1）資料和方法
①響應式雙向繫結
當乙個 vue 例項被建立時，它向 vue 的響應式系統中加入了其data物件中能找到的所有的屬性。當這些屬性的值發生改變時，檢視將會產生「響應」，即匹配更新為新的值。
//當這些資料改變時，檢視會進行重渲染。值得注意的是只有當例項被建立時我們的資料物件
var data =
//該物件被加入到乙個 vue 例項中
var vm = new
vue()
//獲得這個例項上的屬性
//返回源資料中對應的字段
vm.a == data.a //
=> true
//設定屬性也會影響到原始資料
vm.a = 2data.a
//=> 2
//……反之亦然
data.a = 3vm.a
//=> 3
data中存在的屬性才是響應式的。也就是說如果你新增乙個新的屬性，比如：
vm.b = 'hi'那麼對
b的改動將不會觸發任何檢視的更新。如果會在晚些時候需要乙個屬性，但是一開始它為空或不存在，那麼僅需要設定一些初始值。
data:②凍結響應式繫結
這裡唯一的例外是使用object.freeze()，這會阻止修改現有的屬性，也意味著響應系統無法再追蹤變化。
接下來先做個案例，這時點選按鈕 可以實現資料切換
年紀：}接下來利用object.freeze()方法凍結物件性別：}
點選按鈕改變
/*資料物件
*/var person =
var vm = new
vue(}})
object.freeze(person)此時再點選按鈕時便無法切換
③例項屬性與方法
除了資料屬性，vue 例項還暴露了一些有用的例項屬性與方法。它們都有字首$，以便與使用者定義的屬性區分開來。例如：
vm.$data === data //（2）例項生命週期鉤子=> true
vm.$el === document.getelementbyid('example') //
=> true
//$watch 是乙個例項方法
vm.$watch('a', function
(newvalue, oldvalue) )
每個 vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 dom 並在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的**的機會。
簡單理解為：不同的階段會觸發執行不同的函式。
①created鉤子：用來在乙個例項被建立之後執行**
new也有一些其它的鉤子，在例項生命週期的不同階段被呼叫，如vue(,
created:
function
() })
mounted、updated和destroyed。生命週期鉤子的this上下文指向呼叫它的 vue 例項。
（3）生命週期圖示
（4）例項生命週期鉤子排序
/*資料物件
*/var person =
var vm = new
vue(,
/*例項建立完成後
*/created:
function
(),
/*掛載前
*/beforemount:
function
(),
/*掛載後
*/mounted:
function
() )
},beforeupdate:
function
(), updated:
function
() )
},beforedestroy:
function
(), destroyed:
function
(), methods:}})
console.log(vm.$el == document.getelementsbyclassname("info")[0]);
vm.$watch('age', function
(newvalue, oldvalue) )
vue例項基礎2
一 插值 1.文字 文字這個最簡單，就是資料是什麼，模板中就渲染什麼。示例 div src script newvue script body 我們可以使用 v once 指令，規定資料只渲染一次。寫法如下 v once p div v cloak 指令，用來控制當資料沒有渲染出來的時候，是否顯示佔...
Vue學習計畫基礎筆記 一 vue例項
最近又重新看vue的文件了,計畫是別人寫的,之前看過一次,沒有考慮太多,只考慮看懂能用就好.看完之後寫過寫demo,現在是零實際專案經驗的,所以這一次打算細看,算是官方文件的二次產物吧,但是不是全部直接複製貼上那種,中間加了些個人見解 或許是誤解 下去,寫出來也好讓別人指正自己.vue例項 目標 1...
vue 01 起步基礎例項
index.html 你現在可以看到我了嗎？reverse msg alpha reverse msg words index.css html,bodyindex.js 建立乙個模板 vue.component todo item 建立另乙個模板 vue.component todo item1 ...