Use of vue2.x scaffold

Vue init webpack simple filename download the framework
src folder directory is the file we want to operate
app.vue file: all components are centralized in this file
ep:import component name from 'component address' reference component
export default {
name: 'app',
data () {
return {
msg: 'Welcome to leo Vue.js App'
}
},
Components: {/ / enable reference components. Multiple components are separated by commas (both reference and enable are written in script)
Leo,Router
}
}

Component example 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:['Happy','happy','Immortality']
		 	}
		},
		mounted(){
	      console.log(this.xds)
	      this.inputValue = this.xds;
    	}
	}
</script>

Using routing in vue2.x

1. Define routing components

<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. Add this component in app.vue and enable

<template>
	<router></router>
</template>
<script>
import router from './router.vue' //Reference route component
export default {
  components:{
  	router//Enable routing components
  },
  data () {
    return {
    }
  }
}

3. Reference Vue router in main.js and enable module

import vueRouter from 'vue-router' //Reference routing module
Vue.use(vueRouter); //Enable module
const router = new vueRouter({//Configuration routing
	routes:[
		{
			path:'/home',
			component:{
				template:'<h1>I am the home page.</h1>'
			}
		},
		{
			path:'/news',
			component:{
				template:'<h1>I am news.</h1>'
			}
		}
	]
}) 
new Vue({
  router,//Enable routing
  el: '#app',
  render: h => h(App)
})