vue——动画，组件的定义

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_44879525/article/details/96692156

文章目录

• axios发送请求
• vue过渡动画
• 使用css类实现动画
• 使用animate.css实现动画
• 使用动画的钩子函数实现

组件

• 组件的三种定义方式
• is属性和component实现组件切换
• 父子组件传值
• 父向子传值
• 子向父传值
• 非父子组件传值

生命周期钩子函数

vue-cli脚手架的使用

VSCode用户代码片段

将项目提交到码云

设置npm镜像源为淘宝镜像

axios发送请求

axios是一个基于promise的请求库,可以在node环境和浏览器环境中使用。

1. 引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1. get请求

axios.get('url').then(function(res){
// res.data即后台返回的数据
console.log(res.data)
})

1. post请求

axios.post('url',{
username:'zxx',
password:'123456'
}).then(function(res){
// res.data即后台返回的数据
console.log(res.data)
})

vue过渡动画

vue中的过渡动画只能作用于使用

v-if

、

v-show

控制的元素已经动态组件中

使用css类实现动画

1.使用

transition

标签将需要实现动画的元素包裹起来

<button @click = 'isshow = !isshow'></button>
<transition>
<div v-if = 'isshow'>御剑乘风来</div>
</transition>

1. 使用css类控制动画效果

/* 进入动画就是一个元素从隐藏到显示这个过程需要执行的动画 */

/* 离开动画是一个元素从显示到隐藏这个过程需要执行的动画 */
/* 元素执行进入动画之前的状态 */
.fade-enter {
transform: translateX(100px)
}
/* 元素执行进入动画的过程中持续添加到元素的状态 */
/* 在这个类中通常都是书写元素需要执行的动画效果 */
.fade-enter-active {
transition: all 0.2s ease
}
/* 元素执行进入动画结束状态 */
/* 在这个类中通常是用来设置元素执行动画完毕之后的样式 */
.fade-enter-to {
transform: translateX(0)
}
/* 元素执行离开动画之前需要设定的样式 */
.fade-leave {
transform: translateX(0)
}
/* 元素执行离开动画的过程中持续添加到元素身上 */
.fade-leave-active {
transition: all 0.5s ease
}
/* 元素中心离开动画过程中持续添加到元素身上 */
.fade-leave-to {
transform: translateX(100px)
}

使用animate.css实现动画

1.使用

transition

标签将需要实现动画的元素包裹起来

<button @click = 'isshow = !isshow'></button>
<transition>
<div v-if = 'isshow'>御剑乘风来</div>
</transition>

1. 使用animate.css提供的类名设置动画

<transition
enter-active-class = 'animate fadeIn'
leave-active-class = 'animate fadeOut'
>
<div v-if = 'isshow'>御剑乘风来</div>
</transition>

使用动画的钩子函数实现

// 1. 将需要实现动画的元素使用transition标签包裹起来
<transition>
<div>我是需要过渡动画的元素</div>
</transition>

// 2. 在transition上注册实现动画的钩子函数,入场动画三个,出场动画三个
<transition
@before-enter = 'beforeEnter'
@enter = 'enter'
@after-enter = 'afterEnter'
@before-leave = 'beforeLeave'
@leave = 'leave'
@after-leave = 'afterLeave'
>
<div>我是需要过渡动画的元素</div>
</transition>

// 3. 在vue实例的methods中定义钩子函数
new Vue({
el:'#app',
data:{},
methods:{
// 入场动画初始状态设置
beforeEnter(){
// 一般使用JS设置执行动画元素的初始位置和其他样式属性
},
// 入场动画持续过程
enter(el,done){
// 1. 固定写法 迫使浏览器重绘 刷新动画
el.offsetWidth
// 2. 一般设置执行动画元素最终的位置和其他样式属性

// 3. 固定写法 调用afterEnter函数
done()
},
// 入场动画结束状态
afterEnter(){
// 设置动画元素回到初始状态
},
// 出场动画初始状态
beforeLeave(){

},
// 出场动画持续状态
leave(){

},
// 出场动画结束状态
afterLeave(){

}
}
})

组件

组件就是对视图的封装,方便重复使用

模块是对功能逻辑的封装

注意:

1. 定义组件时如果使用的是驼峰命名,那么使用组件时需要将驼峰的大写字母转成小写,并且用-连接两个单词

Vue.component('myCom',{
template:'<div>我是一个驼峰命名的组件</div>'
})
// 使用
<my-com></my-com>

1. 组件的

   template

   属性中的模版内部如果有多个元素,必须被包含在唯一的一个根元素中

<template>
<div>
<p>我是p元素</p>
<span>我是span元素</span>
</div>
</template>

1. 子组件使用

   components

   属性进行定义,定义好的子组件只能在父组件的模板中使用

<template id='father'>
<div>
<son></son>
</div>
</template>
// 父组件
Vue.component('father',{
template:'#father',
components:{
// 子组件
son:{
template:'<div>我是son组件</div>'
}
}
})

组件的三种定义方式

• vue.extend()

  定义

// 1. 使用vue.extend()定义组件模板
var dv = Vue.extend({
template:'<div>我是一个组件</div>'
})

// 2. 使用Vue.component()注册组件
Vue.component('com',dv)

// 3. 在Vue托管区域像使用普通HTML标签一样使用组件
<com></com>

• vue.component()

  定义

// 1. 使用Vue.component定义组件
Vue.component('com',{
template:'<div><p>我是一个组件中的元素</p><span>我也是组件中的元素</span></div>'
})

