Vue简单归纳

文本

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

原始HTML or 富文本

<span v-html="rawHtml"></span>

v-bind指令，给标签属性添加动态的值

<div v-bind:id="dynamicId"></div>　　缩写：<div :id="dynamicId"></div>

<button v-bind:disabled="isButtonDisabled">Button</button>　　缩写：<button :disabled="isButtonDisabled">Button</button>

class三元运算展示不同样式

:class="[item.state?'select':'']"

绑定点击事件

<a v-on:click="doSomething">...</a>　　缩写：<a @click="doSomething">...</a>

计算属性

将data中的message翻转

<div id="example">

　　<p>Original message: "{{ message }}"</p>

　　<p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

侦听属性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
    }
  }
})

侦听的data发生变化时，会执行watch中相应的函数

Class 与 Style 绑定

对象语法切换class

<div v-bind:class="{ active: isActive }"></div>

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>


//data如下
data: { 
　　isActive: true, 
　　hasError: false 
　}

数组语法

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
//data如下
data: { 
　　activeClass: 'active', 
　　errorClass: 'text-danger' 
}

对象语法和数组语法混合使用

<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>

//将多个样式对象放到同一个元素上

 条件渲染

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



<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>


//通过key值的不同表明两个元素独立，input不复用
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
  <h1 v-show="ok">Hello!</h1>
//v-show不同于v-if,v-show 只是简单地切换元素的 CSS property display
</template>

 列表渲染

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>


<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

v-for遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>


new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

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

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

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

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> 
<!-- 而不会等待 `onScroll` 完成 --> 
<!-- 这其中包含 `event.preventDefault()` 的情况 --> 
<div v-on:scroll.passive="onScroll">...</div>

 按键码

<input v-on:keyup.13="submit">

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

 组件注册

//全局注册
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

//局部注册
mport ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}