Vue.js(讀音 /vjuː/,類似於視圖)是一套構建用戶界面的漸進式框架。
採用自底向上增量開發的設計. Vue 的核心庫只關注 視圖層,易學習,易項目整合。
Vue.js 完全有能力驅動採用單文件組件和 Vue.js 生態系統支持的庫開發的複雜單頁應用。
優點,可只專注在 web 技術上,支援 html template、jade、coffeescript,可與 sass、less 等做整合,插件多,不像 React、AngularJS 專注跨平台、跨載具,導致要學的東西就變很多。
如果剛開始學習前端開發,將框架作為第一步可能不是最好的主意 - 掌握好基礎知識再來!之前有其他框架的 使用經驗對於學習 Vue.js 是有幫助的,但這不是必需的。
認識 Vue.js
1.瀏覽器限制
不支持 IE8 及其以下版本,因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性(Object.defineProperty)。
支持所有兼容 ECMAScript 5 的瀏覽器。
2..引入 Vue.js
嘗試 Vue.js 最簡單的方法是創建一個 .html 文件,然後引入Vue:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
Vue.js 基礎
1.Hello World!
提供兩種寫法!都可以完成一樣的結果
<div id="app"> {{ message }} </div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
or
var data ={
message: 'Hello Vue!'
}
new Vue({
el:"#app",
data:data
})
</script>
瀏覽器渲染結果:
Hello Vue!
Vue 使數據和 DOM 被綁定在一起,所有的元素都是響應式的。
當 app.message 改變時,會引起 DOM 的重新呈染。
2.選擇對象
實例化Vue時,需要選定一個選項對象,裡面包含數據、模板、掛載元素、方法、生命週期鉤子等選項。
選項對象包含常用的屬性包括,在下文還會進行拓展:
3.data 應用
data 對象裡的所有屬性,以上面範例為例:
vm.message // => Hello Vue!
在選項對象裡,this 表示構造器的實例,所以在 methods 對象中的方法也使用 this 屬性獲取 data 裡的屬性:
......
methods:{
floramag:function(){
alert('這是message資料'+ '==>' +this.message)
}
}
......
data 是一個外部變量
var data = {
message:"Hello World!"
}
new Vue({
....
data:data
...
)}
數據與訊息雙向綁定的,二者有一方改變,對方都會改變。
注意,data 一直存在在內存中。
在寫節點語法時不能使用 exports = function(){} 導出模塊一樣,
不能像下面這樣試圖改變選項對象所綁定的數據變量,因為這樣完全破壞了數據與vm的引用關係。
4.實例屬性與方法
屬性代理的是 VM 選項對象中的數據對象中的屬性,那麼,數據等直接定義在選項對象裡的屬性怎麼辦呢?
數據這樣的選項對象屬性,則需在前面加上 $,例如:
vm.$el // =>HTMLXXXDOM
vm.$data // => {message:'Hello Vue!'}
監控元素改變的 $ 觀看方法
vm。$ watch('a',function(newVal,oldVal){
//這個回調將在 ' vm.a '改變後調用
})