Vue入门笔记一

《Vue.js项目实战》Guillaume Chau

Vue核心功能概述

1.一个响应式的数据系统，能通过轻量级的虚拟DOM引擎和最少的优化工作来自动更新用户界面

2.灵活的视图声明，包括优雅友好的HTML模板、JSX（在JavaSript中编写HTML的技术）以及hyperscript（完全使用JavaScript）

3.由可维护、可复用组件构成的组件化用户界面

4.官方的组件库提供了路由、状态管理、脚手架以及更多高级功能，使Vue成为了一个灵活且功能完善的前端框架

兼容性要求

Vue没有任何第三方依赖
可以在所有兼容ECMAScript 5 的浏览器中使用
不支持Internet Explorer 8 及以下版本
编写ES2015（ES6）需要编译器Babel，才能在老版本浏览器中运行

Vue开发者工具

Chrome Vue.js devtools【启用Allow access to file URLs，调试工具就能在从本地磁盘打开的Web页面上检测Vue】

高级项目设置

npm install -g vue-cli             // 安装官方命令行工具vue-cli

vue --version                         // 测试vue-cli运行，打印版本

// 项目脚手架

vue list                                  // 列出官方项目模板

// 官方模板主要有以下3种主要类型

// simple            不使用构建工具

// webpack        使用非常流行的Webpack打包器

// browserify      使用Browserify构建工具

vue init webpack-simple demo    // vue init <template> <dir> 使用模板创建新的应用项目

cd demo

npm install           // 安装依赖包

npm run dev        // 以开发模式启动应用

npm run build      // 为生产而构建

// 配置Babel

// 1.Babel Vue 预设

npm i -D babel-preset-vue

// 打开.babelrc文件并将vue预设添加到相应的列表中 【babel 7和7以下的配置有很大区别】

// 看下文

// 2.polyfill

npm i -D babel-polyfill

// 在src/main.js文件开头导入

// import 'babel-polyfill'

babel版本

1."babel-core": "^6.26.0"

{

  "presets": [

    ["env", { "modules": false }],

    "stage-3",

    "vue"

  ]

}

2."@babel/core": "^7.5.5"

{

  "presets": [

    "@babel/preset-env",

  ],

  "plugins": [

    // Stage 2

    [

      "@babel/plugin-proposal-decorators",

      {

        "legacy": true

      }

    ],

    "@babel/plugin-proposal-function-sent",

    "@babel/plugin-proposal-export-namespace-from",

    "@babel/plugin-proposal-numeric-separator",

    "@babel/plugin-proposal-throw-expressions",

    // Stage 3

    // "@babel/plugin-syntax-dynamic-import",

    // "@babel/plugin-syntax-import-meta",

    // [

    //   "@babel/plugin-proposal-class-properties",

    //   {

    //     "loose": false

    //   }

    // ],

    // "@babel/plugin-proposal-json-strings"

  ],

  "env": {

    "test": {

      "plugins": [

        "transform-es2015-modules-commonjs",

        "dynamic-import-node"

      ]

    }

  }

}

创建应用

1.移除src文件夹中的内容

2.使用以下内容创建一个新的JavaScript文件，名为main.js

import Vue from "vue"

new Vue({

    el: "#app",

    render: h => h("div", "hello world")

});

更新依赖

1.手动更新

// 1.检查项目中使用的包是否有新版本

npm outdated

// 2.打开package.json改变对应版本范围，保存

npm install

2.自动更新

npm update

3.更新Vue

vue包和vue-template-compiler包必须始终处于相同的版本

渲染函数

Vue使用了一个虚拟DOM的实现，用树状结构的JavaScript对象来构建虚拟DOM。然后，Vue将虚拟DOM应用到真实浏览器的DOM上，所用方法是计算两者之间的差异。这尽可能避免了DOM操作，因为DOM操作通常是主要的性能瓶颈。

实际上，当你使用模板时，Vue会将其编译成渲染函数。如果你需要JavaScript的全部功能和灵活性，可以自己直接编写渲染函数或编写JSX。

h是createElement的别名，得名于使用JavaScript描述HTML的技术——Hyperscript。

createElement（或称h）方法最多需要3个参数：

1.元素类型：可以是HTML标签名称（如div），在应用中注册过的组件名称，或者一个组件定义对象

2.可选参数：定义属性、prop、事件监听器等的数据对象

3.可选参数：简单纯文本、用h创建的其他元素的数组

render(h) {

      return h('ul', { 'class': 'movies'}, [

        h('li', { 'class': 'movie' }, 'Star Wars'),

        h('li', { 'class': 'movie' }, 'Blade Runner'),

      ])

}

它将在浏览器中输出以下DOM：

<ul class="movies">

    <li class="movie">Star Wars</li>

    <li class="movie">Blade Runner</li>

</ul>

虚拟DOM

render函数返回由createElement（或h）建立的一个节点树，这些节点在Vue中称为VNode。这棵节点树代表Vue承载的虚拟DOM中的一个组件视图。DOM中的每个元素都是一个节点——HTML元素、文本，甚至注释也是节点。
Vue不直接将虚拟DOM转化为实际的DOM树，因为这样可能引发很多DOM操作（添加或删除节点），十分损耗性能。
为了更加高效，Vue在两种DOM树之间创建一个差异表，只在必要时才会通过DOM操作将虚拟DOM同步到实际的DOM。