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样式差不多

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

image.png

其中 标签中的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,结束后半场动画,让每次点击都只执行前半场动画.

对于

标签 应该使用标签包裹

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

创建组件的方式三:
和第二种相比,不用把标签写在字符串中,防止出现错误
采用