1.vue 2 简介(入门)。

1.Vue定义：一套用于构建用户界面的渐进式 JavaScript 框架(入门)。

• 1-1.构建用户界面：从数据到界面的过程。
• 1-2.渐进式：Vue 可以自底向上逐层的应用：
  • ①简单应用：只需一个轻量小巧的核心库。(100k左右)。
  • ②复杂应用：可以引入各种的 vue 插件。

2.Vue 特点：组件化、不直接操作 DOM (入门)。

• 2-1.采用组件化模式，提高代码复用率、且让代码更好维护。.vue 文件包括html、css、js。
• 2-2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。区别于命令式编码。
• 2-3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

3.vue创建项目(npm安装→初始化项目)(入门)

• 3-1.npm安装。
  • ①先从 nodejs.org 中下载 nodejs，双击安装，在安装界面一直 Next，直到 Finish 完成安装。
  • ②打开控制命令行程序(CMD)(win + R 输入 cmd)，检查是否正常，更新 npm 版本(npm install -g)：node -v; npm-v
  • ③使用淘宝 NPM 镜像：就可以使用 cnpm 命令来安装模块了。

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 3-2.项目初始化
  • ①安装 vue-cli：cnpm install --global @vue/cli
  • ②查看 vue-cli 是否成功，不能检查 vue-cli，需要检查 vue：vue list；vue -V
  • ③新建项目三种方式：
    • α：vue init webpack “项目名称”：
    • β：vue create “项目名称”：
    • γ：vue ui “项目名称”：
  • ④先安装下依赖再运行一下：安装依赖：cnpm install。运行项目（查看 package.json 文件）：npm run dev

4.项目文件结构(入门)：

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

5.vue.config.js 配置文件(入门)：

• 5-1. 使用 vue inspect > output.js可以查看到Vue脚手架的默认配置。
• 5-2.使用 vue.config.js 可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

6.SPA 项目(初级)：

• 6-1.SPA项目：用户操作均在一个页面的单页面应用，初始时加载对应的 HTML、JavaScript、CSS。加载完成，SPA 不会因为用户的操作进行页面的重新加载或跳转。取而代之的时利用 JavaScript 动态的变换 HTML 的内容，从而实现人机交互。

• 6-2.SPA 项目中 Vue工作，必须创建一个 Vue 实例，且要传入一个配置对象。实际开发中只有一个 Vue 实例，且会配合着组件一起使用。
• 6-3.挂载根容器容器有2种写法：
  • ①new Vue 时候配置el属性。
  • ②先创建Vue实例，随后再通过 vm.$mount(‘#app’)指定 el 的值。

new Vue({ 
  el: '#root', 
})
---------------------------------
new Vue({
  render: h => h(App),
}).$mount('#app')

• 6-4.Vue实例和容器是 一 一对应的。

7.Vue2 项目中 this 的指向(初级)：

• 7-1.由 Vue 管理的函数不能使用箭头函数，会改变 this 的指向，导致 this 不再指向 Vue 实例。
  • ①data 函数。
  • ②methods 中定义的函数。
  • ③computed 中的 get 与 set 函数。以及简写形式的计算属性。
  • ④watch 监视属性中的简写属性函数及 handler 函数。

8.vue 中 data 写成函数的原因(初级)。

• 8-1.Vue 实例与组件实例中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。
• 8-2.写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果。
• 8-3.不需要将所有的数据都放在 data 中，不需要响应式的数据我们可以定义在实例上。data 中的数据都会增加 getter 和 setter，又会收集 watcher。或者钩子函数中执行。
• 8-4.使用Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化

created() {
  this.list = [1, 2, 3, 4]
},

var obj = {
  foo: 'bar'
}
Object.freeze(obj)
new Vue({
  el: '#app',
  data: obj
})