Vue1.x 写法示例

Vue1 官网。
如果你用的是 Vue2，看Vue2.x 写法示例。

Hello World

  {{ message }}
  点击
  无参数的简写

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    clickMe: function(){}
  }
});

指令

循环

循环数组

 第{{ $index }}条:{{ item.message }}

items 的结构类似这样

[{
  id: 1,
  message: 'foo'
}, {
  id: 2,
  message: 'bar'
}]

循环对象

循环数字

{{ n }} 

条件

Yes
No


Hello!

事件绑定

点击

点击

点击

点击

点击

表单的双向绑定

绑定属性

 



![](imgSrc)

避免闪烁： v-cloak

[v-cloak] {
  display: none;
}

  {{ message }}

编译结束后，Vue 会删除元素上的 cloak 属性。

单向绑定

单向绑定的意思是，即使绑定变量的值发生变化，显示的内容仍旧就是最初绑定时候的值。

This will never change: {{* msg }}

输出 HTML

{{{ raw_html }}}
 

计算属性

{{fullName}}

new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
});

自定义指令

定义指令：

Vue.directive('my-directive', {
  bind: function () {
    // 准备工作
    // 例如，添加事件处理器或只需要运行一次的高耗任务
    this.el;// 添加指令的元素
    this.vm.$get(name)// 获得该指令的上下文 ViewModel
    this.expression;// 指令的表达式的值
  },
  update: function (newValue, oldValue) {
    // 值更新时的工作
    // 也会以初始值为参数调用一次
  },
  unbind: function () {
    // 清理工作
    // 例如，删除 bind() 添加的事件监听器
  }
})

使用指令：

监听数据变化

new Vue({
  data: {
    firstName: 'Foo'
  },
  watch: {
    firstName: function (val, oldVal) {
    }
  }
});

过滤器

{{ msg | capitalize }}// 'abc' => 'Abc'

常见内置过滤器
capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。

自定义过滤器

Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end;
});

this.$options.filters.filter名称 可以获取到具体的 filter

生命周期相关的钩子函数

new Vue({
  created: function(){},
  beforeCompile: function(){},
  compiled: function(){},
  ready: function(){},// DOM 元素已经加入到HTML中
  beforeDestroy: function(){},
  destroyed: function(){}
});

过渡效果

/* 必需 */
.my-transition-transition {
  transition: all .3s ease;
}
/* .my-transition-enter 定义进入的开始状态 */
.my-transition-enter{}
/* .my-transition-leave 定义离开的结束状态 */
.my-transition-leave {}

组件

定义和调用组件

Vue.component('my-comp', {
  template: 'html strings',
  props: {
    prop: String,
    prop1: {
      type: Number,
      required: true
    },
    prop2: {
      type: Number,
      default: 88
    },
     // 对象/数组的默认值应当由一个函数返回
    prop3: {
      type: Object,
      default: function () {
        return { msg: 'hello' }
      }
    },
    // 自定义验证函数
    prop4: {
       validator: function (value) {
        return value > 10
      }
    }
  },
  data: functin(){
    return {

    }
  }

}

父子组件通信

// 子组件
var child = new Vue.component('child', {
  events: {
    'parent-msg': function (msg) {}
  }
});

// 子组件向父组件传消息
child.$dispatch('child-msg', child.msg);

// 父组件
var parent = new Vue({
  events: {
    'child-msg': function (msg) {
      // 父组件向所有子组件传消息。
      this.$broadcast('parent-msg', 'received it');
    }
  }
});

this.$parent 访问它的父组件。
this.$root 访问它的根组件。
this.$children 访问它的子组件。

可以通过 ref 来访问组件。如

Slot

组件中定义用 slot 来定义插入点，可以带name来标识 slot。

Vue.component('multi-slot-component', {
  template: `

                
单个Slot
                默认值
                slot1:默认值1

                slot2:默认值2
              
`,
  data() {
    return {
      describe: '我叫小呆'
    }
  }
})

调用组件的地方用 slot 属性的值来对应插入 slot 的位置。

  父组件插槽内容1
  父组件插槽内容2

小技巧

渲染一个包含多个元素的块

template 用于包含多个元素的块,最终的渲染结果不会包含 template 元素。

Vue.set 和 Vue.delete

用于解决 不能检测到属性添加，属性删除的限制。

Vue.nextTick

// 修改数据
vm.msg = 'Hello'
// DOM 没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

Vue 在检测到数据变化时是异步更新 DOM 的。具体见 异步更新队列。vm 上也有 this.$nextTick。