生命周期

before- create -d 刚创建-创建完成

before- mount -ed 挂在前后（在mounted函数内的代码都属于真实的DOM）

before- destroy -ed 销毁前后

vue是虚拟的DOM，ajax，swiper等都在Mounted里面执行

通过双大括号绑定数据

选项数据

• data 函数

  全局变量定义，可以绑定到模板（template包含）上

• computed 对象，内放函数

• methods 对象，内放函数，用于点击事件

  <div @click="change"></div>
  methods:{
      change(){}
  }
  v-on:click="say('hi')"
  click.stop // 阻止事件冒泡，stop是事件修饰符
  

模板语法

• data
• 模板中直接嵌入js代码
• 指令 v-html v-on v-bind等 v-bind:class=“变量名” 缩写 “:class='变量名' ”
• 计算属性
• 过滤器

条件渲染

• v-if
• v-else-if
• v-else
• v-show

列表循环

• v-for

  • v-for="item in items"数组
  • v-for="(item, index) in items"数组
  • v-for="(value, key) in object"对象

表单控件绑定 v-model

自定义组件

• 写到components文件夹下

• 自定义一个倒计时组件

• 组件基本要素：props：{}、$emit等

• 通过import导入自定义组件

• components:{ 组件 } 注册

  ​x
  props: {
      col: {
          type: String,
          default: "black"
      }
  }
  ​
  mounted(){
      var vm = this;
      vm.$emit("end");
  }
  ​
  page页面
  <self-conponent @end="endFun"></self-conponent>
  ​
  methods: {
      endFun(){
          alert("组件结束");
      }
  }
  

Vue中DOM操作

• this.$refs

Vue过渡

• 显示-》隐藏 经历3个状态

  • name-leave
  • name-leave-active
  • name-leave-to

• 隐藏-》显示 enter 状态

  • enter 就绪
  • enter-active 全程状态
  • enter-to

xxxxxxxxxx
transition: property duration timing-function delay;
规定应用过渡效果的 CSS 属性的名称
过度时间
过渡函数： linear ease ...

路由 vue-router

• npm install 安装 vue-router包

状态管理 vuex

• npm install 引入 vuex
• 全局状态管理，所有页面共享数据

Slot插槽

• 常用语组件

  xxxxxxxxxx
  <slot name="bottom"><slot> // 组件内部
  ​
  <zujian>       // 父组件或页面
      <p slot="bottom"></p>
  </zujian>
  

vue-resource

• npm install vue-resource --save

组件库 Mint UI

• import MintUi from 'mint-ui'
• import 'mint-ui/lib/style.css'