Vue学习笔记(20)-Vue中的动画与过渡
Vue中的动画与过渡
作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
图示：
写法：
准备好样式：
元素进入的样式：
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式：
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
使用<transition>包裹要过度的元素，并配置name属性：
<transition name="go"> <h1 v-show="isShow">Hello！ Vue！！</h1> </transition>
备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。
1.动画写法（相较于过渡更为简单）
组件当中的代码<template> <div> <butto ...
Vue学习笔记(19)-Vue中的消息订阅与发布
Vue中的消息的订阅与发布(pubsub)
与事件总线相似，消息的订阅与发布同样是一种组件间的通信方式，适用于任意组件间通信。
但与之不同的是，消息的订阅与发布是一种编程思想，一种编程理念，使用原生的js很难去实现，所以我们要借助一些第三方库，这里推荐的是 pubsub-js。
使用流程:
1.在终端安装第三方库[pubsub]
npm i pubsub-js
2.在要使用的组件当中引入pubsub
import pubsub from 'pubsub-js'
3.接收数据
例如:组件A想要接收组件B的数据,则需要在组件A当中设置相对应的api来订阅消息[subscribe]
//方法一:在methods中设置回调methods(){ demo(MsgName , data){......}}......mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息}//方法二:直接使用箭头函数回调接收数据mou ...
Vue学习笔记(18)-Vue中的事件总线
Vue中的事件总线(EventBus)：实现任意组件间的通信的一种工具
所谓事件总线,说白了就是一个中间人,相当于旧式的电话接线员,它可以帮助我们进行组任意组件间的通信(我们之前学过父给子传:props , 子给父传:$emit),在Vue当中,事件总线是一个所有组件都能看见的一个 ”人”(Vue.protype) ,并且它的身上存在 $on , $off , $emit等属性(Vue.protype).原理如下:
$bus事件总线设置位置的原理:
要想实现任意组件间的通信
所有的vc（组件的实例对象都能看得见）
(1)可以写在 Vue.protype 身上,[main.js] (推荐)
(2)也可以写在 window身上 (一般不推荐)
2.要有 $on , $off , $emit 等……
原理的实现流程:(实现组件A给组件B传数据)
我们首先在 main.js 中为Vue的实例对象vm的原型(protype)身上建立一个中间人(事件总线$bus),其次在组件A的身上,利用$emit(‘自定义事件’ , 数据)创建一个自定义事件并且绑定在事件总线($bus)身上 ...
Vue学习笔记(17)-Vue中的自定义事件
Vue组件中的自定义事件
Vue组件当中的自定义事件的一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
实现子组件给父组件传递数据有两种方法
1.使用props，但是前提是实现父组件要先传给子组件一个函数用于接收数据
2.使用自定义组件
方法一：使用props
实现步骤：
1.使用props先接受父组件传过来的函数,
2.再自己定义一个发送函数将自己的数据通过该发送函数传给从父组件中接收过来的接收函数实现数据传递
1.App组件代码展示:<template> <div class="app"> <h1>{{msg}}，学生姓名是:{{studentName}}</h1> <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 --> <Scho ...
Vue学习笔记(16)-Vue脚手架(3)-插件以及scoped样式配置
1.Vue脚手架中的插件
插件通常用来为 Vue 添加全局功能，插件的功能范围没有严格的限制。
功能：用于增强Vue(相当于给Vue开外挂)
本质：包含install()方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件
新建一个文件,命名自定义(推荐使用:plugin.js),随后在这个js文件中填写代码:
// 默认暴露在引用的时候只需要使用 文件名就行,不需要后缀名(如:plugin,不用.js了)export default { // 可以在插件里面填入过滤器,混入,自定义指令,原型方法等......(相当于给Vue开挂,用于增强Vue) install(Vue,x,y,z){ // xyz为使用者自己定义的参数 console.log(x,y,z) //全局过滤器(只要前面4个字符) Vue.filter('mySlice',function(value){ return value. ...
Vue学习笔记(15)-Vue脚手架(2)-ref属性,props配置以及混合(mixin)
1.Vue脚手架中的ref属性作用:
被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx
代码展示:<template> <div> <!-- 在Vue脚手架的环境下可以使用标签的简写 --> <h2 v-text="msg" ref="msg" id="msg"></h2> <button @click="btn" ref="btn">点我输出上方的DOM元素</button> ...
Vue学习笔记(14)-Vue脚手架(1)-render函数
Vue脚手架中的render函数render函数是什么?
顾名思义render有渲染的意思,所以render函数的用法就是用来渲染html文件,准确的来说是用于渲染vm(Vue实例化对象)当中的html片段(其他的组件[App,其他子组件等..]不需要render来渲染,因为,在项目的根目录下的 package.json 中存在 “vue-template-compiler” 这就是用于解析.vue后缀组件的模板编译器,但是要知道 vm 是在 main.js 里面编写的, “vue-template-compiler” 不解析后缀为.js的文件,所以要想解析 main.js 里面的模板(template)要么需要引入完整的Vue(一般在项目开发中是引用残缺版的Vue,里面一般是没有模板编译器的),要么就调用render函数去解析模板,推荐使用后者,因为模板编译器只在项目初期的时候调用,在用webpack把项目打包好后就不需要使用了)
完整语法如下:
Rander函数里面传递参数:createElement 而且这个参数也是一个函数,比如:喔我这里渲染一个h1标签render: fu ...
Vue学习笔记(13)-Vue脚手架(Vue-cli)
Vue-cli（脚手架）1.什么是Vue-cli（脚手架）？
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue-cli官方文档
命令行操作步骤：(在cmd或者VScode集成终端中打开)$npm install -g @vue/cli 安装vue脚手架$vue -V 测试是否安装成功$vue create 项目名 （注意不要用中文和特殊字符） 创建Vue项目$cd 项目名 进入创建好的项目文件夹$npm run serve 运行项目
备注:如果出现下载缓慢请配置 请使用国内的npm 淘宝镜像：$npm config set registry https://registry.npm.taobao.org
结合上一篇博客的单文件组件运行后结果展示:
注意:Vue-cli 5.x版本会出现语法错 ...
Vue学习笔记(12)-Vue中的组件(3):单文件组件
Vue单文件组件1.什么是单文件组件？
单文件组件就是一个文件扩展名为 .vue 的 single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
2.单文件组件的好处：
在 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: ‘#root’}) 在每个页面内指定一个容器元素。相较于非单文件组件，单文件组件可以写入css样式，在添加拓展后可以有语法高亮以及语法提示等，在脚手架（Vue-cli）的环境下能够快速的搭建项目。
3.创建单文件组件：语法形式：<template><!-- 这里写单文件组件的结构 --></template><script>// 这里写单文件组件的交互</script><style>/* 这里写单文件组件的样式 */</style>
2.在vue脚手架中编写项目的流程：
1.main.js( ...
Es6中的暴露和引入
Es6中的模块化：暴露（export）和引入（import）
三种暴露方式：1.分别暴露 2.统一暴露 3. 默认暴露
代码如下:// 暴露数据的三种方法// 1.分别暴露// export let school = '五邑大学';// export function say(){// console.log('欢迎来到邑大!');// }// export function jod() {// console.log('这里可以帮你找到心仪的工作!');// }// 2.统一暴露// export {school , say , jod};// 3.默认暴露export default{ school : '五邑大学', say : function(){ console.log('欢迎来到邑大!'); }, jod : function() ...
