组件的应用
首先我们要先安装vue
vue init webpack vuetest
bpm run dev
上面两句命令语句安装在你要使用的文件夹内
这样我们就创建了一个vue环境的服务器
99DF33BB-C1DB-4502-B145-FC886B0FBF59.png
这样说明我们已经成功了
这时我们在文件夹中就会找到vuetest文件夹，我们可以再vuetest文件夹下的src文件夹下的compoents文件夹里创建组件了
下面我来介绍几种简单的事件组件
-
传递事件
先新建一个Emit.vue文件，这时就会生成下面的代码<template> </template> <script> export default { name: "emit", } </script> <style scoped> </style>
现在我们在template标签内输入
<h1>我是emit组件</h1>
<button @click="passDad">点击我的时候向父级发射</button>
在name:"emit",下面输入
methods:{
passDad(){
//传递事件
//第一个参数是发射的事件名称，后面是要传递的数据
this.$emit("myfn",this.message)
}
}
这时被没有结束，我们要到App.vue文件中
在script文件夹中输入
import emit from '@/components/emit'
在components:{}输入emit,
同时要再methods下面输入
fn:function(mydata){
console.log(mydata)
最后在id=app的标签下输入<emit @myfn="fn"></emit>
这样一个组件就完成了
},
下面介绍prop组件
prop组件，Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会
在App.vue id为app的标签下输入
<person
username="张三"
:height="178"
color="white"
></person>
<person
username="李四"
:height="178"
color="black"
></person>
在新建的person.vue文件内输入
<template>
<div>
<p>姓名:{{username}}</p>
<p>肤色:{{color}}</p>
<p> 身高:{{height}}</p>
<button @click="showprops">点击我查看props</button>
</div>
</template>
<script>
export default {
name: "person",
// props:['username','height','color'],
props:{
username:{type:String},
height:{type:Number},
color:{type:String}
},
methods:{
showprops:function(){
console.log(this.userna me,this.height,this.color )
}
}
}
</script>
<style scoped>
</style>
其他设置与上面emit设置差不多
6A29AFCD-769F-4DFA-952E-27E44064D993.png
下面讲一下动画设置
App.vue设置与上面的都差不多就不一一说了
<template>
<div>
<transition name="fade">
<div v-show="judge">我是要过渡的div</div>
</transition>
<button @click="judge=!judge">点击我切换div显示隐藏</button>
<hr>
<!--组件的动态切换-->
<!--组件的动态切换 模式切换-->
<transition name="fade" mode="out-in">
<div :is="switchs?'commont1':'commont2'"></div>
</transition>
<button @click="switchs=!switchs">点击我切换组件</button>
<hr>
<!--if else控制切换 读缓存了，使用key 可以进行修改-->
<transition name="mymove" mode="out-in">
<div v-if="switchs" key="1">我是div1</div>
<div v-else key="2">我是div2</div>
</transition>
<hr>
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"
>
<div class="mydiv" v-show="myjudge">我是div的内容</div>
</transition>
<button class="btn" @click="myjudge=!myjudge">点击我切换</button>
</div>
</template>
<script>
import commont1 from './commont1'
import commont2 from './commont2'
export default {
name: "",
data:function(){
return{
judge:true,
switchs:true,
myjudge:true
}
},
methods:{
beforeEnter:function(el){
$(el).css({left:"0px",opacity:0});
},
enter:function(el,done){
$(el).animate({
left:"380px",opacity:1
},done)
},
leave:function(el,done){
$(el).animate({
left:"800px",opacity:0
},done)
}
},
components:{
commont1,
commont2
}
}
</script>
<style scoped>
.fade-enter-active,.fade-leave-active{
transition:all 1s;
}
.fade-enter,.fade-leave-to{
opacity:0;
}
.mymove-enter-active,.mymove-leave-active{
transition:all 1s;
}
.mymove-enter{
transform:translate(-500px);
}
.mymove-leave-to{
transform:translate(500px);
}
.mydiv{
position:absolute;
left:500px;
}
.btn{
margin-top:30px;
}
</style>
上面有通过JS设置动画还有CSS设置的动画
介绍上面使用到的知识点
- transition 会有mode模式默认的是in-out ：先进入 在出去
- if else控制切换 读缓存了，使用key 可以进行修改
- 会有 4 个(CSS)类名在 enter/leave 的过渡中切换
- v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
- v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
- v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
- s过度动画 不需要给transition加上name属性
过滤器
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数
Slot 插槽功能
单个插槽
直接通过slot来获取具名插槽
子组件里设置name值
<slot name=“header”></slot>
父组件设置slot属性
<div slot=“header”>我是头部内容</div>
自定义指令
全局注册自定义指令：
Vue.directive("backgroundDirective",{
inserted: function (el) {
// console.log(el);
el.style.background = "red";
}
})
局部注册自定义指令：
var vm = new Vue({
el:"#myapp",
data:{
message:"我是测试数据"
},
directives:{
backgroundDirective:{
inserted:function (el,binding) {
el.style.background = "red";
}
}
}
})