这是通过脚手架工具：Vue-cli生成的一个Project
大多数文件夹我们都不需要改动，我们只需要编辑，src下面的文件就可以了
1.页面结构
1.1启动项目：
在命令行中进入项目文件夹，执行如下代码：
npm run dev
我们就可以在浏览器的localhost:8080端口看到项目的主页面（有一个大的vue-logo）。
todolist最终效果图,支持添加删除功能
1.2项目的执行顺序：
浏览器窗口显示的是index.html页面，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>todolist</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
这里只有Vue的一个挂载点。
打开sc下的面的main.js，代码如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import TodoList from './TodoList'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// 注册
components: { TodoList },
// 使用
template: '<TodoList/>'
})
在这个vue实例中，注册了一个组件，一般注册组件要在components中写键值对，但是如果键和值相同，就可以合并写在一起。
src下面的结构，上面所注册的组件就是TodoList.vue
打开TodoList.vue代码如下：
<template>
<div>
<div>
<input type="text" v-model="inputValue" class="item">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item, index) of list" :content="item" :index="index" @delete="handleDelete">
</todo-item>
</ul>
</div>
</template>
<script>import TodoItem from './components/TodoItem'
export default {
components: {
'todo-item': TodoItem
},
data () {
return {
inputValue: '',
list: []
}
},
methods: {
handleSubmit () {
this.list.push(this.inputValue);
this.inputValue = ''
},
handleDelete (index) {
this.list.splice(index, 1)
}
}
}
</script >
<style >
</style>
简单来说，我发现这个文件中有三个结构，分别是:
- <template> 类比于html
- <script> 类比于js
- <style > 类比于css
通过代码我们看到在这个TodoList.vue组件中，又引入了另外一个组件：TodoItem，用于显示list中待做的事情，代码如下：
<template>
<li @click="handleDelete" class="item">{{content}}</li>
</template>
<script>export default {
props: ['content', 'index'],
methods:{
handleDelete () {
this.$emit('delete', this.index)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.item{
color: green;
}
</style>
~ 路径在src/components/TodoItem.vue
1.3父子组件的通信：
-
父组件到子组件
现在这个项目的结构是我们在父组件（TodoList）中输入待做事项，但是要在子组件中显示，所以就涉及到父到子组件消息传递。
我们可以在父组件中——引入子组建标签的地方，给标签绑定一个属性：
<todo-item :content="item" > </todo-item>
在子组件中添加：
props: ['content']
来接收从父组件传递过来内容，使用插值法显示：
<li >{{content}}</li> -
子组件到父组件
todolist有一个需求，点击列好的List可以删除。那么问题来了，我们的list数组是在父组件当中。而li中引索值，是在子组件当中。因此，我们需要由子组件向父组件传递引索值，才能在父组件中进行删除。
给li增加一个点击事件，触发一个函数：
<li @click="handleDelete">{{content}}</li>
使用this.$emit('delete', this.index)向父组件传递引索值
在父组件中，在父组件引用子组件的标签中使用一个绑定事件触发删除函数进行删除：
<todo-item @delete="handleDelete"> </todo-item>
handleDelete (index) {
this.list.splice(index, 1)
}
1.4 List数据的显示：
<todo-item v-for="(item, index) of list" ></todo-item>
list一开始为空，通过点击提交，触发一个添加的函数事件：
handleSubmit () {
this.list.push(this.inputValue);
this.inputValue = ''
}
以上就是这个项目的记录，特此记录，主要是为了弄清楚父子组件的通信，和使用脚手架的基本流程。
网友评论