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。