vue 2

1.style
/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 /
/ v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 /
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
/ transform位移 */
}

/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
  transition: all 0.8s ease;
  /* ease 指定动画的线性 先慢后快再慢 */
}

组件

1. 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
2. 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
3. 父组件向子组件传值
   注意：一定要使用props属性来定义父组件传递过来的数据
   使用v-bind或简化指令，将数据传递到子组件中：
   4.子组件向父组件传值
   父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
   子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用
   5.this.$refs 来获取元素和组件
   // 通过 this.$refs来获取元素console.log(this.$refs.myh1.innerText);
   // 通过 this.$refs来获取组件console.log(this.$refs.mycom.name);

vue-router

1. 导入 vue-router 组件类库：

2. 使用 router-link 组件来导航

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

3. 使用 router-view 组件来显示匹配到的组件

4. 创建使用`Vue.extend`创建组件

// 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
  template: '<h1>登录组件</h1>'
});

// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
  template: '<h1>注册组件</h1>'
});

5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: ‘/login’, component: login },
{ path: ‘/register’, component: register }
]
});

6. 使用 router 属性来使用路由规则

// 6. 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: ‘#app’,
router: router // 使用 router 属性来使用路由规则
});

## 使用tag属性指定router-link渲染的标签类型

## 设置路由重定向

## 设置路由高亮

## 设置路由切换动效

## 在路由规则中定义参数
1. 在规则中定义参数：

{ path: ‘/register/:id’, component: register }

2. 通过 `this.$route.params`来获取路由中的参数：

var register = Vue.extend({
template: ‘

注册组件 — {{this.$route.params.id}}

’
});

*