vue简单梳理

vue父子传值问题

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

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为是否显示标志位
       
           
这是动画内容
 
        

css样式

动画的钩子函数

• 动画钩子函数的第一个参数‘el’，表示要执行动画的那
  个Dom元素
• 在enter的方法中得传参（el，done）并且在方法结束前执行done()

入场

• v-on: beforeEnter
• v-on:enter
• v-on: afterEnter
• v-on: enterCancelled

出场

• v-on: beforeLeave
• v-on:leave
• v-on: afterLeave
• v-on: leaveCancelled

import *** from *** shi ES6中的新语法 导入模块

render 会把el制定的容器中 所有东西都清空，只放入render中的内容