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: [...]

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

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