https://segmentfault.com/a/1190000012692321
利用webpack創建一個VUE項目
vue init webpack [projectName]npm installnpm run dev / npm run build
關于MVVM
- MVVM，一種更好的UI模式解決方案
- MVVM ===> M / V / VM
- M：model數據模型
- V：view視圖
- VM：ViewModel 視圖模型
開發中遇到的問題
數據綁定：
v-modal="data"屬性綁定：
v-on(@),v-bind(:)-
父組件向子組件傳值
//父： <member-search-bar :pageInfo="pageInfo" @change="change(val)"></member-search-bar> //pageInfo：要傳遞的值 //@change：子組件向父組件傳值的func //change(val)：父組件接收的fun //子組件接收值 prop: {pageInfo: object}` //子組件不能改變父組件的值，vue需通過@change方法來實現 change(){ this.$emit('change', this.value) } 子組件獲取父組件的值
this.$parent.name父組件獲取子組件的值
this.$ref.nameprop單向數據流，單向下行綁定。所有的prop都使得其父子prop之間形成了一個單項數據流，父級prop更新會向下流動到子組件，反過來不會路由守衛：
router.beforeEach（注冊全局路由守衛）-
監聽數據的變化
watch概述：
watch是一個對象，鍵是需要觀察的表達式，值是對應回調函數作用：當表達式的值發生變化后，會調用對應的回調函數完成響應的監視操作
-
VUE.$watchnew Vue({
data: { a: 1, b: { age: 10 } },
watch: {
a: function(val, oldVal) {
// val 表示當前值
// oldVal 表示舊值
console.log('當前值為：' + val, '舊值為：' + oldVal)
},// 監聽對象屬性的變化 b: { handler: function (val, oldVal) { /* ... */ }, // deep : true表示是否監聽對象內部屬性值的變化 deep: true }, // 只監視user對象中age屬性的變化 'user.age': function (val, oldVal) { }, }})
