文章目录

  • 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