Vue entry notes a

"Vue.js project combat."

Vue core functionality Overview

1. A responsive data system, through the lightweight virtual DOM engine optimization work to a minimum and automatically update the user interface
2. Flexible view statements, including elegant friendly HTML template, JSX (written in HTML in JavaSript technology) and hyperscript (fully using JavaScript)
3. a maintainable, reusable user interface components that make up the components of
4. the official component library provides routing, state management, scaffolding and more advanced features, the Vue has become a flexible and improve the function of the front frame

Compatibility Requirements

• Vue does not depend on any third party
• Can be used in any compatible browser ECMAScript 5's
• Does not support Internet Explorer 8 and below
• Write ES2015 (ES6) need the compiler Babel, to run in older versions of the browser

Vue Developer Tools

• Chrome Vue.js devtools [Enable Allow access to file URLs, debugging tools can be detected on an open Web page from the local disk Vue]

Senior Project Settings

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 version

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"
      ]
    }
  }
}

Creating an application

1. Remove the contents of src folder
2. Create a new JavaScript file using the following named main.js

import Vue from "vue"
new Vue({
    el: "#app",
    render: h => h("div", "hello world")
});

Update dependence

1. Manual Update

// 1.检查项目中使用的包是否有新版本
npm outdated     
// 2.打开package.json改变对应版本范围，保存
npm install

2. Automatic Updates

npm update

3. Update Vue
VUE package and vue-template-compiler package must always be in the same version

Rendering function

Vue used to implement a virtual DOM, and JavaScript object with a tree structure to build a virtual DOM. Then, Vue will be applied to the virtual DOM DOM real browser, the methods used to calculate the difference between the two. This is as far as possible to avoid the DOM manipulation, DOM manipulation because often the main performance bottleneck.

In fact, when you use the template, Vue will be compiled into rendering function. If you need the full power and flexibility of JavaScript, you can write your own rendering function or directly write JSX.

h is createElement alias name to describe HTML using JavaScript technology --Hyperscript.
createElement (or called h) The method requires a maximum of three parameters:
1. The element type: may be a HTML tag name (e.g., div), registered in the name of the application components, or a component definition object
2. Optional parameters: custom attributes , prop, event listeners and other data objects
3. optional parameters: simple plain text, other elements of an array created by h

render(h) {
      return h('ul', { 'class': 'movies'}, [
        h('li', { 'class': 'movie' }, 'Star Wars'),
        h('li', { 'class': 'movie' }, 'Blade Runner'),
      ])
}

It will output the following DOM in the browser:

<ul class="movies">
    <li class="movie">Star Wars</li>
    <li class="movie">Blade Runner</li>
</ul>