【无标题】

insignificant555

于 2022-04-22 19:56:56 发布

阅读量166

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/qq_66351622/article/details/124353625

版权

本文通过一个待办事项列表的实例，详细介绍了Vue框架中的响应式布局和组件间通信。读者将学习如何创建Vue组件，实现输入值的响应式更新，以及使用`v-model`和`v-on`指令在父组件与子组件之间传递值。通过这个例子，读者可以掌握Vue的基础应用，并能创建一个动态的待办事项列表，支持添加和删除任务。

摘要由CSDN通过智能技术生成

学习目标：

Vue框架学习

学习内容：

响应式与自适应布局区别
Vue组件间值传递

学习产出：

技术笔记
网页博客
组件间值传递demo代码：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>toDoList</title>
      <script src="./vue.js"></script>
  </head>
  <body>
      <div id="app">
          <input type="text" v-model='inputValue' />
          <button v-on:click="handleBtnClick">提交</button>
          <ul>
              <todo-item
                  v-bind:content="item"
                  v-bind:index="index"
                  v-for="(item,index) in list"
                  @delete="handleItemClick">
              </todo-item>
          </ul>

      </div>

      <script>
          
           //Vue.component("TodoItem",{
          //    props:['content'],
         //     template:"<li>{{content}}</li>",
        //})//全局组件

          var TodoItem={
              props:['content','index'],
              template:"<li @click='handleItemClick'>{{content}}</li>",
              methods:{
                  handleItemClick:function(){
                      this.$emit("delete",this.index);
                  }//子组件 向父组件传值，在父组件中加上@delete监听子组件的delete事件；
              }
          }//局部组件

          var app = new Vue({
              el:'#app',
              components:{
                  TodoItem:TodoItem
              },
              data:{
                  list:[],
                  inputValue:''
              },
              methods:{
                  handleBtnClick:function(){
                      this.list.push(this.inputValue);
                      this.inputValue = ''
                  },
                  handleItemClick:function(index){
                     this.list.splice(index,1)
                  }
              }
          })
      </script>
  </body>
</html>

运行输入框输入值，点击提交加载到列表，点击列表的数据可删除；在这里插入图片描述