《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。