Vue

1. 介绍
   兼容性：ie8+
   特点：
   1. 声明式渲染
   只需要将vue实例中的变量声明在模块中即可
   

   {{message}}

   
   2. 使用指令完成条件渲染和列表渲染
   3. 双向数据绑定
   
   4. 组件化（模块化）

2. 安装

   1. script
      只适合学习使用

   2. npm
      $ npm install vue --save

   3. 脚手架
      无需安装只管使用

3. vue实例对象

   1. 实例化
      let vm = new Vue({
      el, // 用于表示模板
      data:{}, // 用于保存该vue实例的变量，用于页面渲染或者双向数据绑定 ,当vue实例创建后，data中的值就会放入到响应式系统中，只要data中的值发生了变化，页面中也就相应的得到响应。

      })

   2. vue实例可以直接访问data中的变量
      let vm = new Vue({
      data:{
      a:1,
      b:2
      }
      })
      vm.a

4. vue的声明周期
   vue实例对象由创建到页面渲染到最后销毁的整个过程

   1. 声明周期函数
      breforeCreate
      created
      vue实例对象的创建完成，data中的变量也绑定在vue实例对象上
      beforeMount
      在模块转换为具体的虚拟dom之前的阶段，这个阶段完成mount的准备工作，比如将html转换为template,获取data中变量
      mounted
      已经mount完毕，也就是说已经将data中的变量设置到了template中
      beforeUpdate
      当data中的值发生了变化，网页准备重新更新之前
      updated
      当网页重新渲染完成
      beforeDestory
      destoryed

   2. 生命周期函数的应用
      这些函数作为Vue构造函数参数的属性存在，可以使用函数简写的语法，在生命周期钩子函数中，this指向指向vue实例

      let vm = new Vue({
      created(){
      this -> vm
      }
      })

5. 双向数据绑定

6. 模板语言

   1. 声明式渲染
      {{message}}
      {{表达式}}

   2. 指令
      v-on:事件类型
      v-bind:属性
      v-if=“条件”
      v-show=“条件”
      当dom元素频繁的显示与隐藏相互切换使用v-show，因为在隐藏与显示切换的时候不操作dom对象只改变dom对象的display属性
      v-for=“item in list”
      v-html=“v”

   3. 指令简写
      v-on:click => @click
      v-bind:value => :value

      案例：

1. 为什么使用脚手架
   1. 模块化机制
   2. vue-cli能够进行项目管理
   1. 创建并且初始化工程
   node_modules
   src
   components
   pages
   App.vue 根组件
   main.js 入口文件
   package.json
   2. 测试
   自带静态服务器
   3. 打包
   vue -> html/css/js

   2. 安装脚手架程序

      1. 本地安装node

         node -v
         v 10.16.0

      2. 全局安装cnpm

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

      3. 全局安装@vue-cli

         cnpm install -g @vue/cli
         vue --version
         @vue.cli 4.0.3

      4. 创建app01

         vue create app01

      5. 安装依赖

         cd app01
         // 安装axios qs
         cnpm install axios qs --save

         // 安装element

         vue add element