VUE2 0學習總結

摘要: 年後公司專案開始上vue2.0，自己對學習進行了總結，希望對大家有幫助！

vue2.0學習

vue融合了react和angular的優點，並且解決了react和angualr的痛點

# 全域性安裝 vue-cli

$ npm install --global vue-cli
# 建立乙個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

,

vue: 

}

resolve: 

import vue from 'vue'

// new vue()

}div>

body
style>
exportdefault}}
script>

vue例項上的例項屬性要通過例項.$例項屬性名獲取

在vue例項裡面用this，this指向的是vue例項

例項上有乙個$watch方法可以監聽data屬性裡面的資料的變化，data一變會自動觸發監聽事件的執行

var data = 

// 和資料相關的都掛載到data上
data: data,
// 和方法相關的都掛載到methods上
methods: ,
changedata:function() }})
// 先監聽再改變
console.log(newval)
console.log(oldval)
})// 值改變之後會自動執行監聽方法
// data的值是可以直接改變的，和react的setstate方法不一樣，因為vue裡面用了es6的set和get方法，可以起到自動監聽的作用
// 動態屬性和例項屬性

這些生命週期方法只能在spa應用中起作用，單獨作為雙向資料繫結庫無法生效

vue生命週期圖

// 錯誤的寫法

"}">div>
// 正確的寫法
"id">div>

}}}

bind:id="'list-' + id">

}

}new vue(
}})

v-bind和v-on在模板語法中可以縮寫

a>

a>

a>

a>

original message: "}}"p>computed reversed message: "}"p>computed reversed message: "}"p>div>

body
style>
export

vue2 0學習記錄

1 在main.js可註冊全域性元件，vue.components 元件名稱 元件名 import 元件名 from components 元件檔案 3 元件的標籤名不可與系統的html標籤重複 4 父元件向子元件傳值 父元件有乙個陣列 users 在父元件模板中的子元件標籤中接收 users us...

Vue2 0學習之路

一 基礎 1.vue2.0學習記錄 hello world 2.vue2.0學習記錄 todo list初步 3.vue2.0學習記錄 mvvm模式 4.vue2.0學習記錄 全域性元件 5.vue2.0學習記錄 區域性元件 6.vue2.0學習記錄 父子元件傳值 7.vue2.0學習記錄 生命週期...

（一）vue2 0學習筆記

官方api位址 引用 body標籤的閉合標籤上面 2.1.0 新增 用法 繫結事件 事件型別由引數指定。表示式可以是乙個方法的名字或乙個內聯語句，如果沒有修飾符也可以省略。用在普通元素上時，只能監聽原生 dom 事件。用在自定義元素元件上時，也可以監聽子元件觸發的自定義事件。在監聽原生 dom 事件...