// 2. 使用组件
<com></com>

• 使用

  template

  标签定义模板

// 1. 使用Vue.component定义组件，并且使用选择器选择模板
Vue.component('com',{
template:'#temp'
})

// 2. 使用template标签定义模板,并且给template标签添加id
<template id='tmpl'>
<div>
<p>我是p元素</p>
<span>我是span元素</span>
</div>
</template>

// 3. 使用组件
<com></com>

is属性和component实现组件切换

// comname 是哪个组件名,则component就会被渲染成哪个组件
// component 就是一个占位标签
<component :is='comname'></component>

new Vue({
el:'#app',
comname:'login'
})

父子组件传值

父向子传值

// 1. 先在父组件中定义好要传递的数据
new Vue({
el:'#app'
data:{
msg:'我是要传递给子组件的数据'
},
components:{
son:{
template:'<div>我是子组件{{message}}</div>',
props:['message']
}
}
})

// 2. 在父组件中使用子组件的时候,用绑定属性的方式将父组件中的数据传递给子组件
<div id='app'>
<son v-bind:message = 'msg'></son>
</div>

// 3. 在子组件中定义一个props属性,该属性是一个数组,数组中定义用于接收传过来的变量。这个变量
// 和第二步绑定的这个属性同名
son:{
template:'<div>我是子组件</div>',
props:['message']
}

子向父传值

发布订阅者 设计模式

// 1. 定义好父子组件,定义好子组件需要传递给父组件的数据
new Vue({
el:'#app'
components:{
son:{
template:'<div>我是子组件{{message}}</div>',
data:function(){
return {
msg:'传给父组件的数据'
}
}
}
}
})

// 2. 在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据
// 第一个参数就是自定义的方法名
// 第二个参数就是需要传递给父组件的数据
this.$emit('func',this.msg)

// 3. 在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名
<div id='app'>
<son @func = 'getmsg'></son>
</div>

// 4. 在父组件的methods中定义一个事件处理函数
methods:{
getmsg:function(data){
// data就是子组件传过来的数据
}
}

非父子组件传值

使用event bus(事件总线)：利用一个共享的vue实例对象来进行数据的传递. 同时采用的是 发布-订阅者模式

// componentA  componentB进行数据传递(B->A)

// **定义一个公有的Vue实例,保证两个组件都能够使用,一般在一个单独的js文件中导出一个Vue实例,
然后在componentA和componentB组件中导入该实例进行使用**

export default var vm = new Vue();

// componentB：(B组件时需要传递数据的组件)

// 1. 进行事件的发布(注册)

vm.$emit('事件名称','需要传递的数据')

// 2. 事件的触发(用于发布事件)

send(){
this.$emit('事件名称','需要传递的数据')
}

// componentA：(A组件是接收数据的组件)

// 1. 订阅事件

vm.$on('事件名称',function(data){
// 此处的data就是 发布组件中传递过来的数据
})

生命周期钩子函数

回调函数:一个函数被当做参数进行传递的时候,称作这个函数为回调函数

构造函数:一个函数被new 关键字引导执行的时候,称作这个函数为构造函数

钩子函数: 一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行

生命周期: 一个程序会存在初始化 - 运行 - 销毁等阶段,这些阶段统称为该程序的生命周期

new Vue({
el:'#app',
data:{},
methods:{},
beforeCreated(){},
// data中的数据和methods中的方法已经初始化完毕会去自动执行created方法
created(){
// 用于发生数据请求,也可以初始化一些数据
},
beforeMount(){},
// 真实DOM已经渲染完毕会执行mounted函数
mounted(){
// 操作真实DOM
}
beforeUpdate(){},
// data中的发生了变化而且被重新渲染到了界面上时才会执行
updated(){
// 数据更新后重新操作DOM
},
// 实例销毁之前,实例上面的各种属性和方法都还可以正常访问,通常可以在这里手动回收一些页面没有被释放的变量,比如清楚定时器的操作。
beforeDestroy(){},
// 实例已经从内存中被销毁
destroyed(){}
})

vue-cli脚手架的使用

// 1. 安装vue-cli脚手架
npm i vue-cli -g

// 2. 初始化项目模板
vue init webpack 项目名称
eslint(语法规范化插件) 不要安装  当安装之后只能按照ESLint中规定的语法格式去书写代码
e2e(测试框架) 不要安装
unit test(单元测试框架) 不要安装

// 3. 进入项目安装所有依赖
npm i

// 4. 运行
npm run dev

config/index.js中 17/18行改端口号和自动打开浏览器

VSCode用户代码片段

"Print to vue": {
"prefix": "vuec",
"body": [
"<template>",
"    <div>",
"      御剑乘风来,除魔天地间!$1",
"    </div>",
"</template>",
"           ",
"<script>",
"export default{",
"    $2         ",
"}",
"</script>",
"<style scoped>",
"$3            ",
"</style>"
],
"description": "create a vue template"
}

将项目提交到码云

// 1. 在项目文件夹初始化git
git init

// 2. 将代码提交到暂存区
git add .

// 3. 提交代码
git commit -m '描述信息'

// 4. 关联远程分支
git remote add origin https://gitee.com/UniverseKing/tes.git

// 5. 推送到远程分支
git push -u origin master

// 6. 查看文件信息
git status

// 7. 查看log
git log --oenline

// 8. 切换版本记录
git reset --hard 版本号

设置npm镜像源为淘宝镜像

npm config set registry https://registry.npm.taobao.org