Github原文阅读

MVVM(Model-View-ViewModel)模型

MVVM分为Model、View、ViewModel三部分。

• Model代表数据模型，定义数据和业务逻辑，访问数据层
• View代表视图，展示页面结构、布局和外观（UI）
• ViewModel代表视图模型，负责监听Model数据变化并更新视图，处理用户交互

Model和View是通过ViewModel，Model的数据变化会触发View的更新，View的交互操作也会使Model的数据发生改变。只需要针对数据进行维护操作，数据的自动同部不需要通过操作dom实现。

Vue指令

Vue响应式原理

Vue实例化时，遍历访问data的所有属性，使用 Object.defineProperty 将其属性全部转换为getter/setter进行依赖追踪以便修改属性时进行变更通知，每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

Vue双向数据绑定

简单实现，有一个子组件输入框，一个按钮，父组件通过props传值给子组件，当按钮增加时，子组件通过$emit通知父组件修改相应的props值。

<div id="app">
        <parent></parent>
    </div>
    <script>
        var childNode = {
            template:`
                <div class = "child">
                    <div>
                        <span>子组件数据</span>
                        <input v-model="childMsg">
                        <button @click=add>+1</button>
                    </div>
                </div>
            `,
            data(){
                return{
                    childMsg:0
                }
            },
            methods: {
                add(){
                    this.childMsg++;
                    this.$emit('update:foo',this.childMsg)
                }
            }
        };
        var parentNode = {
            template:`
                <div class="parent">
                    <div>
                        <span>父组件数据:{{msg}}</span>
                        <child :foo.sync="msg"></child>
                    </div>
                </div>
            `,
            components:{
                'child':childNode
            },
            data(){
                return{
                    'msg':0
                }
            }
        };
        let vm = new Vue({
            el:'#app',
            components:{
                'parent':parentNode
            }
        })

Vue的生命周期钩子

Vue组件

组件可以是页面中每一个区域板块，也可以是某一个复用业务逻辑，也可以是每一个单页面。

组件的构成

就以上面的双向数据绑定实现为例：

• 属性props：父组件使用props定义数据属性，向子组件传递数据
• 自定义事件event：通过$emit触发自定义事件event向父组件发送消息
• 插槽slot：slot进行组件内容分发，插入子组件内容

组件通信

• 父子组件通信：父组件使用props向子组件通信，子组件使用$emit向父组件传递消息
• 非父子组件通信：父组件可以使用v-on监听子组件的任何事件，子组件使用$emit传入事件，这样父组件就会收到事件并更新
• 跨级组件通信：使用Vuex比较好管理

Vue-router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

下面是一个简单路由的实现：

<div id="app" class="demo">
      <h1>Hello App!</h1>
      <p>
          <!-- 通过router-link导航 -->
          <!-- 通过传入'to '属性指定链接-->
          <!--  <router-link> 默认会被渲染成一个 `<a>` 标签-->
              <router-link to="/foo">go to Foo</router-link>
              <router-link to="/bar">go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
   </div>
   <!-- 
       0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
       1. 定义 (路由) 组件。
       2.定义路由
    -->
   <script>
       //1. 定义 (路由) 组件。
       const Foo = {template:'<div>foo</div>'};
       const Bar = {template:'<div>bar</div>'};
       //2.定义路由
       //每个路由应该映射一个组件。其中component可以是通过Vue.extend()创建的组件构造器
       //或者只是一个组件配置对象
       const routes = [
           {path:'/foo',component:Foo},
           {path:'/bar',component:Bar}
       ]

       //3.创建router实例，然后传‘routes’配置
       const router = new VueRouter({
           routes//（缩写）相当于routes:routes
       })

       //4.创建和挂载根实例
       //要记得通过router配置参数注入路由，从而让整个应用都有路由功能
       
       const app = new Vue({
           router
       }).$mount('#app');