目录
㋀㏭
2.引入jquery第三方库（重点引入第三方依赖）
☪ App.vue中如何进行组件A和组件B的切换
练习题
问题：如果有组件A和组件B，同时引入Vue.app里面，在Vue.app中如何利用transition实现动态组件？
答：一看到动态组件就应该想到:is和data中的定义，参考文章。和这个demo类似不过多了一个transition切换效果！
◆ transition
❶ a.vue
<!-- a.vue -->
<template>
<div>
这是ComA
</div>
</template>
<script>
</script>
<style>
</style>
❷ b.vue
<!-- b.vue -->
<template>
<div>
这是ComB
</div>
</template>
<script>
</script>
<style>
</style>
❸ App.vue
<!-- App.vue -->
<template>
<div>
<button @click="toggleCom">toggleCom</button>
<div :is="currentView">
<p is="com-a"></p>
<p is="com-b"></p>
</div>
</div>
</template>
<script>
import comA from './components/a'
import comB from './components/b'
export default {
data(){
return {
show:true,
currentView:'com-a'
}
},components: {
comA,comB
},methods:{
toggleCom(){
if(this.currentView==='com-a'){
this.currentView = 'com-b'
}else{
this.currentView = 'com-a'
}
console.log('toggleCom');
}
}
}
</script>
<style>
</style>㊫ 跟我写代码
➫ 总结
<div class="ab">
<div :is="currentView">
<!-- <div is="com-a"></div> -->
<!-- <com-a></com-a> 上面与下面效果等同，但是使用is好处是实现动态组件
1.:is --* 跟着的是变量，需要在data中声明
2.is --* 跟着的是组件中划线名称
-->
</div>
</div>
☪ CSS过渡
☪ JS过渡
前言：js比css控制的东西稍微多一些，而且可以使用第三方的库比如说jquery，官方vue.js文档都是event对应的就是v-on指令
◆ 内容
Ⅰ 内容截图
Ⅱ 方法
Ⅲ 例子
◆ 实战
1.实现上面同样的效果只有监听三个阶段
......
methods: {
beforeEnter: function(el) {
$(el).css({})
},
enter: function(el, done) {
$(el).animate({})
},
leave: function(el, done) {
$(el).animate({})
}
}2.引入jquery第三方库
jquery要放在index.html里面，它不会打包处理，只会最为入口页面往里添加东西~
3.写具体demo
<!-- App.vue -->
<template>
<div>
<button @click="show=!show">Toggle</button>
<br>
<div>
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"><!-- v-on:leave="leave"-@leave.. / v-bind:css="false" 简写 :css="false"-->
<p v-show='show'>i am a show</p>
</transition>
</div>
</div>
</template>
<script>
import comA from './components/a'
import comB from './components/b'
export default {
data() {
return {
show: false,
currentView: 'com-b'
}
},
components: {
comA,
comB
},
methods: {
beforeEnter: function(el) {
console.log('beforeEnter')
$(el).css({
left: '-500px',
opacity: 0
})
},
enter: function(el, done) {
console.log('enter')
$(el).animate({
left: 0,
opacity: 1
}, {
duration: 1500,
complete: done
})
},
leave: function(el, done) {
console.log('leave')
$(el).animate({
left: '500px',
opacity: 0
}, {
duration: 1500,
complete: done
})
}
}
}
</script>
<style>
</style>
4.jquery引入动画效果
☪ Vue 插件
◆ 下载和使用
npm install vue-router --save // 安装保存到package.json
❶ demo
// 使用插件 1.import(import VueRouter from 'vue-router') 2.Vue的全局方法Vue.use(VueRouter)
// 问:这样的一些插件,通常都有哪些方式会被我们在项目中使用呢?
// 答:
// way1.首先要实例化,然后通过参数的形式放到根组件里面,这样才算vr正式被引用到我们项目里面
/* main.js */
import Vue from 'vue'
import App from './App'
import router from './router'
import VueRouter from 'vue-router'
// 等同于 var VueRouter = require('vue-router')
Vue.use(VueRouter)
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.directive('color', {
bind: function(el, binding) {
el.style.color = binding.value;
},
})
let vr = new VueRouter();
new Vue({
vr,
el: '#app',
/* es6语法 */
/* render:function(h){
return h(App)
} */
render: (h) => h(App),
})
