vue2.x 渐进式 响应式 组件化
1. 概念
1.1. 实例
通过 new Vue() 创建对象，配置对象的部分内容会被提取到vue实例中，完成数据响应式， Object.defineProperty() 监控属性的赋值与取值。data props methods computed。
1.2. 挂载
Vue实例控制网页中某个区域的过程叫做挂载，挂载方式： el:class 选择器； vue.$mount("css选择器") 配置。
1.3. 模板
Vue实例控制的页面片段。
- 作用
提高渲染效率，Vue把模板编译为DOM树（VNode）每个节点相当于js对象，然后再生成真实的DOM。
- 位置
挂载元素内部、template配置中、render配置中用函数创建。
- 内容
静态内容、 插值 {{js表达式}} mustache语法。
指令
| 名称 | 描述 |
|---|---|
| v-html | 绑定元素的innerHtml，跨站脚本攻击 |
| v-bind | 属性名 -绑定属性（等价于“:”，去掉v-bind） |
| v-on | 事件名 -绑定事件（等价于“@”，去掉v-on） |
| v-if | 判断元素是否需要渲染 |
| v-show | 判断元素是否应该显示 |
| v-for | 用于循环生成元素 |
| v-bind:key | 用于帮助在重新渲染时元素的对比，通常和v-for搭配使用，提高渲染效率 |
| v-model | 语法糖，用于双向绑定，实际上自动绑定了value属性值，和注册input事件 |
- 代码环境
模板中所有js代码，其他的环境均为vue实例。
1.4. 配置
-
data数据。 -
template字符串，配置模板。 -
el配置挂载区域。 -
methods配置方法。 -
computed配置计算属性。 -
计算属性和方法区别
- 计算属性使用时，当成属性使用，方法是需要调用的。
- 计算属性会进行缓存，如果依赖不变直接使用缓存结果，不会重新计算。
- 计算属性可以当成属性赋值。
2. 环境搭建
ES6模块化 没有模块化造成全局变量污染，难以管理依赖；常见的模块化标准：CommonJS、ES6...
组件 把一个页面中区域功能细分，每一个区域为一个组件，组件包含：功能（JS代码) 内容（模板代码） 样式（CSS代码）
2.1. Node安装
npm config set registry https://registry.npm.taobao.org/
npm config get registry
npm install -g @vue/cli
vue --version
vue create 项目名称
2.2 项目创建
npm uninstall -g @vue/cli
npm install -g @vue/cli@3.11.0
重新加载包依赖
npm -install
