看完这个你就摸到vue的门槛了（手动滑稽）

vue

一、介绍

Vue是一套用于构建用户界面的渐进式框架

1.渐进式的理解

Vue 的核心库只关注视图层

便于与第三方库或既有项目整合

与现代化的工具链以及各种支持类库结合使用,也可为应用提供驱动

2.环境安装

vue-cli方式（新手不推荐)

3.数据驱动

vue用的是数据驱动的思路 数据改变了，视图会“自动"改变

4.虚拟dom和diff算法使数据改变时视图变化的dom操作效率很高

​ 虚拟dom(js对象,对象里存储的是模板的内容调用render函数返回的对象)

​ 数据改变了，比对数据变化前后的对象的差异(diff算法）, 找出变化的部分，对变化的部分做真实的dom操作, 提高dom操作的效率

###5、MVVM

  M  model 模型    存储数据    data
  V  view  视图    模板（template) 
  VM viewModel 视图模型    vm

6、检查的数据的变化的原理 Object.defineProperty

数组用下标改变，或者对象增加属性，这样的改变数据
是不能触发视图更新的，要用 Vue.set(对象,属性，值) 或this.$set(对象,属性，值)

7、 ( 指令 组件 路由 vuex 第三方的插件)

二、helloworld程序

1、一个基本的程序结构

new Vue（｛
		  el：“挂载的元素” 挂载的元素不能是body或html
		  data:{ key:value...}  存储数据的地方
		  template："<div>模板的内容" ，渲染数据的是模板  ,如果没有指定template,默认的模板就是el挂载的元素，如果el和template同时存在，
		  	渲染的是template模板的内容
         ｝）

2、插值表达式 {{插值表达式}} Mustache

​ 不能为 if for 这样的语句。可以调用函数，可以写表达式

3、模板 template

   1) template和el同时存在 渲染的是template的内容
   2) 模板的内容不能只是文本
   3)根元素只能有一个

4、computed

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

• 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以，对于任何复杂逻辑，你都应当使用计算属性

  ​

  ​

三、指令

1、v-bind

• 把变量的值绑定到标签的属性上 可以简写为“:"
• v-bind:style="{key:value…}" 对象的形式
• v-bind:class="{‘类名’:布尔值的表达式}" 常用
• v-bind:class="[类名1，类名2…]"

2、v-on

• 事件监听的指令 v-on:事件=“事件处理函数”
• 事件处理函数是放在methods里面
• $event事件对象（事件处理函数调用时不传参数默认传递的参数是$event)
• 阻止冒泡 v-on:事件.stop，阻止默认的行为 v-on:事件.prevent （.stop .prevent 指令的修饰符)
• 简写为 @
• 监听键盘事件 v-on:keyup.enter 回车 v-on:keyup.esc esc键

3、v-if

 例如:
        <p v-if="a>0">1</p>
        <p v-else-if="a===0">0</p>
        <p v-else>-1</p>

是惰性的 条件不满足，不渲染 有更高的切换开销

4、v-show

• 满足条件显示，不满足条件的就隐藏。

  不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

• 有更高的初始渲染开销

5、v-for

• 遍历数组 (item,index) in array 要指定key值 表示列表中的每一项的标识
• 遍历对象 (value,key,index) in obj
• 遍历 数字 从1开始
• 遍历字符串
• 不要把v-for 和v-if用在用一个元素上，因为v-for优先级比v-if高

6、v-once

​ 只渲染元素和组件一次。 例如 {{n}}

7、v-model

实现表单输入和应用状态之间的双向绑定

修饰符：

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为有效的数字
• .trim - 输入首尾空格过滤

8、v-html

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

9、v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

{{msg}}

10、v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

11、v-cloak

这个指令保持在元素上直到关联实例结束编译