vue-cli的使用

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关键字表示样式为局部样式，只作用于当前组件