Vue-day05
提问:
1.组件的基础语法？
答： 全局定义组件语法 ： Vue.component(组件名称，{模板对象})
局部组件语法 ： components:{组件名称:{模板对象}}
2.组件中的data为什么定义为函数？
答： 实现数据共享而数据互相不影响。
3.子组件的属性如何使用？
答：在子组件中定义一个data函数，在函数中定义一个变量，使用的时候要在自己的页面(子组件)
模板template里面调用定义的属性，父组件无法应用这个属性。
4.watch与computed的区别？
答： watch ：函数不需要调用 处理场景：一个数据影响多个数据 属于监听，监听数据的改变
computed ：调用的时候不需要添加() 处理场景：一个数据受多个数据影响 通过计算得到的属性
5.watch与methods的区别？
答： watch ：是观察动作，自定执行
methods：是方法，需要调用
6.生命周期中在哪个钩子函数中可以拿到所有的数据？
答: mounted 挂载完成 可以拿到所有的数据
7.说出4个常用的vue指令？
答： v-if , v-show , v-model , v-bind , v-on , v-for
8.过滤器的基本语法？
答： 全局过滤器 ：vue实例的外部定义 Vue.filter(过滤器名称,回调函数)
局部过滤器 ： vue实例中增加配置项filters 过滤器名称:function(){过滤操作}
9.动画的使用方法？
答： 用transition组件标签包围
在进入/离开的过渡中，Vue内置了6个类名：
v-enter 定义过渡的开始状态
v-enter-active 定义进入过渡生效时的状态
v-enter-to 2.1.8 版及以上 定义进入过渡的结束状态
v-leave 定义离开过渡的开始状态
v-leave-active 定义离开过渡生效时的状态
v-leave-to 2.1.8 版及以上 定义离开过渡的结束状态
动画库实现过渡动画 下载 animate.css ，并在页面中引入即可使用
10.修饰符有哪些？
答：事件修饰符、键盘修饰符、鼠标修饰符、表单修饰符
1.组件通信
流程:
1.创建项目 vue init webpack mydemo
2.清空工作
3.创建parent文件夹-》parent.vue/child.vue
4.把child.vue引入到parent.vue中
5.把parent文件夹中的parent.vue引入到App.vue中
a.父传子
1.父传子:传递基本数据类型，通过绑定自定义属性，子组件通过props接收
a.父变子变 直接传递基本数据类型
b.子变父变 直接报错 解决方法：直接把父组件传递过来的值存储为自己的变量值
c.父变子变，子变父变 传递一个对象 由于传递的是对象，而对象传递的是地址，所以父子同时操作的是同一个地址
b.子传父
1.子传父 绑定方法$emit(方法名，参数)
总结:
1.父传子: 给父组件中的子组件绑定属性，子组件通过props接收
2.子传父:给子组件绑定方法，通过$emit绑定方法名。在父组件中绑定约定的方法名即可.
c.非父子
1.首先在vue原型上定义一个属性，用来关联所有的vue的组件
Vue.prototype.Event = new Vue()
2.one->two 传值
在one组件中绑定事件
<button @click="sendTwo">发送给two的数据</button>
methods:{
sendTwo(){
// 发送数据$emit
this.Event.$emit('sendTwo',this.msg)
}
}
在two组件中无条件接受 （mounted）
mounted(){
// 接收数据$on
this.Event.$on('sendTwo',(e)=>{
console.log(e)
})
}
2.is
1.解决标签的固定搭配
2.动态组件
1. ul>li 此时给li绑定 is属性 (<li is='vOne'></li>) 那么此时就是把li替换为组件vOne的内容
2.动态组件 首先在data中定义一个变量(name) 给name：'vOne'
<!-- 用来展示组件内容 -->
<div :is='name'></div>
效果是点击one展示one的内容，点击two展示two内容 所以此时需要两个按钮
<!-- 动态组件 -->
<button @click="name='vOne'">one</button>
<button @click="name='vTwo'">two</button>
练习:完成tab切换(至少3组)
3.slot (插槽)
1.无名插槽
<v-one>组件内容</v-one>
在子组件v-one组件中写<slot></slot> 在组件内容的前后都可以
2.具名插槽
<v-two>
<div slot='aa'>aa</div>
<div slot='bb'>bb</div>
</v-two>
在子组件中v-two中
<slot name='aa'></slot>
4.ref
1.主要是用来获取DOM元素
给元素绑定ref属性(ref='box') 通过this.$refs.box 来获取当前元素
2.获取组件
给元素绑定ref属性(ref='one') 通过this.$refs.box 来获取当前组件，那么此时可以使用组件中的属性和方法
5.jquery
1.安装 npm i jquery --save
2.在需要的页面导入jquery
import $ from 'jquery'
mounted(){
获取元素进行操作
$('button').click(()=>{
$('.box').fadeOut(3000)
})
}
在<template>
<div>
<div class="box"></div>
<button>点击淡出</button>
</div>
</template>