文章目录
axios发送请求
axios是一个基于promise的请求库,可以在node环境和浏览器环境中使用。
- 引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- get请求
axios.get('url').then(function(res){
// res.data即后台返回的数据
console.log(res.data)
})
- 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>
- 使用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>
- 使用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(){
}
}
})
组件
组件就是对视图的封装,方便重复使用
模块是对功能逻辑的封装
注意:
- 定义组件时如果使用的是驼峰命名,那么使用组件时需要将驼峰的大写字母转成小写,并且用-连接两个单词
Vue.component('myCom',{
template:'<div>我是一个驼峰命名的组件</div>'
})
// 使用
<my-com></my-com>
- 组件的
template
属性中的模版内部如果有多个元素,必须被包含在唯一的一个根元素中
<template>
<div>
<p>我是p元素</p>
<span>我是span元素</span>
</div>
</template>
- 子组件使用
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