vue基本构成简介

逆战，fighting！

vue简介

• vue是一套构建用户界面的渐进式框架 ，偏向于视图层 view (component 组件)。并且具有API 齐全简单明了的特点，它采用自下而上的增量开发设计方式，尤其以单页面应用最为突出（SPA ——single page appliaction ）， 通过路由匹配组件和数据 (vue-router) 。
• vue基本指令：
  v-bind 绑定属性 : 缩写
  v-on 绑定事件 @ 缩写
  v-if if 隐藏 渲染和不渲染的区别 。(v-if是真正的条件渲染，确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，有更高的切换开销 ，且在运行时条件很少改变 v-if 较好 )
  v-show 显示和隐藏 display:none 样式切换 。（元素总是会被渲染，只是简单地基于 CSS 样式进行切换 ，有更高的初始渲染开销，如非常频繁地切换使用 v-show 较好）
  v-for 遍历数据(遍历对象/ 数组)

 v-for="(todo,i) in todos"    //两种不同的写法
 v-for="(value,key,index) in object" 
 // key为了给 Vue提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。

    v-model 双向绑定表单

    v-model : 
    1.表单输入和应用状态之间的双向绑定 ;
    2.只能用于input 或者 textarea;
    3.封装语法糖,事件监听,数据绑定;
    v-model 实现数据双向绑定 :
    1. 修改 数据 model  更新 view DOM
    2. 修改 view DOM  更新数据 

    v-model指令把DOM(视图)和数据（model）绑定在一起: 
    当你修改 view 触发DOM Listeners 就马上去 修改对应的model 的值；
    当你修改 model(data) 中的值 马上去执行 data-bindings 去 修改对应 DOM；

• vue数组操作方法：

1. 变异数组方法 ：触发vue ，视图更新并且改变原数组。
   push()
   pop()
   shift()
   unshift()
   splice()
   sort()
   reverse()
   join()
   2. 非变异数组方法 ：不会改变原数组 无法触发Vue视图更新返回新的数组。
   filter()
   concat()
   slice()
   find()

• 自定义指令：
  自定应指令可以操作底层的dom元素。
  举个栗子： v-focus ；v-是开头，focus是指令。注意一般情况下驼峰命名法会出现问题，最好写成连字符的形式，比如myShow最好写成v-my-show。

• 组件简介：
  组件我个人的理解就是vue实例的一个简单版本，里面包含html业务逻辑代码块，其中有页面结构内容和调用的数据；组件需要定义一个函数，函数必须有返回对象（这样引入的数据才可能被调用渲染到页面视图之上）。好处在于可以反复复用，减少代码的冗余度，提高这个vue项目的运行效率。

• 请求数据的方法fetch&&axios
  由于vue本身不支持ajax这种方式请求数据，需要通过其他插件如vue-resource或者axios、fetch等插件实现，在这里我主要介绍fetch和axios。

// 此处为以下两种请求方式的公共html代码：
   <div id="box">
        <button @click="handleClick()">click</button>   //axios/fetch两种请求方式均通过此按钮触发请求
        <ul>
            <li v-for="data in datalist" :key="data.filmId"