Vue.js学习笔记

数据绑定语法

插值

文本插值： {{ mas }}
单次插值： {{ * msg }}

html插值： {{{ html }}}

绑定表达式

单个表达式：{{ message.split(”).reverse().join(”) }}

串联过滤器： {{ message | filterA | filterB }} message先进入过滤器A，出来进入过滤器B，然后再显示

带参数的过滤器 ：{{ message | filterA ‘arg1’ arg2 }} 过滤器A的第一个参数是message，第二个是arg1这个字符串，第三个是arg2的值

指令

v-if
v-bind 缩写为空
v-on 缩写为@

计算属性

computed: {
// 一个计算属性的 getter
b: function () {
// this 指向 vm 实例
return this.a + 1
}

vm.$watch

Class与Style绑定

使用v-bind 绑定class和style，当需要厂商前缀的时候vue.js还会自动添加。
多种情况绑定不同的class时，可以使用对象的方式：

:class="{ 'subitem': row.move == 0, 'subsubitem': row.move == 1,'subsubsubitem': row.move == 2 }"

另外其他html属性的绑定都要使用v-bind

条件渲染

单个元素使用v-if=”“

多个元素使用<template> 元素包起来，并在其上使用v-if

另外还有v-show。它跟v-if的区别在于：1.v-show不支持template；2.v-show是始终在dom中，改变display属性，而v-if是插入和删除元素。

可以用 v-else 指令给 v-if 添加一个 “else 块”
v-else 元素必须立即跟在 v-if元素的后面——否则它不能被识别。
2.0之后v-else只能跟v-if配合使用，跟v-show配合会报错。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

列表渲染

v-for= ‘item in items’
v-for= ‘(index, item) in items’
从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法

$index

方法与事件处理器

v-on 监听DOM事件

 // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // 方法内 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }

也可以内联js语句，但是只能一句。

事件修饰符

v-on后边可以跟很多种事件修饰符，例如：.stop .prevent .capture .self .keyup

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

表单控件绑定

可以使用v-model指令在表单控件元素上创建双向数据绑定。绑定后会根据表单控件中内容的改变而自动更新元素。

参数特性：lazy number debounce

过渡

通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。

为了应用过渡效果，要在目标元素上使用transition 特性：该特性要与v-if v-show v-for（只在插入和删除时触发，使用 vue-animated-list 插件）一起使用

<div v-if="show" transition="my-transition"></div>

组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

使用组件

注册：
使用Vue.extend()创建一个组件构造器：

//定义
var MyComponent = Vue.extend({ 
     template: '<div>A custom component!</div>'
 })

要把这个构造器用作组件，需要用 Vue.component(tag, constructor) 注册 ：

// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({ 
     el: '#example'
 })

最后将：

<div id="example">  
    <my-component></my-component>
</div>
//渲染为
<div id="example">  
    <div>A custom component!</div>
</div>

注意组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。可以用实例选项 replace 决定是否替换。

局部注册：将一个组件只定义在父组件里边

注册语法糖
为了让事件更简单，可以直接传入选项对象而不是构造器给 Vue.component() 和 component 选项。Vue.js 在背后自动调用 Vue.extend()：

// 在一个步骤中扩展与注册
Vue.component('my-component', {  
    template: '<div>A custom component!</div>'
})
// 局部注册也可以这么做
var Parent = Vue.extend({  
    components: {    
        'my-component': {      
            template: '<div>A custom component!</div>'    
        }  
    }
})