Vue.jscheatsheet

HTML
复制代码
<div id="app">
  <p>I have a {{ product }}</p>
  <p>{{ product + 's' }}</p>
  <p>{{ isWorking ? 'YES' : 'NO' }}</p>
  <p>{{ product.getSalePrice() }}</p>
</div>

HTML
复制代码
<a v-bind:href="url">...</a>

HTML
复制代码
<p v-if="inStock">{{ product }}</p>

HTML
复制代码
<p v-else-if="onSale">...</p>
<p v-else>...</p>

HTML
复制代码
<p v-show="showProductDetails">...</p>

HTML
复制代码
<button v-on:click="addToCart">...</button>

HTML
复制代码
<button @click="addToCart">...</button>

HTML
复制代码
<button @click="addToCart(product)">...</button>

HTML
复制代码
<form @submit.prevent="addProduct">...</form>

HTML
复制代码
<img @mouseover.once="showImage" />...

HTML
复制代码
<input @keyup.enter="submit" />

HTML
复制代码
<input @keyup.ctrl.c="onCopy" />

HTML
复制代码
<li v-for="item in items" :key="item.id">{{ item }}</li>

HTML
复制代码
<li v-for="(item, index) in items">...</li>

HTML
复制代码
<li v-for="(value, key) in object">...</li>

HTML
复制代码
<cart-product
  v-for="item in products"
  :product="item"
  :key="item.id"
></cart-product>

JS
复制代码
Vue.component('my-component', {
  components: {
    // 组件可以用在 Template 中
    ProductComponent,
    ReviewComponent
  },
  props: {
    // 组件可以接受的参数
    message: String,
    product: Object,
    email: {
      type: String,
      required: true,
      default: "none"
      validator: function (value) {}
    }
  },
  data: function() {
    // data 必须是一个函数
    return {
      firstName: 'Vue',
      lastName: 'Mastery'
    }
  },
  computed: {
    // 返回缓存的值, 除非依赖发生变化
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    // 当 firstName 值发生变化时调用
    firstName: function (value, oldValue) { ... }
  },
  methods: { ... },
  template: '<span>{{ message }}</span>',
})

HTML
复制代码
<button-counter v-on:incrementBy="incWithVal"></button-counter>

JS
复制代码
methods: {
  incWithVal: function (toAdd) { ... }
}

JS
复制代码
this.$emit(
  "incrementBy", // 自定义事件名称
  5
);

HTML
复制代码
<template>
  <p>{{ greeting }} World!</p>
</template>
<script>
  module.exports = {
    data: function () {
      return {
        greeting: "Hello",
      };
    },
  };
</script>
<style scoped>
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

HTML
复制代码
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

HTML
复制代码
<div>
  <h2>I'm a title</h2>
  <slot> Only displayed if no slot content </slot>
</div>

HTML
复制代码
<my-component>
  <p>This will go in the slot</p>
</my-component>

CONTAINER
复制代码
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot>Default content</slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

HTML
复制代码
<app-layout>
  <h1 slot="header">Page title</h1>
  <p>the main content.</p>
  <p slot="footer">Contact info</p>
</app-layout>