Vue 2 知识点速查

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date()
        .toLocaleString()
  }
})

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

控制切换一个元素是否显示

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">
    反转消息
  </button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('')
            .reverse().join('')
    }
  }
})

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

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

使用 v-once 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新

<p>解释为普通文本: {{ rawHtml }}</p>
<p>
  使用 v-html 指令: 
  <span v-html="rawHtml"></span>
</p>

使用 v-html 指令，输出真正的 HTML

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isDisabled">
  Button
</button>

如果 isDisabled 的值是 null/undefined/false 则 disabled 不会被渲染出来

<div id="app">
  <span>消息: {{ msg }}</span>
  <span>{{ msg + '这是字符串' }}</span>
  <span>{{ isWorking ? '是':'否' }}</span>
  <span>{{ msg.getDetials() }}</span>
  <div v-bind:id="'list-' + id"></div>
<div>

<p v-if="seen">
  现在你看到我了
</p>

v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素

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

v-bind 指令将该元素 href 属性与表达式 url 的值绑定

<a v-on:click="doSomething">...</a>

v-on 指令，用于监听 DOM 事件，oSomething 是事件名

<a v-on:[eventName]="doSomething">...</a>

当 eventName 的值为 focus 时，v-on:[eventName] 将等价于 v-on:focus

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

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

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

</div>

传给 v-bind:class 一个对象，以动态地切换 class

<div v-bind:class="[
  isActive ? activeClass : ''
]">
</div>

<div v-bind:class="[
  { active: isActive }, errorClass
]"></div>

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

如下 data

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

结果渲染为

<div class="active text-danger"></div>

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

如下 data

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

结果渲染为

<div style="color: red; font-size: 30px;"></div>

<div v-bind:style="styleObject"></div>

如下 data

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

同样的，对象语法常常结合返回对象的计算属性使用

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

<div :style="{
  display: ['-webkit-box', 'flex']
}"></div>

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

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

<h1 v-show="ok">
  Hello!
</h1>

带有 v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 CSS 属性 display

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

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

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

如下 data

data: {
  items: [
    { message: 'Foo' },
    { message: 'Bar' }
  ]
}

也可以用 of 替代 in 作为分隔符

<div v-for="item of items"></div>

<li
  v-for="todo in todos"
  v-if="!todo.isComplete"
>
  {{ todo }}
</li>

只渲染未完成的 todo，下面加上 v-else 示例

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

注意: v-for 和 v-if 不推荐一起使用参考官方文档

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的

<div id="example-1">
  <button v-on:click="counter += 1">
    +1
  </button>
  <p>按钮已被点击 {{ counter }} 次。</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="submit"></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>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

这个 .passive 修饰符尤其能够提升移动端的性能。

<!-- 在 key 是 Enter 时调用 vm.submit() -->
<input v-on:keyup.enter="submit">
<!-- 在 key 是 PageDown 时被调用 -->
<input v-on:keyup.page-down="onPageDown">
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="ctrlClick">
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>
    计算的反向消息： "{{ reversedMessage }}"
  </p>
</div>

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

<p>
  计算的反向消息："{{ reversedMessage() }}"
</p>

在组件中，我们可以将同一函数定义为一个方法而不是一个计算属性

methods: {
  reversedMessage: function () {
    return this.message.split('')
                .reverse().join('')
  }
}

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。

<input v-model="msg" placeholder="编辑我">
<p>msg is: {{ msg }}</p>

<span>Multiline message is:</span>
<textarea
  v-model="message"
  placeholder="添加多行"></textarea>
<p>{{ message }}</p>

<input
  type="checkbox"
  id="checkbox"
  v-model="checked"
>
<label for="checkbox">{{ checked}}</label>

<div id="example-4">
  <input type="radio" id="one" value="One"
    v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two"
    v-model="picked">
  <label for="two">Two</label>
  <div>Picked: {{ picked }}</div>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<div>Selected: {{ selected }}</div>

new Vue({
  el: '...',
  data: {
    selected: []
  }
})

<!-- 当选中时，pc 为字符串 "a" -->
<input type="radio" v-model="pc" value="a">

<!-- toggle 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 选中第一个选项时selected为字符串 abc -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<input
  type="radio"
  v-model="pick"
  v-bind:value="a">

当选中时

vm.pick === vm.a

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">
    123
  </option>
</select>

当选中时

typeof vm.selected // => 'object'
vm.selected.number // => 123

<!-- lazy:在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

<!-- number:自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!-- trim:自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
>
</blog-post>

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

当值传递给一个 prop attribute 的时候，变成了组件实例的一个 property

<blog-post title="写博客"></blog-post>
<blog-post title="如此有趣"></blog-post>

data: function () {
  return {
    count: 0
  }
}

组件的 data 选项必须是一个函数

<alert-box>
  发生了不好的事情。
</alert-box>

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部

<table>
  <blog-post-row></blog-post-row>
</table>

<blog-post-row> 会被作为无效的内容提升到外部

如果我们从以下来源使用模板的话，这条限制是不存在的

• 字符串 (例如：template: '...')
• 单文件组件 (.vue)
• <script type="text/x-template">

<transition> 组件上的 duration prop 定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">
  ...
</transition>

你也可以定制进入和移出的持续时间：

<transition :duration="{
  enter: 500,
  leave: 800
}">
  ...
</transition>

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用

在 (2.2.0) 中新增