Vue入门（十）

疯狂的格式化

已于 2022-07-01 20:54:58 修改

阅读量389

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-07-01 14:56:30 首次发布

本文链接：https://blog.csdn.net/m0_57203243/article/details/125539575

版权

Vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue-cli的使用——使用vue-cli开发TodoList

首先准备好上一讲创建的项目

1、用编辑器打开 todolist 项目后找到 scr 文件夹下的 App.vue 文件，重命名为 TodoList.vue 文件。

2、然后找到 main.js 文件，修改图中的代码为：

import Vue from 'vue'
import TodoList from './TodoList.vue'

Vue.config.productionTip = false

new Vue({
	render: h => h(TodoList),
}).$mount('#app')

现在正式开始编写代码

打开 TodoList.vue 文件修改代码为：

<template>
	<div>
		<input />
		<button>提交</button>
	</div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</template>

<script>

</script>

<style>

</style>

将代码保存后返回界面发现报错：

报错的原因是因为 Vue 规定 <template></template>（模板标签）中只能有一个根元素，刚刚写的代码中 <div> 和 <ul> 是同一级元素，导致模板标签中有两个根元素，所以报错。只要把代码都包含到一个根元素中就行了，如下：

<template>
	<div>
		<div>
			<input />
			<button>提交</button>
		</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</template>

效果：

下面开始编写逻辑代码

代码和之前的代码大同小异。

TodoList.vue 文件

<template>
	<div>
		<div>
			<input v-model="inputValue" />
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>

		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				list: []
			}
		},
		methods: {
			handleSubmit() {
				this.list.push(this.inputValue)
				this.inputValue = ''
			}
		},
	}
</script>

<style>

</style>

在 Vue-cli 中组件写在单独 vue 文件里

1、将 components 文件夹下的 HelloWorld.vue 文件，重命名为 TodoItem.vue 文件。

2、在 TodoItem.vue 文件中编写组件

<template>
	<li>item</li>
</template>

<script>
	export default {

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

效果：

3、在 TodoList.vue 文件中引入 TodoItem 组件

<template>
	<div>
		<div>
			<input v-model="inputValue" />
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<todo-item></todo-item>
		</ul>
	</div>
</template>

<script>
	import TodoItem from './components/TodoItem.vue' // 引入组件
	export default {
		components: { // 注册组件
			'todo-item': TodoItem
		},
		data() {
			return {
				inputValue: '',
				list: []
			}
		},
		methods: {
			handleSubmit() {
				this.list.push(this.inputValue)
				this.inputValue = ''
			}
		},
	}
</script>

<style>

</style>

4、编写逻辑代码

<template>
	<div>
		<div>
			<input v-model="inputValue" />
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<todo-item v-for="(item,index) in list"></todo-item>
		</ul>
	</div>
</template>

保存后发现会报错，提示必须要有 v-bind:key

修改为：<todo-item v-for="(item,index) in list" :key="index"></todo-item>

效果：

子组件接收父组件的传值

父组件通过属性的形式（:content="item"）向子组件传值

TodoList.vue 文件

<template>
	<div>
		<div>
			<input v-model="inputValue" />
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<todo-item v-for="(item,index) in list" :key="index" :content="item">
			</todo-item>
		</ul>
	</div>
</template>

TodoItem.vue 文件

<template>
	<li>{{content}}</li>
</template>

<script>
	export default {
		props: ['content'],
	}
</script>

效果：

再实现删除功能

TodoList.vue 文件

<template>
	<div>
		<div>
			<input v-model="inputValue" />
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<todo-item v-for="(item,index) in list" :key="index" :content="item" :index="index" @delete="handleDelete">
			</todo-item>
		</ul>
	</div>
</template>

<script>
	import TodoItem from './components/TodoItem.vue' // 引入组件

	export default {
		components: { // 注册组件
			'todo-item': TodoItem
		},
		data() {
			return {
				inputValue: '',
				list: []
			}
		},
		methods: {
			handleSubmit() {
				this.list.push(this.inputValue)
				this.inputValue = ''
			},
			handleDelete: function(index) {
				this.list.splice(index, 1)
			}
		},
	}
</script>

<style>

</style>

TodoItem.vue 文件

<template>
	<li @click="handleDelete">{{content}}</li>
</template>

<script>
	export default {
		props: ['content', 'index'],
		methods: {
			handleDelete() {
				// alert(this.index)
				this.$emit('delete', this.index)
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

全局样式与局部样式

把每个列表项加一个颜色

TodoItem.vue 文件

<template>
	<li class="item" @click="handleDelete">{{content}}</li>
</template>

<script>
	export default {
		props: ['content', 'index'],
		methods: {
			handleDelete() {
				// alert(this.index)
				this.$emit('delete', this.index)
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.item {
		color: red;
	}
</style>

效果：

当我们在文本框加上样式

<template>
	<div>
		<div>
			<input class="item" v-model="inputValue" />
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<todo-item v-for="(item,index) in list" :key="index" :content="item" :index="index" @delete="handleDelete">
			</todo-item>
		</ul>
	</div>
</template>

效果：

发现并没有效果，这是因为 scoped 关键字。

项目创建时自带的注释解释了它的作用：



翻译：添加“scoped”属性以将CSS仅限于此组件

所以添加了该关键字将样式变成了局部样式。如果去掉就变成全局样式如下：