[Vue] vue2.0

vue实例

• 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象

• 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值

• Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。 api

var app01 = new Vue({
  el: "#app",     //里面是选择器可以是id,class,body...
  data: {
    msg: 'welcome vue'
  },
  methods: {
  }
});

vue实例的简单方法

• vm.$el ->就是元素
• vm.$data ->就是data
• vm.$mount ->手动挂载vue程序
• vm.$options ->获取自定义属性
• vm.$log() ->查看现在数据的状态
• vm.$destroy ->销毁对象

生命周期

template模板

render-function

实例属性

文本插值

<span>Message: {{ msg }}</span>

v-once 指令，执行一次，数据改变时内容并不更新

<span v-once>这个将不会改变: {{ msg }}</span>

旧版 ：{{ *msg }}数据只绑定一次

原始 HTML

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

旧版 ： ：{{{ msg }}}html转义输出

使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

每个绑定都只能包含单个表达式

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

常见指令

• v-model="" 一般用于表单，双向数据绑定
• v-for = "item in arr" 数组
• v-on:click="函数"
• v-bind:参数="值"
• v-show='true/false' //true/false可以是一段语句

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

动态参数(new)

<a v-bind:[attributeName]="url"> ... </a>

{
  data:{
    return {
      attributeName:'href',
      url:'www.baidu.com',
    }
  }
}

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。总之就是之前能够动态改变绑定的参数的值，现在绑定的参数也可以动态改变。

用于动态切换绑定的事件比较好用，mouseenter,mouseleave

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性

任何复杂逻辑，你都应当使用计算属性

计算属性的使用

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

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

计算属性缓存 vs 方法

在表达式中调用方法来达到同样的效果

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性 vs 侦听属性

通常更好的做法是使用计算属性而不是命令式的 watch 回调

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

//计算属性
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
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]
    }
  }
}
// ...

侦听器

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

vm.$watch API

Class 与 Style 绑定

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强,表达式结果的类型除了字符串之外，还可以是对象或数组

绑定 HTML Class

//对象语法
<div v-bind:class="{ active: isActive }"></div>

//v-bind:class 指令也可以与普通的 class 属性共存
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

//返回对象的计算属性
<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

//数组语法
<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

//用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

//数组语法中也可以使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

//对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

//样式对象
<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

//数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

//多重值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

术语表 Truthy

条件渲染

v-if 、 v-else

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no