使用框架进行开发

什么是框架？

框架，就是别人写好了，包装起来的一套工具，把你原先必须要写的，必须要做的一些复杂的东西都写好了放在那里，你只要调用他的方法，就可以实现一些本来要费好大劲的功能。

可以把框架比喻为一栋刚落地建成的大楼，大楼里什么都没有，只是一个空架子，但是楼的外面堆满了建材和各种制式家具，需要你自己挑选家具放进去，当然你也可以在家具的上面雕刻点你喜欢的图案，然后再放进去，最终把楼装饰成你想要的样子

框架开发的好处

框架可以帮助省略掉一些基本的相同底层代码的反复书写，只需调用框架的方法就可以实现你想要的功能。学习框架的目的就是提高项目的编写效率，使你可以有更多的时间去编写属于自己独特的东西，而不需要将大量的时间花费在底层代码的书写上。

//Javascript手搓简单数据双向绑定
<div>
     展示：<h1></h1>
     输入: <input type="text">
</div>
<script>
function definePropertyFn() {
     let obj = {}
     let val = null
//Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
     Object.defineProperties(obj, {
          val: {
               get() {
                    return val
               },
               set(newV) {
                    val = newV
                    document.querySelector('h1').innerText = newV
                    console.log('调用了set,获取:' + newV, val);
               }
           }
      })
      return obj
}
let newObj = definePropertyFn()
document.querySelector('h1').innerText = newObj.val
document.querySelector('input').value = newObj.val
document.querySelector('input').addEventListener('input', function () {
     newObj.val = document.querySelector('input').value
})
</script>

//使用vue框架时双向绑定
<div id="app">
    展示：<h1>{{name}}</h1>
    输入: <input type="text" v-model="name">
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Fatfatshark!'
  }
})
</script>

如何在项目中使用vue框架

使用vue-cil脚手架

配置开发环境1. 安装和配置nodejs

nodejs官网下载node
测试是否安装成功：node -v npm -v查看版本号
配置安装目录和缓存日志目录
1. 在安装node的文件夹下创建两个文件夹【node_global】及【node_cache】。
2. 在命令行，执行命令：
  1. npm config set prefix "D:...\node_global"
  2. npm config set cache "D:...\node_cache"
配置环境变量：

1. 进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，值输入D:...\node_modules，将【用户变量】下的【Path】增加D:...\node_global （改成自己的路径）

    1.  国内镜像站配置：

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

1.  使用 npm全局安装 webpack

    1.  `npm install webpack webpack-cli -g`
    1.  `webpack -v`查看版本

1.  全局安装 vue-cli

    1.  `npm install -g @vue-cli`安装，最好在终端的管理员模式下安装
    1.  `vue -V`查看版本

###     使用vue-cli快速创建项目1.  找个文件夹，文件夹下打开终端
1.  `vue create xxx`创建项目
1.  `cd xxx`进入项目目录
1.  `npm install`
1.  `npm run serve`

使用cdn引入vue

在html文件里挂载vue：
1. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

使用举例

```
<div id="app">
  {{ message }}
</div>
```

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

使用vue脚手架创建的项目结构

概念

官方：每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。

别名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在特定时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

分析生命周期

数据代理

是什么？

通过一个对象代理对另一个对象中属性的操作（读/写）

干嘛用的

更加方便的操作data中的数据

diff算法

虚拟DOM和真实DOM

为什么要有虚拟DOM

（用vue举例）当数据变化的时候，视图也要更新，视图更新是需要操作DOM的(重绘)，操作真实的DOM是非常消耗性能的

所以可以利用 js 的计算性能来换取操作DOM所消耗的性能

当视图要更新的时候，通过对比数据变动前后的状态，将更新前的虚拟和新的虚拟DOM进行对比,计算出视图哪些地方需要更新，只更新需要更新的地方，其他的不需要的不用关心，这样就减少了操作DOM.

我们想的：

实际：

使用一个独一无二的值来当做key。

常用的生命周期钩子：

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

vue初识