Vue组件_组件通信_todo案例

最新推荐文章于 2024-06-08 20:50:54 发布
最新推荐文章于 2024-06-08 20:50:54 发布
阅读量603 收藏 1
点赞数
文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinyue_1208/article/details/120481814
版权

01-组件-4步曲

案例用less写的样式, 所以下载

yarn add less less-loader@5.0.0 -D

模板标签

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" @click="isShow = !isShow">
          {
  { isShow ? '收起' : '展开' }}
        </span>
      </div>
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴, </p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>

 在componnents里新建Panel

/目标: 如何创建和使用组件

 1. 创建组件 -> 封装标签, 样式, js -> vue实例(脚手架环境, 我们采用.vue文件形式)

 2. 引入组件

import Panel from "./components/Panel";

 3. 注册组件 - 方法1(全局注册)

// 语法: Vue.component('组件名', 组件对象)

 3. 注册组件 - 方式2(局部注册)

    // 组件名: 组件对象

Panel.vue

<template>
  <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" @click="isShow = !isShow">
          {
  { isShow ? "收起" : "展开" }}
        </span>
      </div>
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
</template>

<script>
export default {
    data() {
    return {
      isShow: false,
    };
  },
}
</script>

<style scoped>
.title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
</style>

  App.vue

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <Pannel></Pannel>
    <Pannel></Pannel>
    <Pannel></Pannel>
  </div>
</template>

<script>
// 目标: 如何创建和使用组件
// 1. 创建组件 -> 封装标签, 样式, js -> vue实例(脚手架环境, 我们采用.vue文件形式)
// 2. 引入组件
import Panel from "./components/Panel";
// 3. 注册组件 - 方法1(全局注册)
// 语法: Vue.component('组件名', 组件对象)
// import Vue from 'vue'
// Vue.commponent('Pannel', Panel)
export default {
  // 3. 注册组件 - 方式2(局部注册)
  components: {
    // 组件名: 组件对象
    Pannel: Panel,
    // Panel: Panel
    // 组件名(key) 和 组件对象(value) 名字相同简写
    // Panel
  },
};
</script>

<style lang="less" scoped>
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
  }
}
</style>

图片显示

02-组件通信-父向子的基础使用

在componnents里新建MyProduct

 App.vue

<template>
  <div>
    <MyProduct title="超级好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></MyProduct>
    <MyProduct title="超级好吃的铁锅炖" price="300" intro="正宗的东北铁锅炖，嘎嘎好吃"></MyProduct>
    <MyProduct title="超级好吃的蛙锅" price="500" intro="好吃的停不下来，都来尝一尝吧"></MyProduct>
  </div>
</template>

<script>
// 目标: 组件通信
// 场景(口诀): 从某.vue文件, 向另外.vue文件 传值
// 使用: 
// 方法1: 父 -> 子（传值）
// 被引入的是儿子
// 语法:
// (1): 子组件内, props:[变量1, 变量2]
// (2): 父组件内, 在使用组件标签时, 向变量传值
import MyProduct from "./components/MyProduct";
export default {
  components: {
    MyProduct,
  },
};
</script>

<style>
</style>

MyProduct.vue

<template>
  <div class="my-product">
    <h3>标题: {
  { title }}</h3>
    <p>价格: {
  { price }}</p>
    <p>{
  { intro }}</p>
  </div>
</template>

<script>
export default {
  // (1): 子组件内定义变量
  // vue会把他们解析成变量的
  props: ["title", "price", "intro"],
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

组件通信-父向子-配合循环

App.vue

<template>
  <div>
    <MyProduct
      v-for="obj in list"
      :key="obj.id"
      :title="obj.proname"
      :price="obj.proprice"
      :intro="obj.info"
    ></MyProduct>
  </div>
</template>

<script>
// 目标: 组件配合循环使用
// v-for 每次循环是独立, 组件每创建一次独立
// 组件一般就用于展示数据的
import MyProduct from "./components/MyProduct";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  components: {
    MyProduct,
  },
};
</script>

<style>
</style>

MyProduct.vue

<template>
  <div class="my-product">
    <h3>标题: {
  { title }}</h3>
    <p>价格: {
  { price }}</p>
    <p>{
  { intro }}</p>
  </div>
