vue入坑

自定义组件

常用angular，angular中组件都是分离的，html模板、style样式、js控制器是分为三个文件构成了一个组件。但vue很奇怪的是喜欢单文件组件，也就是关注点分离，而不是文件类型分离。这个确实在刚上手的时候很不顺手的，需要慢慢适应。来看看vue的组件：

<template>
    <div>hello, {{msg}}</div>
</template
<script>
export default {
  name: 'Hello',
  data () {
    return {
      msg: 'vue'
    }
  }
}
</script>
<style scope>
div{
    color: red;
}
</style>

上面使用<template>标签标记的是组件的html，<script>标签中定义了这个组件并导出，<style>里面定义了这个组件的css样式。这即是vue的单文件组件。

当然，也支持文件类型分离的，就是模板文件依旧为Hello.vue，只不过js内容和css内容分为两个对应的文件，这个时候就需要手动引入：

<template>
    <div>hello, {{msg}}</div>
</template
<script src="./Hello.js"></script>
<style src="./Hello.css"></style>

这个官方的解释为：

一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

定义路由

我们添加了一些组件，现在希望添加路由来进行跳转到对应的页面。路由我们使用官方的路由组件：vue-router。

我们在用vue-cli创建vue项目的时候，已经添加了vue-router组件，如果没有，你可以参照vue-router官方文档来使用。

我们发现在App.vue中的template中有一行：

<router-view/>

这个标签标记了路由的出口，路由匹配到的组件将渲染到这里。

再看看定义的路由，文件路径为：src > router > index.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

目前只定义了一个默认路由，当访问http:localhost:8081的时候就渲染HelloWorld组件。

我们可以添加自己定义的路由，只需要import对应的组件，然后添加到routes数组对象里面就可以。如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/login/login.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloTest
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

注意：定义的路由前面一定要加上斜杠/才能正常输出，否则匹配不到，别问我怎么知道的，说多了都是泪~