vue2.x脚手架使用
vue init webpack-simple filename 下载好框架
src文件夹目录下是我们要操作的文件
app.vue文件:所有的组件集中到此文件中
ep:import 组件名 from ‘组件地址’ 引用组件
export default {
name: ‘app’,
data () {
return {
msg: ‘Welcome to leo Vue.js App’
}
},
components:{ //引用组件的启用,多个组件以逗号分隔 (引用和启用都写在script中)
Leo,Router
}
}
组件示例 tab.vue
<template>
<div>
<input type="text" v-for="i in inputValue" :value="i">
<div v-for="i in divInner">{{i}}</div>
</div>
</template>
<script>
export default {
props:['xds'],
data () {
return {
inputValue:[],
divInner:['开心','快乐','永生']
}
},
mounted(){
console.log(this.xds)
this.inputValue = this.xds;
}
}
</script>
vue2.x中使用路由
1.定义路由组件
<template>
<div id="rot">
<router-link to='/home'>home</router-link>
<router-link to='/news'>new</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'rot',
data () {
return {
}
}
}
</script>
2.在app.vue中添加此组件并启用
<template>
<router></router>
</template>
<script>
import router from './router.vue' //引用路由组件
export default {
components:{
router//启用路由组件
},
data () {
return {
}
}
}
3.在main.js中引用vue-router并启用模块
import vueRouter from 'vue-router' //引用路由模块
Vue.use(vueRouter); //启用模块
const router = new vueRouter({//配置路由
routes:[
{
path:'/home',
component:{
template:'<h1>我是主页</h1>'
}
},
{
path:'/news',
component:{
template:'<h1>我是新闻</h1>'
}
}
]
})
new Vue({
router,//启用路由
el: '#app',
render: h => h(App)
})