</template>

<script>
export default {
  // (1): 子组件内定义变量
  // vue会把他们解析成变量的
  props: ["title", "price", "intro"],
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

组件通信-子向父

 在componnents里新建MyProduct_Sub

 App.vue

<template>
  <div>
    <MyProduct
      v-for="(obj, ind) in list"
      :key="obj.id"
      :title="obj.proname"
      :price="obj.proprice"
      :intro="obj.info"
      :index="ind"
      @subPrice="fn"
    ></MyProduct>
  </div>
</template>

<script>
import MyProduct from "./components/MyProduct_Sub";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  methods: {
    fn(ind, price) {
      // 数据源list里砍价
      let obj = this.list[ind];
      if (obj.proprice > 1) {
        // obj.proprice = (obj.proprice - price).toFixed(2)
        obj.proprice -= price;
      }
    },
  },
  components: {
    MyProduct,
  },
};
</script>

<style>
</style>

MyProduct_Sub

<template>
  <div class="my-product">
    <h3>标题: {
  { title }}</h3>
    <p>价格: {
  { price }}</p>
    <p>{
  { intro }}</p>
    <button @click="kanFn">砍一刀</button>
  </div>
</template>

<script>
// 目标: 砍一刀
// 结论: props的变量(只读的)
// 原因: 修改props变量值的时候,出现红色警告
// 我在子组件改props值也没用, 父组件重新渲染会把props的值覆盖

// 目标: 子向父传值
// 语法:
// (1): 父组件内, 给子组件标签 - 绑定自定事件
// @自定义事件名="父methods里函数名"
// (2): 子组件内, "恰当的时机"
// this.$emit('自定义事件名', 值)
// 效果: 触发此标签身上的对应事件名
export default {
  // (1): 子组件内定义变量
  // vue会把他们解析成变量的
  props: ["title", "price", "intro", "index"],
  methods: {
    kanFn() {
      // 把索引和砍得价格传给父组件
      this.$emit("subPrice", this.index, Math.random());
    },
  },
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

画图显示 

todo案例

1.todo案例-创建工程和组件

vue create todo-list  // 建工程

根据需求定义3个组件准备复用 

 components/TodoHeader.vue - 复制标签和类名

<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
export default {
 
}
</script>

components/TodoMain.vue - 复制标签和类名

<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li class="completed" >
      <div class="view">
        <input class="toggle" type="checkbox" />
        <label>任务名</label>
        <button class="destroy"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
}
</script>

components/TodoFooter.vue - 复制标签和类名

<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值</strong></span>
    <ul class="filters">
      <li>
        <a class="selected" href="javascript:;" >全部</a>
      </li>
      <li>
        <a href="javascript:;">未完成</a>
      </li>
      <li>
        <a href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" >清除已完成</b
