vue_day03

Vue中发ajax的时机:要趁早
应该在created钩子函数中发起请求,这样可以并行的做一些其他的事情,等到页面挂载好,数据也请求回来了.
如果实在mounted钩子函数中发起请求,那么,当时用户已经可以看到页面的假数据或者空数据,然后才会显示从数据库查询出的正常数据,造成数据闪烁,用户体验不好.

image.png
使用vue-resource模块,做根路径默认配置
image.png
使用方式:
this.$http.get("api/getproplist").then(result=>{...})
启用全局emulateJSON配置,用于转换post提交的编码方式
image.png

动画:
分为两个半场动画
进入动画
初始(v-enter)状态 opacity:0
进入之后终止(v-enter-to)状态 opacity:1
进入动画过程 v-enter-active

离开动画
离开之前(v-leave)状态 opacity:1
离开之后(v-leave-to)状态 opacity:0
离开动画过程 v-leave-active

其中v-enter和v-leave-to样式差不多
v-enter-to和v-leave样式差不多

使用<transition>标签把需要控制的标签包裹起来.再通过style样式进行更改动画显示

image.png

其中 <transition>标签中的name属性,可以修改样式的前缀,(v-enter --> my-enter),用于和其他动画样式做区分.

image.png
使用第三方的css实现动画效果(animated.css),可以使用duration来设置动画时长.
image.png

使用javascript钩子函数来实现半场动画效果(仅包含入场动画)
下面的钩子函数依次执行

image.png
image.png
如果没有显示的调用done()函数,那么动画效果会出现延迟.
image.png
注意:afterEnter(el){}这个钩子函数中,this.flag=!this.flag,作用:隐藏小球,更重要的是强制把flag由true改成false,结束后半场动画,让每次点击都只执行前半场动画.

对于<li>标签 应该使用<transition-group>标签包裹

image.png

使用相应的动画样式

image.png
固定的动画模板
image.png

通过appear属性实现页面展示后,列表入场效果

image.png
组件:
为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可.
模块化:从代码逻辑的角度进行划分,方便代码分层开发,保证每个功能模块的职能单一
组件化:从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用.

定义全局组件的三种方式
创建组件的方式一:
使用Vue.extend 来创建全局的Vue组件
1.通过Vue.extend({})创建一个组件的模板对象
2.通过Vue.component()定义全局组件,将组件的模板对象注册成具有名称的组件,但是如果组件名采用驼峰命名,需要将大写的驼峰改为小写的字母,并且两个单词之间 使用 '-'连接,
如果不使用驼峰,直接拿名称来使用即可.

image.png
创建组件的方式二:(通过字面量来直接创建)
image.png
创建组件的方式三:
和第二种相比,不用把标签写在字符串中,防止出现错误
采用<template>标签来提供HTML模板,然后通过id进行引入,注意:<template>标签必须在Vue实例控制的标签范围之外,并且只能有一个根元素.
image.png
定义实例内部私有组件的方式:该Vue实例独享这个组件,和filters,methods,directives一样
和全局组件一样,可以在template后直接写html标签,也可以通过id引入<template>模板.
image.png

组件中的data,必须是一个方法,且返回值是一个对象,可以被template通过插值表达式来使用

image.png

关于为什么data必须是一个函数:
如果在函数外部定义一个对象,在data函数中返回这个对象,那么,页面在多次引入组件的时候,多个组件共享的是同一个对象,互相干扰,官方建议:在data函数中返回的对象必须是内部的,即:return { count : 0 }

image.png

组件显示切换(登录|注册)
方式1:
可以通过flag标签,v-if和v-else指令进行切换显示.
缺陷:只能2个页面进行切换显示.

方式2:
把<component>标签的 :is 属性作为Vue实例中属性,然后通过点击事件进行赋值更改,就可以实现组件位置切换显示.

image.png

通过<transition>标签来为组件切换增加动画效果

image.png