【前端框架】vue~hello world

在【前端框架】vue~环境搭建 一文中我们已经初始化了一个vue项目并启动成功。本文以此项目进行演示。

效果一：新建页面并跳转至该页面

1. 在src\components\目录下新建文件夹myComponents用于保存我们新增的组件
2. 新建文件HelloVue.vue并编写内容

<template>
	<div id="vue">
		Hello Vue.js! {{message}}
	</div>
</template>

<script>
export default {
	name: 'HelloVue',
	data() {
		return {
			message: '吃饭'
		}
	}
}
</script>

<style type="text/css">
#vue {
	color: #42b983;
	font-size: 28px;
}
</style>

3. 配置跳转路径
   在src\route\index.js配置新增页面的路由

导入新增组件

import HelloVue from "@/components/myComponents/HelloVue";

在routes数组中配置路由

	{
     path: "/HelloVue",
     name: "HelloVue",
     component: HelloVue
     }

修改完成后如图(1)

图(1) 4. 在`src\components\HelloWorld.vue`文件中增加超链接

<router-link to="/HelloVue">HelloVue</router-link>

启动项目，效果如图(2)、图(3)

图(2)

图(3)

效果二：引用自定义组件

1. 在src\components\myComponents\目录下新建文件MyButton.vue并编写内容

<template>
	<div>
		<input type="button" value="测试" name="test" />
	</div>
</template>

<script>
export default {
	name: 'MyButton',
	data() {}
}
</script>

2. 修改HelloVue.vue文件，引用自定义组件

import MyButton from './MyButton'

	components: {
		MyButton
	}

3. 在<template>标签中使用自定义组件

		<MyButton></MyButton>

		<MyButton></MyButton>

修改完成后，如图(4)

图(4) 效果如图(5)

图(5)

动态显示控件(控制子组件中显示的个数及文字)
修改MyButton.vue文件

<template>
	<div>
		<div v-for="item in items" v-bind:key="item.name">
			<input type="button" :value="item.value" name="item.name" @click="item.handle" />
		</div>
	</div>
</template>

<script>
export default {
	name: 'MyButton',
	data() {},
	props: {
		items: {
			type: Array,
			default: () => {
				return []
			}
		}
	}
}
</script>

修改HelloVue.vue文件

<template>
	<div id="vue">
		Hello Vue.js! {{message}}
		<MyButton :items="items"></MyButton>
	</div>
</template>

<script>
import MyButton from './MyButton'

export default {
	name: 'HelloVue',
	data() {
		return {
			message: '吃饭',
			items: [
				{
					name: 'input1',
					value: '提交',
					handle: this.submit
				},
				{
					name: 'input2',
					value: '删除',
					handle: this.delete
				},
				{
					name: 'input3',
					value: '保存',
					handle: this.save
				}
			]
		}
	},
	methods: {
		save() {
			alert('save')
		},
		delete() {
			alert('delete')
		},
		submit() {
			alert('submit')
		}
	},
	components: {
		MyButton
	}
}
</script>

<style type="text/css">
#vue {
	color: #42b983;
	font-size: 28px;
}
</style>

动态显示控件(控制子组件中显示的控件)
修改MyButton.vue文件

<template>
	<div>
		<div v-for="item in items" v-bind:key="item.name">
			<label>{{item.value}}</label>
			<slot :name="item.name" />
		</div>
	</div>
</template>

<script>
export default {
	name: 'MyButton',
	data() {},
	props: {
		items: {
			type: Array,
			default: () => {
				return []
			}
		}
	}
}
</script>

修改HelloVue.vue文件

 <template>
	<div id="vue">
		Hello Vue.js! {{message}}
		<MyButton :items="items">
			<template v-slot:input1>
				<input type="text" :placeholder="'input1'" />
			</template>
			<template v-slot:input2>
				<input type="text" :placeholder="'input2'" />
			</template>
			<template v-slot:input3>
				<input type="text" :placeholder="'input3'" />
			</template>
		</MyButton>
	</div>
</template>

<script>
import MyButton from './MyButton'

export default {
	name: 'HelloVue',
	data() {
		return {
			message: '吃饭',
			items: [
				{
					name: 'input1',
					value: '姓名'
				},
				{
					name: 'input2',
					value: '地址'
				},
				{
					name: 'input3',
					value: '国籍'
				}
			]
		}
	},
	components: {
		MyButton
	}
}
</script>

<style type="text/css">
#vue {
	color: #42b983;
	font-size: 28px;
}
</style>

本文演示代码涉及：
router 路由
component 组件(自定义组件、组件注册)
prop 父组件向子组件传递数据(单向)
slot 插槽
v-for 列表渲染
v-on 事件处理
模板语法