最低0.47元/天 解锁文章
xinyue_1208
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
List<Map>转化为List工具类
08-17
一般使用springjdbc、hibernate的sql查询，库获取到的数据都是List<Map>结果集，如果我们要转化为JavaBean，则需要做一系列的map.get()，然后obj.set()。 此工程中就是解决List<Map>转化为JavaBean工具类实现
vue ---- 组件综合案例（购物车案例）
weixin_44235759的博客
11-16 689
获取数据 装包npm i axios -S,在app.vue中导入axios APP组件中获取数据的方法，和 生命周期函数 methods: { //封装请求列表数据的方法 async initCarList(){ //调用 axios 的get方法，请求列表数据 const {data:res} = await axios.get('https://www.escook.cn/api/cart')
Vue组件——弹框组件案例
沐小侠
04-22 2903
页面效果 实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>组件-弹框</title> <style> * { margin: 0; padding: 0; } .dialog { position: fixed; top: 0; left: 0; widt
vue2 学习之路 常见的指令！
Cxil的博客
11-22 598
文件夹 和 文件夹含义。主要的文件及其含义？node_modules 下载的第三方包 安装目录public/index.html 浏览器运行的网页src/main.js webpack打包的入口文件src/App.vue vue项目入口页面package.json 依赖包列表文件项目架构 了解eslint 工具是什么？eslint 是代码检查工具，违反规定就报错。可以通过在vue.config.js中 设置lintOnSave为false重启服务器即可单vue 文件的好处？
vue之简单组件例子
acyj68799的博客
07-26 177
<!-- 根组件 --> <!-- vue的模板内，所有内容要被一个根节点包含起来 --> <template> <div id="app"> <h2>这是vue的根目录</h2> <div>{{msg}}</div> <v-ho...
Vue组件的实例里面常见的都有什么？
不断学习的兔纸
04-12 706
每个export default里都有很多方法，今天复习了常用的一些。 数据相关的有： 包括props、data状态，自定义方法，计算属性，监听。 <template> <div> <div>路由传递参数{{id}}</div> <div @click="show">控制台打印</div> ...
Day04_vue组件_组件通信_todo案例(1).pdf
05-03
Day04_vue组件_组件通信_todo案例(1).pdf
vue记事本案例（父子组件通信）
08-20
新实现了新增待办，删除待办（一键清空），待办数量统计和持久化存储
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
vue-cron表达式组件
vue3_todo_list
04-17
todo_demo项目设置yarn install编译和热重装以进行开发yarn serve编译并最小化生产yarn build整理和修复文件yarn lint自定义配置请参阅。vue3_todo_list
vue组件中实现嵌套子组件案例
10-14
主要介绍了vue组件中实现嵌套子组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 之孙组件向爷组件通信的实现
10-17
主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3的todoList案例
weixin_45956230的博客
09-27 922
vue3的练习demo 1、todo.vue 父组件 <template> <!--子传父用自定义事件，父传子用自定义属性--> <todo-header @addTask="addTask"></todo-header> <todo-list :arrTask="arrTask" @delTask="delTask"></todo-list> </template> <script> //引入两
Vue3组件间的9种通信方式（含例子）
小卡拉米的博客
01-25 1106
Vue3组件间的9种通信方式
vue组件的实例使用
马优晨
04-03 7052
在项目开发中，我们有必要将一些公共模块封装成组件。 例如下图： 看到这个样式，我们一定会想，下面三条数据一定是后台返回给前端一个数组，然后我们遍历出来。 第一种做法: 直接在页面去遍历这个数组，然后把三条数据展示出来。 第二种做法： 封装一个一条数据时候的组件，然后在页面遍历这个组件。 实际开发中我们采用的是第二种方式，哪有人一定会问了，第一种多简单，干嘛用第二种。 ...
Page 分页之 Entity to Domain
dandanforgetlove的专栏
08-03 1075
分页类 public class Page<T extends Serializable> implements Serializable { private static final long serialVersionUID = 1L; private int page; private int pageSize; private int pages; private long total; private List<T> ro
Vue 实现小小记事本
如诗
05-08 3286
1、实现效果 用户输入后按回车，输入的内容自动保存，下方会显示记录的条数，鼠标移动到文字所在div上，会显示删除按钮，点击按钮，相应记录会被删除，下方的记录条数会相应变化，点击clear，所有记录会被删除。效果如下： 2、实现思路 先写出记事本的基本样式，在vue实例中的data对象里定义list数组，以及message的初始值。通过 v-model实现input标签文本和message...
CSS-总结
weixin_30500105的博客
11-19 66
------------------------------------css的四种引入方式--------------------------------------------------------------------------------------------- ------------------------常见块级标签(div,from,table,p,pre,h1-h...
Spring Boot、MongoDB、Vue 2和Nginx实现一个小说网站
最新发布
iku_n的博客
06-08 868
后端API：使用Spring Boot实现，负责处理数据和业务逻辑。数据库：使用MongoDB存储小说数据。前端页面：使用Vue 2实现，负责展示数据和用户交互。反向代理：使用Nginx进行前后端分离。
vue侧边栏组件_画布侧边栏Vue组件
06-03
你想了解如何实现一个画布侧边栏的 Vue 组件，是吗？那我可以给你一些思路和建议。 首先，你需要确定侧边栏的功能和布局。画布侧边栏通常用于放置一些工具、选项和设置，以便用户可以轻松地对画布进行操作和调整。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值