Vue回顾篇

vue指令：

v-bind 简写 :	属性绑定
v-if   v-else	条件渲染
v-for	列表渲染
v-on 简写 @	事件绑定
v-model	双向数据绑定
v-cloak	防止闪烁
v-show	条件渲染
v-html	渲染一段html字符串
v-text	绑定一个普通的文本
v-once	只绑定一次

 

 

 

 

 

 

 

 

 

 

vue属性和样式的绑定：

v-bind或者:style = 对象	（{ backgroundColor: red }）
v-bind或者:class = 数组	（["fade", "title", "navbar"]）
v-bind或者:class = 对象	（{ fade:true/false/"haha"/"" }）

 

 

 

 

创建vue对象的时候，配置对象里面都有哪些常用的属性：

data	组件数据
props	接收来自父组件的参数
methods	当前组件的方法
computed	计算属性
router	配置路由
watch	监听器（组件数据发生变化 new，old）
filters	过滤器（使用 |过滤器(参数2)）
components	注册组件（代码复用）
directives	自定义事件指令
mixin	混入（逻辑复用）
生命周期函数
beforeCreate / created	创建实例时
beforeMount  / mountd	实例渲染
beforeUpdate / updated	data更新时
activated	加上keep-alive之后，组件被隐藏重新再次显示时触发
beforeDestroy/destroyed	组件销毁时

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

插槽：组件标签内容默认是不显示的

<slot></slot>	无名插槽
<slot name="nav"></slot>	有名插槽

 

 

 

vue动画：

无名动画
进场	.v-enter .v-enter-active .v-enter-to
离场	.v-leave .v-leave-active .v-leave-to
有名动画
<transtion name="xx"></transtion>
进场	.xx-enter .xx-enter-active .xx-enter-to
离场	.xx-leave .xx-leave-active .xx-leave-to
第三方动画库配合使用	animate.css
<transition enter-class="fadeIn" leave-class="slideLeft"></transition>

 

 

 

 

 

 

 

 

 

路由：

var router = new VueRouter({
  routes:[
    {
     name(路由名字),
     path（路径）,
     component（组件）,
     redirect（重定向）,
     children（二级路由）
     beforeEnter（路由钩子函数）}
  ]	
})
new vue({
  router: router 
})

路由钩子函数：

全局钩子函数

某个路由独享的钩子函数

某个组件独享的钩子函数

 

 

 

 

vue-cli：

vue的UI库	vux、elementUI、iView、vant……
ajax请求	axios（get、post、基本配置）
vuex状态管理	{states（仓库的状态、数据）、mutations（同步修改数据的方法）、actions（异步修改数据的方法）、getters（获取数据、计算数据）、modules（仓库的模块化）}