（一）使用Vue-cli学习使用vue框架

2020-6-24 更新

1. 更新部分文档描述及页面排版；

一、使用npm安装vue-cli，

	$>npm install -g vue-cli
	$>npm init webpack testVue
	$>cd testVue
	$>npm install
	$>npm run dev

使用npm安装比较慢，查看此篇文章使用淘宝源

vue-cli安装后的目录：

二、功能结构部分

• .vue后缀文件为组件component，统一放在components目录下，包含<template></template><script></script><style></style>
  

<template></template>写正常的HTML页面结构，还有一些vueJS的属性指令可以用。<script></script>数据处理计算，提供给template部分数据源。<style></style>就是页面的样式表现了。

<script></script>作为主要的部分，简单结构，还有其他的属性设置。：

• 各个页面之间的跳转就需要路由来控制，使用vue-router
  

  使用<router-link to=''>..</router-link>进行路由的渲染，<router-view></router-view>进行跳转路由页面的渲染。

  <router-link to="/">首页</router-link>
  <router-link to='/3dMenu'>3dMenu</router-link>
  <router-view></router-view>
  

• 所有的模式都有一个分-总的流程，App.vue就是这个总揽全局的组件，路由的都设置这里（不牵扯子路由）；在App.vue里的template部分内容会存在于跳转路由的各个页面。
  通过main.js注入到页面中。
  

三、父子组件通信

• 数据从父组件流向子组件，父组件需要导入子组件，使用components进行声名,给出别名以便引用；父组件通过v-bind:命令保定数据源，子组件通过属性props接收数据。v-bind:可以缩写为’ : ’
  
  父组件绑定数据p01给子组件，：someMsg=‘p01’,someMsg作为数据传输媒介名，在子组件接收时使用。

		<template>
			<div>
				<h3>{{msg}}</h3>
				<h4>child Message:{{count+`次`+info}}</h4>
				<child-component :someMsg='p01' v-on:fromchild='childMsg'></child-component>
			</div>
		</template>
		<script>
			import Child from './childComponents/child'
			export default{
			name:'parent',
			data(){
				return {
					msg:'parent test',
					p01:'parent to child',
					count:0,
					info:''
				}
			},
			components:{
				childComponent:Child
			},
			methods:{
				childMsg:function(msg){
					this.info = msg.message;
					this.count++;
				}	
			}
		}
		</script>
		<style scoped>
		</style>

在子组件通过props属性获取来自父组件的数据，数组类型，可以使用v-bind:进行多数据绑定传输。接收过来的数据可直接使用。

		<template>
			<div class="child">
				<h2>{{child}}</h2>
				<h4>{{someMsg}}</h4>
				<button v-on:click='submit'>submit</button>
			</div>
		</template>			

		<script>
			export default{
				name:'childcomponet',
				data(){
					return{
						child:'child test',
						msg:''
					}
				},
				props:['someMsg'],
				methods:{
					submit:function(){
						this.msg = 'childMsg';
						this.$emit('fromchild',{message:'child to parent'});
					}
				}
			}
		</script>	

		<style scoped>
			h2{
				color:red;
			}
			.child{
				border:1px solid #eee;
			}
		</style>	

• 子组件向父组件传输数据，通过事件传递，支持DOM事件类型，v-on:绑定事件，缩写@,这里使用按钮的点击事件，所有的方法都写在属性methods中，使用.$emit()传递事件，第一个参数为事件触发名，在父组件中获取后使用；第二个参数可传递数据给父组件，比如表单提交。

  在父组件中使用v-on来绑定传递事件，v-on:fromchild='childMsg',在方法childMsg处理这次子组件中的的事件。