1.启动项目：npm run start
在vue-cli的介绍这篇文章中提到，启动项目使用的npm run dev命令，为什么这里使用npm run start 也可以启动项目呢
- 我们查看package.json文件
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
即：
当我们执行dev命令时，我们启动的是webpack-dev-server，webpack-dev-server 就会使用 build 目录下的资源来处理静态资源的请求，将我们的代码运行起来；
当我们执行start命令时，其实本质就是帮助我们再去运行了一下npm run dev命令
2.编写代码以及注意事项
- <template>标签
标签中只能有一个<div>标签在最外层包裹，无论写了多少的<div>等其他标签 在他们的最外层都需要有一个<div>标签来机型包裹
- <script>标签
当我们写一个组件的数据时，data应该是一个函数，它的返回值才是我们所需要的数据export default { data: function () { return { inputValue: '' } } }
简化写法：
export default {
data () {
return {
inputValue: ''
}
}
}
当我们需要为我们的模板绑定方法是，即
<button @click="handleSubmit">提交</button>
此时我们需要将handleSubmit放到export default的methods中，写法如下：
methods: {
handleSubmit () {
alert(123)
}
}
注意：
当我使用this.对数据进行操作时，例如this.list ，这时vue会帮助我们从data中去找到变量list，即this.list和 this.$data.list是相同含义，我们在使用时直接使用this.即可对data中的数据进行操作,当data中不存在该变量是，vue还会在computed中继续寻找
- 在当前组件中使用其他局部组件
1.导入组件
import TodoItem from './components/TodoItem'
2.注册，并使用todo-item标签进行引用
export default {
components: {
'todo-item': TodoItem
},
3.父组件向子组件中传值
<ul>
<todo-item
v-for="(item,index) of list" //item为list中的每一项
:content="item" //将item通过content传给子组件
></todo-item>
</ul>
4.子组件接收父组件传入的值
（1）使用props声明变量content
export default {
props: ['content']
}
（2）模板中直接调用content
<li>{{content}}</li>
5.子组件给父组件传值，删除功能的实现
(1)子组件中，使用this.$emit触发父组件的方法，并传入参数
this.$emit('delete', this.index) //delete为需要触发的方法 ，index为需要删除的数据的index值
（2）在父组件中监听子组件触发的delete方法，当监听到后执行父组件的对应方法
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete" //当监听到delete方法时，执行父组件的handleDelete方法，进行删除操作
></todo-item>
- 全局样式和局部样式
<style scoped> style标签使用scoped关键字表示样式为局部样式，只作用于当前组件
