vue简单梳理

最新推荐文章于 2023-12-02 15:28:19 发布

weixin_44192354

最新推荐文章于 2023-12-02 15:28:19 发布

阅读量86

点赞数

分类专栏： vue 文章标签： vue 动画钩子函数

本文链接：https://blog.csdn.net/weixin_44192354/article/details/103124256

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue父子传值问题

父组件中
:allDoctorList.sync=‘allDoctorList’ //传值给子组件
v-on:changeShowPage=“lookPage($event)” //子组件修改父组件值时接受修改后内容的方法

 <!-- 医生表格 -->
 <docMsgTable :allDoctorList.sync='allDoctorList'  v-v-on:changeShowPage="lookPage($event)" ></docMsgTable> 

<script>
import docMsgTable from '../samePart/docMsgTable' //医生表格

export default({
        name:"doctorManage",
        components:{
            docMsgTable,//医生表格
        },
	},
		data(){
		 allDoctorList:[{}，{}，{}],//所有医生表格数据
		},
		methods:{
           //显示页面的切换
            lookPage:function(msg){
            this.XXX=msg}
            })
<script>

子组件中
使用$emit方法向父组件发送数据

//使用父组件的值
{{allDoctorList}}
<p @click="lookMore(vi.row.id,vi.row.name)">查看更多</p>  
<script>
export default({
name :"docMsgTable",
props:["allDoctorList"],
data(){},
methods:{
            //查看更多
            lookMore:function(dId,dName) {
                this.$emit("changeShowPage",dId)
            },
}
})
</script>

axios操作

vue请求数据放在created好还是mounted里好？
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

建议放在created里

如果在mounted钩子函数中请求数据可能导致页面闪屏问题
其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了

vue生命周期函数

beforeCreate(){}
created(){}
beforeMount(){}
mounted(){}
beforeUpdate(){}
updated(){}
beforeDestory(){}
destoryed(){}

active-class

active-class是vue-router模块的router-link组件中的属性

导航钩子

全局导航钩子：router.beforeEach(to,from,next)
在跳转进行判断拦截
组件内的钩子
单独路由独享组件

scss

scss是css的预编译
使用步骤：

安装css-loader，node-loader，sass-loader等加载器模块
在build目录下找到webpack.base.config.js,在extends属性中加拓展.scss
配置module属性
在组件的style标签加上lang属性 eg：lang=“scss”

vue-cli新建项目

安装node.js

在node官网上下载对应的安装包，跟着指示安装完成就好

vue-cli

npm install vue-cli -g 全局安装

vue init webpack demoName 新建项目

动画

transition

transition 是vue官方提供的一个标签，用于动画的制作
在实现列表动画时需要使用transitionGrop标签
如果为v-for循环创建元素动画，v-for必须加上key。添加appear，实现入场动画效果

//flag为是否显示标志位
       <transition>
           <h3 v-show="flag">这是动画内容</h3> 
        </transition>

css样式

<style scoped>
/* .v-enter  动画起始状态
.v-leave-to  动画结束状态
 */
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateX(50px)

}
/* 
.v-enter-active,入场动画时间段
.v-leave-active  离场动画时间段
 */
.v-enter-active,
.v-leave-active{
    transition: all .5s ease;

}
</style>