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

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

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