web前端的学习日志(2)

Vue.js的学习过程

第二天的学习

安装vue-cli （前提是要安装好node.js和npm）
打开命令行窗口，输入`

npm install --global vue-cli   //全局安装

安装完成后，创建项目，输入

vue init webpack my-project   //创建一个基于webpack模板的新项目，名字叫作my-project

之后进入项目目录，运行

cd my-project
npm run dev      //也可以是npm run start

下面再用vue-cli做一遍上一次做的对todolist的添加和删除
对TodoList.vue根实例进行修改

<template>
  <div>
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list"
      :key = "index"
      :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: '',        //与vue中data的不同之处，data要写成函数的形式了
      list: []
    }
  },
  methods: {
    handleSubmit () {
      this.list.push(this.inputValue)
      this.inputValue = ''
    },
    handleDelete (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style>

</style>

对TodoItem.vue组件进行修改

<template>
  <li class="greeen" @click="handleClick">{{content}}</li>
</template>

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

<style scoped>        /*不加scoped就是全局样式*/
  .item{
    color: green;
  }

</style>

与之前vue的不同不同之处在于，data要写成函数形式，返回值是具体内容，引用组件要加上import TodoItem from ‘./components/TodoItem’