First, enter the project directory and start the project npm run start / npm run dev with the command [please refer to the package.json file in the project directory]

(where the x.vue file is a single file component)

Next, change the single file component x.vue

Note that the vue syntax requires that the. vue file, in the < template > tag, contain only one root element.

First, write the structure in the template:

<template>
  <div>
    <div>
      <input />
      <button>Submission</button>
    </div>
    <div>
      <ul>
      </ul>
    </div>
  </div>
</template>

Then, data binding:

Among them, data in vue cli, as a component, data exists as a function, no longer as before, as an object. The return value of the function is the specific data.

<script>
  export default{
    data () {
      return {
        inputValue: ''
      }
    }
  }
</script>

Data binding:

<template>
  <div>
    <div>
      <input v-model='inputValue'/>
      <button @click='handleSubmit'>Submission</button>
    </div>
    <div>
      <ul>
      </ul>
    </div>
  </div>
</template>

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

ul li component split

Different from before, Vue cli splits components: use xxx.vue under components in src directory

Reference this component:

<template>
  <div>
    <div>
      <input v-model='inputValue'/>
      <button @click='handleSubmit'>Submission</button>
    </div>
    <div>
      <ul>
        <todo-item></todo-item>
      </ul>
    </div>
  </div>
</template>

<script>
  import TodoItem from './components/Todoitem'
  export default{
    // Local components
    components:{
      'todo-item': TodoItem
    },
    data () {
      return {
        inputValue: '',
        list: []
      }
    },
    methods:{
      handleSubmit (){
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }
</script>

Todo list passing values to subcomponents

<template>
  <div>
    <div>
      <input v-model='inputValue'/>
      <button @click='handleSubmit'>Submission</button>
    </div>
    <div>
      <ul>
        <todo-item
          v-for='(item,index) of list'
          :content="item"
        ></todo-item>
      </ul>
    </div>
  </div>
</template>

<script>
  import TodoItem from './components/Todoitem'
  export default{
    // Local components
    components:{
      'todo-item': TodoItem
    },
    data () {
      return {
        inputValue: '',
        list: []
      }
    },
    methods:{
      handleSubmit (){
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }
</script>

In the subcomponent, declare the attribute to be used, and use the interpolation expression to use:

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

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

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

</style>

To delete a subcomponent:

Subcomponent file:

<template>
  <li @click="handleDelete">{{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 scoped>

</style>

Parent component file:

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

<script>
  import TodoItem from './components/Todoitem'
  export default{
    // Local components
    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>