vue(一)

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

一.Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
1.模板语法 Mustache语法，{{}}
2.属性和方法（方法写在methods里面）
v-bind:修饰属性，简写为 :
v-on:修饰方法，简写为 @
3.生命周期
它可以总共分为8个阶段：

beforeCreate（创建前）,初始化

created（创建后）,

beforeMount(载入前),

mounted（载入后）,mounted 实例对模板进行编译完成，并插入到真实dom中

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）
理解生命周期，会使用mounted开始执行页面逻辑，比如ajax加载数据

4. 计算属性和监听属性
   computed 计算属性， 对应属性读取的getter方法
   watch 监听属性， 对应属性读取的setter方法
   5.数组循环遍历输出
   v-for="(item,index) in array" :key="index"
   添加一个key属性，保证不重复，这样在数组更新的时候就会根据key去寻找对应的改变项做更新，不用整个数组重绘
   6.表单绑定
   v-model 伪双向绑定，可以直接修改data的值
   绑定class和绑定原生css
   对象语法，数组语法，表达式生成字符串语法，内联样式，组件样式混合

7.更新机制
自动更新：有数据变化，以前存在的数据和属性变化会导致自动更新
对数组和对象可以用解构的方式直接改变指针指向
手动更新：this.$forecUpdate();

8. 条件渲染和列表渲染
   条件：v-if + v-else + v-elseif
   列表：v-for
   9.事件处理器
   .stop
   .prevent
   .capture
   .self
   .once
9. 模版定义和使用
   注册组件：Vue.component
   使用组建：render方法和template

---

          <script>
        import axios from 'axios'   
        export default {
      data: function(){
          return {
           id:1,
           cls:'active',
           message: 'Hello Vue!',
           name:'hero',
           birthday:'1999',
           arr:[],
           newArr:[],
           obj:{},
           array:[]
          }, 
     //开始执行页面逻辑，比如ajax加载数据
          mounted:function(){
       axios.get('https://www.easy-mock.com/mock/5af6599acf64741ceacf1c57/es6/carBrand',
        params:{
            
              }
      )
    .then((res)=>{
      }
        }，
        //放一些方法
        methods:function(){

          }
      }
        </script>   

---

安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

    # 全局安装 vue-cli
    $ cnpm install --global vue-cli

vue https://segmentfault.com/a/1190000011275993
axios https://blog.csdn.net/binginsist/article/details/65630547

---

对比react生命周期和vue的生命周期
触发时期 Vue React
组件创建之前 beforeCreate 无
组件创建完成 created constructor
组件挂载之前 beforeMount componentWillMount
组件挂载完成 mounted componentDidMount ***
组件更新之前 beforeUpdate componentWillUpdate
组件更新完成 updated componentDidUpdate

    将要获取props       无              componentWillReceiveProps
    组件是否要更新      无              shouldComponentUpdate
    组件渲染            无              render  

    组件销毁之前        beforeDstory    componentWillUnmount    ***
    组件销毁之后        destoryed       


    组件怎么销毁        v-if为false     用条件表达式不渲染
                       vm.$destory()   unMountComponentAtNode()