理理Vue細(xì)節(jié)（推薦）

<!-- 屬性name -->
<a :[name]="url"> ... </a>
<!-- 計(jì)算屬性sss和s -->
<img :[sss]="/img/test.png"/> 
<!-- 方法change1和change2 -->
<img :[change1()]="change2()"/>

data: {
  name: 'href',
  sss: 'src'
}

 computed: {
    top() {
      return 'top'
    },
    name: {
      get () {
        return this.name
      },
      set (val) {
        this.name = val
      }
    }
  }

<!-- 屬性名可加引號(hào)也可不加，屬性小駝峰 -->
<div :>樣式3</div>

data: {
 isActive: true,
 activeClass: 'active'
}
<!-- 使用數(shù)組時(shí)變量和字符串需要通過引號(hào)來區(qū)分 -->
<div :class="[isActive ? activeClass : '', 'errorClass']"></div>
<!-- 使用對(duì)象時(shí)類名不加引號(hào)可表示變量也可表示字符串 -->
<div :class="[{ active: isActive }, 'errorClass']"></div>

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

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

<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">
</template>

<ul>
 <template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider"></li>
 </template>
</ul>

// 不要直接Object.assign(this.items, {age: 18}
this.items = Object.assign({}, this.items, {
 age: 18,
 favoriteColor: 'Vue Green'
})

<div :scroll.passive="onScroll">...</div>

<!-- 單選框時(shí)，picked為字符串 "a"，不是布爾值 -->
<input type="radio" value="a" v-model="picked">

<!-- 多選框時(shí)，toggle默認(rèn)值設(shè)為字符串或布爾值時(shí)得到布爾值，設(shè)為數(shù)組時(shí)得到的是value值-->
<input type="checkbox" value="b" v-model="toggle">

<!-- 當(dāng)選中第一個(gè)選項(xiàng)時(shí)，selected為字符串value的值 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

<test v-bind="obj"></test>

<base-layout>
 <template v-slot:header>
  <h2>Here might be a page title</h2>
 </template>
<!-- 默認(rèn)插槽也可不用加上template和v-slot -->
 <template v-slot:default>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
 </template>
 <template v-slot:footer>
  <p>Here's some contact info</p>
 </template>
</base-layout>

<!-- current-user組件 -->
<span>
 <slot :user="user">
  {{ user.lastName }}
 </slot>
</span>

<!-- 父級(jí)組件通過自定義名稱訪問子級(jí)作用域 -->
<current-user>
 <template v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
 </template>
</current-user>

<!-- 支持縮寫和解構(gòu) -->
<current-user>
 <template #default="{ user = { firstName: Gust } }">
  {{ user.firstName }}
 </template>
</current-user>

// 父或祖先級(jí)
provide: function () {
 return {
  getMap: this.getMap
 }
}

// 后代級(jí)
inject: ['getMap']

 // 含通配符的路由都要放在最后，因?yàn)閮?yōu)先級(jí)由定義順序決定
{
 // 會(huì)匹配所有路徑
 path: '*'
}
{
 // 會(huì)匹配以 `/user-` 開頭的任意路徑
 path: '/user-*'
}

// 給出一個(gè)路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 給出一個(gè)路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` })     // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

const router = new VueRouter({
 routes: [
  {
   path: '/',
   components: {
    default: Foo,
    a: Bar,
    b: Baz
   } 
  }
 ]
})

const User = {
 props: ['id'],
 template: '<div>User {{ id }}</div>'
}
// 通過布爾值設(shè)置
const router = new VueRouter({
 routes: [
  { path: '/user/:id', component: User, props: true },

  // 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
  {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
  }
 ]
})

// 通過函數(shù)設(shè)置query 
// URL /search?q=vue 會(huì)將 {name: 'vue'} 作為屬性傳遞給 SearchUser 組件
const router = new VueRouter({
 routes: [
  { path: '/search', component: SearchUser, props: (route) => ({ name: route.query.q }) }
 ]
})

beforeRouteEnter(to, from, next) {
 axios('/text.json').then(res => {
  next(vm => {
   vm.datas = res
  })
 })
}

// <img src="../image.png">將會(huì)被編譯成為：
createElement('img', {
 attrs: {
  src: require('../image.png') // 現(xiàn)在這是一個(gè)模塊的請求了
 }
})