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) { }, }})
