vue.js简单学习记录

<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>

生命周期

var vm = new Vue({
  data: {
    a: 1
  },
  created: function() {
  }
})

• init：开始初始化
• created：实例创建之后，但尚未开始DOM编译，即未挂载到document中
• beforeCompile：DOM编译前
• beforeMount：在mounted之前运行
• compiled：编译结束时调用
• ready：编译结束和$el第一次插入文档之后调用，2.0废弃该方法，推荐使用mounted
• attached：在vm.$el插入DOM时调用
• detached：vm.$el从DOM删除时调用
• beforeDesctroy：销毁前
• destroyed：销毁后
• beforeUpdate：再次更新实例前
• updated：更新时
• activated：配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用方法。

 

指令

   指令是Vue.js中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM行为。

内置指令

v-bind：动态绑定DOM元素属性（attribute）。<img v-bind:src="avatar" />

v-model：主要用于input、select、textarea标签中

v-if/v-else/v-show：主要用于根据条件展示对应的模板内容。

v-for：用于模板渲染的指令。<li v-for="(index, item) in items" >

v-on：主要用于事件绑定。<button v-on:click="onClick"></button>

v-text：参数类型为String。{{}}文本插入也会被编译成textNode的一个v-text指令。

v-HTML：更新元素的innerHTML，字符串不会进行编译等操作，按普通HTML处理。<div v-HTML="HTML"></div>

v-el：为DOM元素注册索引，使得我们可以直接访问DOM元素，通过$els属性调用。

<div v-el:demo>text</div>
vm.$els.demo.innerText   // text

v-ref：与v-el类似，只不过v-ref作用于子组件上，通过$refs访问

v-pre：跳过编译这个元素和子元素，显示原始的{{}}Mustache标签，用来减少编译时间。

v-cloak：相当于在元素上添加了一个[v-cloak]的属性，直到关联的实例结束编译。

v-once：vue.js 2.0中新增的内置指令，用于标明元素或组件只渲染一次，即使之后发生变化

自定义指令基础

除了内置指令外，Vue.js也提供了自定义指令的方法，以便封装对DOM元素的重的处理行为，提高代码复用率。

指令注册：Vue.directive(id, definition)方法注册一个全局自定义指令，id是指令的唯一标识，definition（定义对象）是指令的相关属性及钩子函数。Vue.directive('global-directive', definition);模板中<div v-global-directive></div>

指令的定义对象：definition主要包含三个钩子函数：bind（第一次绑定到元素上时调用）、update（每次绑定值发生变化时）和unbind（解绑时调用）。

指令实例属性：在指令的钩子函数内，可以通过this来调用指令实例。

• el：指令绑定的元素
• vm：该指令的上下文ViewModel，可以为new Vue()的实例，也可以为组件实例
• expression：指令的表达式，不包含参数和过滤器。
• arg：指令的参数
• name：指令的名字，不包含v-前缀
• modifiers：一个对象，包含指令的修饰符。
• descriptor：一个对象，包含指令的解析结果。

元素指令：普通指令需要绑定在某个具体的DOM元素上，但元素指令可以单独存在，从使用上像是一个组件，但本身内部的实例属性和钩子函数是和指令一致的。Vue.elementDirective('my-ele-directive')，Vue2.0中取消了这个特性，推荐使用组件

指令的高级选项

     指令定义对象中除了钩子函数外，还有一些其他的选项。

params：定义对象中可以接受一个params数组

