- 关于根组件
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 — 根据需要做点改动
