您现在的位置是:首页 > 编程 > 

【Vue 从入门到实战 进阶式掌握完整知识体系】0

2025-07-24 00:00:26
【Vue 从入门到实战 进阶式掌握完整知识体系】0 4、使用 Composition API 开发TodoList实现简单的添加列表代码语言:javascript代码运行次数:0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

【Vue 从入门到实战 进阶式掌握完整知识体系】0

4、使用 Composition API 开发TodoList

实现简单的添加列表
代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    setup(){
      ct { ref, reactive } = Vue;
      ct inputValue = ref('大哥刘备');
      ct list = reactive([]);
      ct handleClick = () => {
        list.push(inputValue.value);
      }
      return {
        inputValue,
        list,
        handleClick
      }
    },
    template: `
    <div>
      <div>
        <input v-model="inputValue" />
        <button @click="handleClick">添加</button>
      </div>
      <ul>
        <li v-for="(item, index) in list" :key="item">{{item}} -- {{index}}</li>
      </ul>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-20210615224606092
封装优化

代码全写在 setup 里面非常臃肿,且可读性差,不易维护

代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // 封装处理 list 的方法
  ct handleList = () => {
    ct { reactive } = Vue;
    ct list = reactive([]);
    ct addItem = (item) => {
      list.push(item);
    }
    return{ list, addItem }
  }

  // 封装处理 inputValue 的方法
  ct handleInputValue = () => {
    ct { ref } = Vue;
    ct inputValue = ref('大哥刘备');
    return{ inputValue }
  }

  ct app = ({
    setup(){
      ct { list, addItem} = handleList();
      ct { inputValue } = handleInputValue();

      return {
        list, addItem, inputValue
      }
    },
    template: `
    <div>
      <div>
        <input v-model="inputValue" />
        <button @click="() => addItem(inputValue)">添加</button>
      </div>
      <ul>
        <li v-for="(item, index) in list" :key="item">{{item}} -- {{index}}</li>
      </ul>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-2021061520521841
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。 原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent 删除开发入门apicompositionvue

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址:http://www.dnpztj.cn/biancheng/1199996.html

相关标签:无
上传时间: 2025-07-23 17:30:10
留言与评论(共有 11 条评论)
本站网友 安全隐患
18分钟前 发表
reactive } = Vue; ct inputValue = ref('大哥刘备'); ct list = reactive([]); ct handleClick = () => { list.push(inputValue.value); } return { inputValue
本站网友 失眠最好的治疗方法
11分钟前 发表
template
本站网友 永川美食
16分钟前 发表
且可读性差
本站网友 地胆草
15分钟前 发表
initial-scale=1.0"> <title>了解循环</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ setup(){ ct { ref
本站网友 门头沟房屋出租
4分钟前 发表
initial-scale=1.0"> <title>了解循环</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ setup(){ ct { ref
本站网友 陈皮副作用
18分钟前 发表
不易维护 代码语言:javascript代码运行次数:0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友 丸美化妆品
25分钟前 发表
template
本站网友 玄参的功效
7分钟前 发表
且可读性差
本站网友 玄武租房
13分钟前 发表
inputValue } }
本站网友 霸王花3
12分钟前 发表
且可读性差