<div v-my-advance-directive a="paramA"></div>
Vue.directive("my-advance-directive", {
   params : ['a'],
   bind: function() {
       console.log('params', this.params);
   }
}

deep：用来监听对象内部发生的变化。

twoWay：需要向Vue实例写回数据

acceptStatement：允许自定义指令接受内联语句

terminal：阻止Vue.js遍历这个元素及其内部元素

priority：指令的优先级

过滤器

Vue.js允许在表达式后面添加可选的过滤器，以管道符表示，例如：{{ message | capitalize }}

过滤器的本质是一个函数，接受管道符前面的值作为初始值，同时也能接受额外的参数。多个过滤器也可以进行串联。

{{ message | filterA | filterB }}

过滤器注册：接受过滤器ID和过滤函数两个参数，过滤函数可接受任意数量参数，第一个为初始值。例如：

Vue.filter('date', function(value，format) {
    return "test"
}}
<div>{{ date | date 'yyyy-MM-dd' }}</div>

双向过滤器：之前的过滤器都是在输出到视图之前，对数据进行转化，但数据本身不变。而双向过滤器会改变数据

<input type="text" v-model="price | cents">
Vue.filter("cents", {
   read: function(value) {
       return (value/100).toFixed(2);
   },
   write: function(value) {
       return value * 100;
   }
});
var vm = new Vue({
   el: "#app",
   data: {
      price: 150
   }
});

动态参数：过滤器也支持接受vm实例中绑定的数据，称为动态参数。<span>{{ date | function price }}</span>

过渡

过渡系统是Vue.js为DOM动画效果提供的一个特性，它能在元素从DOM中插入或移除时触发CSS过渡（transition）和动画（animation），也就是说在DOM元素发生变化时为其添加特定的class类名，从而产生过渡效果。除了CSS过度外，Vue.js的过渡系统也支持javascript的过渡，通过暴露过渡系统的钩子函数，我们可以在DOM变化的特定时机对其进行属性的操作，产生动画效果。

CSS过渡:

<div v-if="show" transition="my-startup-transition"></div>
.my-startup-transition {
   transition: all 1s ease;
}

CSS过渡钩子函数：通过Vue.transition('name', {})

显示声明过渡类型：指定监听的结束事件的类型

Vue.transition('done-type',  {
   type: 'animation'
})

自定义过渡类名：

官方推荐类一个CSS动画库，animate.css，配合自定义过渡类名使用，可达非常不错的效果。

JavaScript过渡

引入Velocity.js来配合使用JavaScript过渡。

Velocity.js：一款高效的动画引擎

组件

Vue.js通过自定义组件来实现代码复用，支持自定义tag和原生HTML元素的扩展。

组件注册：var MyComponent = Vue.extend({ ... })

全局注册：需要确保在根实例初始化之前注册，这样才能使组件在任意实例中被使用，Vue.component('my-component', MyComponent)

，这个需要在var vm=new Vue({...})之前使用。

<div id="app">
   <my-component></my-component>
</div>
var MyComponent = Vue.extend({
  template: "<p>This is a component</p>"
})
Vue.component('my-component', MyComponent)
var vm = new Vue({
  el: '#app'
});

局部注册：限定了组件只能在被注册的组件中使用，而无法在其他组件中使用：

var Child = Vue.extend({
  template: "<p>This is a child component</p>"
});
var Parent = Vue.extend({
  template: "<div><my-child/></div>",
  components: {
     'my-child': Child
  }
});

注册语法糖：也可以直接在注册的时候定义组件构造器选项

组件选项：

组件间通信：

直接访问：提供了以下三个属性

• $parent：父组件实例
• $children：包含所有子组件实例
• $root：组件所在的根实例

自定义事件监听：方便修改组件状态。

events选项，可在初始化时直接传给选项events一个对象

$on方法   this.$on()

自定义事件触发机制：

$emit

$dispatch，事件沿着父链冒泡

$broadcast，广播事件，会向下传递给所有的后代

子组件索引

内容分发：

<slot>标签

动态组件：多个组件可以使用同一挂载点，根据条件来切换不同的组件。往往运用在路由控制或者tab切换中

使用保留标签<component>，通过绑定到is属性的值来判断挂载哪个组件。

keep-alive属性：可以将切花出去的组件保留在内存中，避免重新渲染。

activate钩子函数：作用于动态组件切换或者静态组件初始化的过程中。

Vue.js常用插件

Vue-router和Vue-resouce能提供路由管理和数据请求。vue-devtools对开发和调试有非常大的帮助，是一款chrome插件。

Vue-router：提供路由管理的插件，利用hash的变化控制动态组件的切换。页面之间跳转放在前端执行，切换完成后再向后端请求数据。这样也有助于前后端分离，前端不用依赖于后端的逻辑，只需要后端提供数据接口即可。

<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>

也可以采用npm的方式

npm install vue-router

引用方式如下：

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter)

基本用法是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。

路由对象

v-link是vue-router应用中用于路径间跳转的指令，其本质是调用路由实例router本身的go函数进行跳转。该指令接受一个JavaScript表达式，而且可以直接使用组件内绑定的数据。

route钩子函数

属性及方法

Vue-resource：vue.js不依赖于jQuery，

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.2/vue-resource.min.js"></script>

 $http

拦截器主要作用于给请求添加全局功能，例如身份验证、错误处理等，在请求发送给服务器之前或服务器返回时对request/response进行拦截修改，完成业务逻辑后再传递给下一步骤。

封装Service层：通常会把和后端数据交互的方法封装成一个Service模块，供不同的组件进行使用。

Vue-devtools：安装方式通过Chrome Web Store直接进行安装，

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

浏览器打开“开发者模式”

Vue.js工程实例

实际SPA项目的开发，包括使用Vue-router和Vue-resource进行路由管理和后端数据交互，以及webpack和vue-loader进行模块化开发，代码编译和打包，最终通过自动部署工具jenkins来对项目进行自动化部署。