vue2 — 组件

• 关于根组件

import Vue from 'vue'
// 引入根组件App.vue
import App from './app'
const app = new Vue({
    App
})
// 挂载到#app节点
app.$mount('#app')

• 关于组件

// 父组件中使用
<subview></subview>(1)
<x></x>(2)
// 父组件
import subView from './subView';
export default {
    components: {
        subView  (1) 需要标签与组件名相同，大小写不敏感
        // x: subView  (2) 具名组件，支持alias
    }
}
// 子组件
export default {
}

• 关于click

// 状态控制可以直接使用
@click="isState = !isState"
// 普通click
@click="func"
@click="func()"
@click="func(var1, var2)"

• 关于img

// 使用require()引入图片路径
< img :src="require('_A/images/uzean.png')" >

• 关于过渡动画

// template
<transition name="bounce">
    <p v-if="show">Look at me!</p>
</transition>
.bounce-enter-active {
  animation: bounce-in .5s;
}
// style
.bounce-leave-active {
    animation: bounce-out .5s;
}
@keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
}
@keyframes bounce-out {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(0);
    }
}

• 关于v-for

<li v-for="item in list" :key="item.index"></li>

• 关于class

// 普通绑定
<div class="demo"></div>
// 动态绑定
<div :class="{'demo': isTrue}"></div>
// 多个绑定
<div :class="['demo', {'demo1': isTrue}]"></div>

上一篇： vue2 — 根据需要做点改动