Vue 指令

总结下vue的语法，虽然文档都能查到，但偏于教程不易查找。

1.内容绑定 {{}}

双大括号绑定内容，微信小程序也是这样。支持js表达式。
<div>{{message}}</div>

双大括号输出的仅是字符串，可以用v-html将其转化为html代码，类似危险html操作。

2.元素属性绑定 v-bind

v-bind:属性名称。可以缩写成 :属性名称
可以将元素的属性与vue实例的数据进行单向绑定，即：数据变化界面会刷新，但界面上的变化不会更新vue实例中的数据。可以用方括号实现动态绑定。

示例

<input v-bind:value="message"/>
<input :value="message"/>
// 动态绑定
<input v-bind:['value']="message"/>

2.5表单输入双向绑定 v-model

// 这样在input框输入内容时候会一起修改vue实例中的message变量
<input v-model="message" placeholder="edit me">
// 其实上面这个v-model等同于一个v-bind与v-on组合
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
// 自定义组件内部需要有一个名为value的props，并且将其绑定到自己的模板中某个输入框的value属性上。
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})
// 然后就可以使用v-model了
<custom-input  v-model="message" />
// 上面这个基于value属性和input事件的绑定是默认行为，可以通过在组件中加入model属性进行修改
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

2.6 在自定义组件上使用v-model的问题

注意是组件上，不是组件中。类似react自定义组件中，将值通过props传入组件，在组件内部适当时候通过callback的方式通知父组件，然后父组件在setState改变这个值，然后由于setstate会刷新父组件，最后修改过的值又传回给子组件。这个过程在react中比较繁琐。Vue中可以通过v-model简单实现。但是有时候这种子组件可以改变父组件值的行为会产生一些问题，并且隐藏了改变的过程，有些时候希望在chagne的时候顺便做些其他事情，这种自动的方式就不合适了。

3.事件监听 v-on

v-on:事件名称。可以缩写成 @事件名称
将元素的事件与vue实例的方法绑定。同样支持动态。

示例1 原生html元素的事件监听

<div v-on:click="sayHello" />
<div @click="sayHello" />
// 动态
<div v-on:['click']="sayHello" />

示例2vue组件的事件监听
可以通过v-on:event-name 来监听vue组件中的事件，在被监听组件内部通过this.$emit('event-name)发送事件，注意vue中推荐使用kebab-case的形式命名事件，不使用驼峰命名法，因为都会被转为小写。

<my-component v-on:my-event="doSomething"></my-component>
// 内部emit发送事件，可携带参数
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

但是有时候仅仅想监听一下这个组件的click事件，这时候在组件内部通过emit的方式就有点繁琐了，这时候可以使用v-on的 .native修饰符。

<my-component v-on:click.native="onClick"></my-component>

注意这里只是监听了组件内部根元素的事件，也就是说根元素必须有这个事件，如根元素是个div此时监听他的input事件是不行的。

4.条件渲染 v-if 、v-else-if、v-else与v-show

当条件为truthy的时候才渲染一个模块。v-else-if、v-else必须紧根 v-if后面，否则无效。

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

也可以一次性判断多个模块，外面套个template元素，这个template即看不见也不影响布局，微信小程序里面同样的元素叫做black。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show与v-if差不多，区别是v-show不支持template也不支持else啥的，最重要的是v-show和css中visibility属性类似，元素即使不显示的时候也占有空间。

5.循环渲染 v-for

实现类似react中用基于某个数组使用map循环渲染一个列表的功能。

// items是vue实例中的数据源，item是别名，index是索引。和react一样这里最好给个唯一key，便于更新和重用。
<ul id="example-2">
  <li v-for="(item, index) in items"  :key="item.id">
    {{ index }} - {{ item.message }}
  </li>
</ul>

// 也可以使用template
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

在vue组件上使用v-for的时候要把item作为属性绑定到组件的prop，item不会自动传进组件。

// 组件内有item index key三个props
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>