创新实训进度（七）——vue.js学习笔记3

创新实训进度（七）

vue.js学习笔记3——样式、组件、路由

样式捆绑

1. 绑定html的class：可以为v-bind:class设置一个对象，动态切换class

<style>
    .active{
        color: red;
    }
</style>
<div id="app">
    <div v-bind:class="{active:isActive}">项目实训管理系统</div>
    <button v-on:click="changeStyle">changeStyle</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:true
        },
        methods:{
            changeStyle:function () {
                this.isActive=!this.isActive;
                //对象中也可以传入多个值，来控制不同的样式
            }
        }
    })
</script>

2. 绑定内联样式

<div v-bind:style="{color:textColor,fontSize:fontSize+'px'}">项目实训管理系统</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            textColor:"red",
            fontSize:30
        }
    })
</script>

组件
组件是可复用的 Vue 实例，且带有一个名字，与 new Vue 接收相同的选项，例如 data、computed、watch、methods 等。仅有的例外是像 el 这样根实例特有的选项。
通常一个应用会以一棵嵌套的组件树的形式来组织：

vue路由模块
在项目中使用路由模块需要下载相应模块，
使用命令 ：npm install vue-router --save-dev
在src中创建一个router文件夹，在router中创建index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes:[]
})

在main.js中添加：

import router from './router'
new Vue({
  el: '#app',
  router, 
  components: { App },
  template: '<App/>'
})