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安装后的目录:
感觉和angular挺像的

二、功能结构部分

  • .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处理这次子组件中的的事件。

Logo

前往低代码交流专区

更多推荐