vue.js入门

一、为什么要用？

1. 之前基本上用的是jQuery，jQuery基于DOM操作，MVVM的开发模式也使前端从原先的DOM操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注于data的变化，代码变得更加容易维护。
2. 组件：复用性高，容易维护，方便测试，高内聚，低耦。

二、什么是MVVM?

双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

三、原理

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

用JavaScript实现 https://github.com/DMQ/mvvm
演示：http://bing.2345.com/mvvm/mvvm.html （host: 172.16.0.156 bing.2345.com）

四、入门

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

官网

https://cn.vuejs.org/v2/guide/installation.html

直接引用

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

安装

# 不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。

# 使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

安装依赖，走你
$ cd my-project
$ npm run dev

调试

1. https://github.com/vuejs/vue-devtools

五、示例

文档（作者是中国人） + 官网上的示例 + 自己练习（推荐jsfiddle）
主要了解：响应式机制 + 组件

Hello World：https://jsfiddle.net/han8gui/nnc957z4/10/
Form：https://jsfiddle.net/han8gui/g072h4x6/
ToDoList： https://jsfiddle.net/han8gui/r42pngbu/6/

六、组件

定义

软件组件，定义为自包含的、可编程的、可重用的、与语言无关的软件单元。

示例：

https://jsfiddle.net/han8gui/0c6xszjv/
注意：

1. 一个组件的 data 选项必须是一个函数
2. 定义组件名的方式有两种：
   a. 使用 kebab-case
   当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
   b. 使用 PascalCase
   当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。

3. 生命周期

数据传递

子组件中传递数据：Props
示例: https://jsfiddle.net/han8gui/hqmgnbhy/

子组件向父级组件触发一个事件
内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件，并传递一个参数

七、规模化

1. 路由 vue-router
   https://github.com/han8gui/vue-demo
2. 状态管理 vuex
   记录所有 store 中发生的 state 改变，后面有机会分享下
3. 服务端渲染 ssr
   主要用于SEO

八、其他

1. 风格指南：https://cn.vuejs.org/v2/style-guide/
2. 编码：开发过程中，可以看到bug报错
3. Examples: https://vuejsexamples.com/