vue2.x脚手架

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)
})