样式添加

1、:class直接绑定样式

通过对已写好的样式做判断，决定是否添加该样式

<div :class={active: ifture}>样式</div>
//其中active就是已经定义好的样式

2、数组样式添加法

实际上就是用变量代替样式名，然后引用这些变量

<div v-bind:class="[activeClass, errorClass]"></div>
//数组中的每一个变量都定义了一个样式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
//引申用法

等价添加方法--内联添加

我们还可以不使用变量添加样式，而是直接在数组中添加样式

<div v-bind:style="[baseStyles, overridingStyles]"></div>

3、内联样式:style

以上两种都是对样式的引用，而内联样式可以单独针对某一个属性进行修改

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
//样式属性为驼峰式

路由

前端路由就是根据不同的用户事件显示不同的页面内容，本质上就是用户事件和事件处理函数之间的对应关系

window.onhashchange=function(){
    location.hash获得最新的hash值
    这是一个手动的简易前端路由
}

Vue Router

1、添加路由连接
<router-link to="/user">User</router-link>
2、添加路由填充位
<router-view></router-view>

const User={
    template:'<h1>这是</h1>'
}
配置路由规则并创建路由实例
var router =new VueRouter({
routes:{
    {path:'/',redirect:'/user'},实现路由重定向
    {path:'/user',component:User}，
    {path:'/register',component:Register,children:[{
    path/////}]}
}
})
最后要将创建的路由挂载到Vue根实例中
new Vue({
el:'#app',
router
})

动态路由匹配

var router =new VueRouter({
    routes:[
    {path:'/user/:id',component:User}]
})

const User={
    template:'<div>{{$route.params.id}}</div>'
    可以获得动态匹配参数
}

路由组件传递参数

var router =new VueRouter({
    routes:[
    {path:'/user/:id',component:User,props:true}，
    {path:'/user/:id',component:User,props:{username:'lisi'}，
     {path:'/user/:id',component:User,props:route=>{{username:'lisi',id:route.params.id}
    ]
})
第一种传参
const User={
    props:{'id'}, 用props接收路由参数
    template:'<div>{{id}}</div>'
}
第二种传参
const User={
    props:['username','age'],
    template:'<div>{{username}}</div>'
}

编程式导航

通过api实现页面跳转
$router.push('/register')
$router.go()