网络请求
HTTP报文
GET请求报文和响应报文
axios
Vue实例生命周期
生命周期钩子:created
、mounted
等等,
生命周期钩子函数:在Vue实例存活的不同阶段执行的函数,函数的this
指向调用它的Vue实例。
Vue过渡动画
元素从DOM插入或移除时触发过渡效果。触发场景有
条件渲染
v-if
条件展示v-show
动态组件transition
- 单元素/组件过渡 transition+v-if/v-show
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:
- 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
- 如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同)
6个过渡类名
- 他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如
Animate.css 结合使用十分有用。 - 2.1.8版本及以上支持
v-enter-to
、v-leave-to
。v
指代transition
的属性name
。 - 在动画中
v-enter
类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。
路由
使用路由
先准备好两个组件。
// const Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
var Foo = Vue.component('Foo', {
template: '<div>foo</div>'
});
var Bar = Vue.component('Bar', {
template: '<div>bar</div>'
});
路由配置:
const routes = [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}];
// 创建路由实例
const router = new VueRouter({
routes
});
创建挂载根实例,记得要通过 router 配置参数注入路由。通过vm.$router
访问路由
var vm = new Vue({
el:"#app",
data: function(){
return {
father: 'father'
}
},
router:router, // 注入路由
methods: {
goBack: function() {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
});
html如下
<router-link to = '/foo'>go to foo</router-link>
<router-link to = '/bar'>go to bar</router-link>
<button @click = 'goBack'>go back</button>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
显示Foo组件时,路径为http://localhost:3000/#/foo
动态路由
路由规则path: '/bar/:id'
。则路径/bar/foo1
、/bar/foo2
都将映射到相同路由。通过$route.params.id
可以访问到当前路径动态的id
,即'foo1'
或'foo2'
。
设置多段“路径参数”,对应的值都会设置到$route.params
。
模式 | 匹配路径 | $route.params |
---|---|---|
/user/:username | /user/evan | { username: ‘evan’ } |
/user/:username/post/:post_id | /user/evan/post/123 | { username: ‘evan’, post_id: 123 } |
嵌套路由
在嵌套的出口中渲染组件,需要在VueRouter
的参数中配置children
。
const routes = [
{
path: '/account',
alias: '/',
component: Account,
children: [
{
// 注意path不能加斜杠 '/'
// 以 '/' 开头的嵌套路径会被当作根路径
path: 'login',
component: Login
},
{
path: 'register',
component: Register
}]
}];
const router = new VueRouter({
routes
});
组件:
var Account = Vue.component('Account', {
template: '<div><h1>账号切换</h1><router-view></router-view></div>'
// 在外层组件中使用<router-view>,作为子组件渲染的出口
});
var Login = Vue.component('Login', {
template: '<div>LOGIN</div>'
});
var Register = Vue.component('Register', {
template: '<div>REGISTER</div>'
});
当路径匹配到/account/login
,渲染Login
组件;当路径匹配到/account/register
,渲染Register
组件。
/#/account/login /#/account/register
+------------------+ +-----------------+
| Account | | Account |
| +--------------+ | | +-------------+ |
| | Login | | +------------> | | Register | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+