vue.js基础篇(持续更新)

参考vue官网，可以通过官网学习。

基础篇介绍vue的基本用法，并且加上自己的理解，欢迎各位指正探讨！

以下都是在vue.js系列（一）——环境搭建的基础上，不再赘述。

1.声明式渲染
在文件src/App.vue中template标签中添加代码：

<div>这里是input输入的内容：{{msg}}</div>
<input v-model="msg"/>

export default中添加

data () {
    return {
      msg: ''
    }
  }

效果如下：

2.路由+嵌套路由

2.1在src/components新建Hi.vue

<template>
  <div class="hi">
    This the hi.vue
  </div>
</template>

<script>
export default
{
  name: 'hi'
}
</script>

<style scoped>
.hi{
  color:red;
}
</style>

2.2在src/router/index.js中添加

import Hi from '@/components/Hi'

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

只用添加routes数组中的第二个

这时就可以通过浏览器访问http://localhost:8080/#/hi/ ，访问到Hi.vue

在Hello.vue中添加：

<router-link to="/hi/">go to hi</router-link>

首页出现跳转链接，点击出现“This the hi.vue”，说明跳转到Hi.vue

2.3 嵌套路由

在src/components新建ninhao.vue

<template>
  <div class="hi">
    This the ninhao.vue
  </div>
</template>

<script>
export default
{
  name: 'ninhao'
}
</script>

<style scoped>
.hi{
  color:red;
}
</style>

在Hello.vue中添加：

<router-link to="/ninhao/">go to ninhao</router-link>

<router-view></router-view>

修改router/index.js

添加代码

import ninhao from '@/components/ninhao'

修改代码

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      children: [
        {
          path: 'hi',
          name: 'Hi',
          component: Hi
        },
        {
          path: 'ninhao',
          name: 'ninhao',
          component: ninhao
        }
      ]
    }
  ]

浏览器的地址总是自动带上#，在src/router/index.js添加

mode: 'history',
routes: [...]

可以去掉#哦，强迫症爆发！

未完待续，欢迎交流提问!