VUE学习笔记

https://segmentfault.com/a/1190000012692321

利用webpack创建一个VUE项目

1. vue init webpack [projectName]
2. npm install
3. npm run dev / npm run build

关于MVVM

• MVVM，一种更好的UI模式解决方案
• MVVM ===> M / V / VM
• M：model数据模型
• V：view视图
• VM：ViewModel 视图模型

开发中遇到的问题

1. 数据绑定：v-modal="data"

2. 属性绑定：v-on(@),v-bind(:)

3. 父组件向子组件传值

    //父：
    <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)
    }
   

4. 子组件获取父组件的值this.$parent.name

5. 父组件获取子组件的值this.$ref.name

6. prop单向数据流，单向下行绑定。所有的prop都使得其父子prop之间形成了一个单项数据流，父级prop更新会向下流动到子组件，反过来不会

7. 路由守卫：router.beforeEach（注册全局路由守卫）

8. 监听数据的变化watch

   • 概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数

   • 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

   • VUE.$watch

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

     })