vue.js入门操作

1.vue框架是经典的MVVM模式， .vue文件是模板文件
模板文件又分为3个部分
一 <template></template>(html部分)
二 <script>
export default {
}(这段代码相当与 new Vue({}) )
</script>(js部分)
三 <style scoped></style>(css部分，scoped代表css样式只对当前vue文件的template生效)

2.router/index.js 是vue的路由文件
import Vue from 'vue' //引入主角vue
import Router from 'vue-router'//引入路由
import HelloWorld from '@/components/HelloWorld' //引入组件模板
export default new Router({
routes: [
{
　　path: '/', //路由路径
　　name: 'HelloWorld', //名称
　　component: HelloWorld //模板名称
}
]
})

/about

完成的文件

路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'

Vue.use(Router)

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

About.vue

<template>
<div class="about">
<li>{{msg}}</li>
</div>
</template>
<script>
export default{
name: 'About',
data() {
return {
msg: 'hello world123'
}
}
}
</script>
<style scoped>
<style>

巴特西

vue.js入门操作

最新文章

热门文章