Vue 组件和计算属性(二)

news2024/11/15 1:53:01

一、组件

1.1 什么是组件

        组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织。

        例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

1.2 第一个 Vue 组件

        注意:在实际开发中,我们并不会用以下方式开发组件,以下方法只是为了让大家理解什么是组件。

1.2.1 说明:

        Vue.component():注册组件

        my-component-li:自定义组件的名字

        template:组件的模板

<body>
  <div id="app">
    <ul>
      <!--有点类似于自定义标签-->
      <my-component-li></my-component-li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
  </script>
  <script>
    // 先创建组件
    Vue.component('my-component-li',{
          template:'<li>Hello world</li>'
    })
    // 再实例化 vue
    var vm = new Vue({
      el:"#app"
    })
  </script>
</body>

1.3 使用 props 属性传递参数

        像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用 props 属性了!

1.3.1 注意:

        默认规则下 props 属性里的值不能为大写

1.3.2 说明:

        v-for="item in items" :遍历 Vue 实例中定义的名为 items 的数组,并创建同等数量的组件。

        v-bind:myprop="item" :将遍历的 item 项绑定到组件中 props 定义的名为 myprop 属性上。

        = 号左边的 mypropprops 定义的属性名,右边的为 item in items 中遍历的 item 项的值。

<body>
  <div id="app">
    <ul>
      <!--有点类似于自定义标签-->
      <my-component-li v-for="item in items" v-bind:myprop="item"></my-component-li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
  </script>
  <script>
    Vue.component('my-component-li',{
          props:['myprop'],
          template:'<li>Hello {{myprop}}</li>'
    })
    var vm = new Vue({
      el:"#app",
      data:{
        items:['A','B','C']
      }
    })
  </script>
</body>

二、计算属性

        计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个属性其次这个属性有计算 的能力(计算是动词),这里的 计算 就是个函数。

        简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!

2.1 注意:

        methods computed 里的东西不能重名。

<body>
  <div id="app">
    <!--注意:一个是属性,一个是方法-->
    <p>调用当前时间的方法为:{{currentTime()}}</p>
    <p>当前时间的计算属性为:{{currentTime2}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
  </script>
  <script>
    Vue.component('my-component-li',{
          props:['myprop'],
          template:'<li>Hello {{myprop}}</li>'
    })
    var vm = new Vue({
      el:"#app",
      data:{
        message:'Hello Vue'
      },
      methods:{
        currentTime:function(){
          return Date.now()
        }
      },
      computed:{
        // currentTime2 这是一个属性,不是方法
        currentTime2:function(){
          this.message;
          return Date.now()
        }
      }
    })
  </script>
</body>

2.2 说明:

        methods:定义方法,调用方法使用 currentTime(),需要带括号。

        computed:定义计算属性,调用属性使用 currentTime2,不需要带括号;this.message 是为了能够让 currentTime2 观察到数据变化而变化。

        如果在方法中的值发生了变化,则缓存就会刷新!可以在控制台使用 vm.message="qinjiang" 改变下数据的值,再次测试观察效果。

2.3 结论

        调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销。

三、插槽

        在 Vue 中我们使用 <slot> 元素,作为承载分发内容的出口,作者称其为插槽,可以应用在组合组件的场景中。

        比如准备制作一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该如何操作呢?

3.1 定义一个待办事项的组件

<body>
  <todo></todo>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
  </script>
  <script>
    // 定义一个待办事项的组件
    Vue.component('todo', {
      template: '<div>\
                    <div>待办事项</div>\
                    <ul>\
                      <li>学习狂神说Java</li>\
                    </ul>\
                 </div>'
     });
  </script>
</body>

3.2 留出插槽

        我们需要让待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽。在上面的代码中留出一个插槽即可,如下所示:

<body>
  <todo></todo>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
  </script>
  <script>
    // 定义一个待办事项的组件
    Vue.component('todo', {
      template: '<div>\
                    <slot name="todo-title"></slot> \
                    <ul>\
                     <slot name="todo-items"></slot> \
                    </ul>\
                 </div>'
     });
  </script>
</body>

        定义一个名为 todo-title 的待办标题组件和 todo-items 的待办内容组件,如下所示:

    Vue.component('todo-title',{
      props:['title'],
      template: '<div>{{title}}</div>'
    });
    // 这里的 index,就是数组的下标,使用 for 循环遍历的时候,可以循环出来!
    Vue.component('todo-items',{
      props:['item','index'],
      template: '<li>{{index+1}}.{{item}}</li>'
    });

        实例化 Vue 并初始化数据

    var vm = new Vue({
      el:'#app',
      data:{
        title:'你的兴趣爱好',
        todoItem:['唱歌','跳舞','打篮球']
      }
    })

        将这些值通过插槽插入

<div id="app">
  <todo>
    <todo-title slot="todo-title" v-bind:title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in todoItem" :key="item" v-bind:item="item" v-bind:index="index"></todo-items>
  </todo>
</div>

        说明:我们的 todo-title todo-items 组件分别被分发到了 todo 组件的 todo-title todo-items 插槽中。

3.3 自定义事件

        通过以上代码不难发现,数据项在 Vue 的实例中,但删除操作要在组件中完成,那么组件如何才能删除 Vue 实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用 this.$emit('自定义事件名', 参数),操作过程如下:

        在 vue 的实例中,增加 methods 对象并定义了一个名为 removeTodoItems 的方法

    var vm = new Vue({
      el:'#app',
      data:{
        title:'你的兴趣爱好',
        todoItem:['唱歌','跳舞','打篮球']
      },
      methods:{
        // 该方法可以被模板中自定义事件触发
        removeTodoItems:function(index){
          console.log("删除 " + this.todoItem[index] + " 成功");
          // splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
          // 其中 index 为添加/删除项目的位置,1 表示删除的数量
          this.todoItem.splice(index, 1);
        }
      }
    })

        修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件!

    Vue.component('todo-items',{
      props:['item','index'],
      template: '<li>{{index+1}}.{{item}} <button v-on:click="remove_component">删除</button></li>',
      methods:{
        remove_component:function(index){
          this.$emit('remove', index);
        }
      }
    });

        修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到 vue 的方法中! 

<!--增加了 v-on:remove="removeTodoItems(index)" 自定义事件,该事件会调用 Vue 实例中定义的名为 removeTodoItems 的方法-->
   <todo-items slot="todo-items" v-for="(item,index) in todoItem" :key="item" v-bind:item="item" v-bind:index="index"
    v-on:remove="removeTodoItems(index)"></todo-items>

3.4 逻辑理解

四、Axios

4.1 为什么要用 Axios

        由于 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以 Vue.js 并不包含 AJAX 的通信功能,为了解决通信问题,作者单独开发了一个名为 vue-resource 的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery,因为它操作 Dom 太频繁!

4.2 第一个Axios 程序

        我们开发的接口大部分都是采用 JSON 格式,可以先在项目里模拟一段 JSON 数据,数据内容如下:创建一个名为 test.json 的文件并填入上面的内容,放在项目的根目录下。

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space,bilibili.com/95256449"
    },
    {
      "name": "狂伸说iava",
      "ur1": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

        测试代码:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--v-cloak 解决闪烁问题-->
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <div>名称:{{info.name}}</div>
  <div>地址:{{info.address.country}}-{{info.address.city}}-
    {{info.address.street}}</div>
  <div>链接:<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<!-- 引入 js 文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message:"Hello Vue"
    },
    data(){
      return {
        info:{
          name: null,
          address: {
            country: null,
            city: null,
            street: null
          },
          url: null
        }
      }
    },
    mounted(){
      axios.get("../test.json").then(response => (this.info = response.data));
    }
  })
</script>
</body>

4.3 说明

        1、我们在这里使用了 v-bind a:href 的属性值与 Vue 实例中的数据进行绑定

        2、使用 Axios 框架的 get 方法请求 Ajax 并自动将数据封装进了 Vue 实例的数据对象中

        3、我们在 data 中的数据结构必须要和 Ajax 响应回来的数据格式匹配。

五、Vue 的生命周期

        Vue 实例有一个完整的生命周期,也就是从开始创建初始化数据编译模板挂载 DOM渲染更新渲染卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。

        在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/824501.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue + element UI Table 表格 利用插槽是 最后一行 操作 的边框线 不显示

在屏幕比例100%时 el-table添加border属性 使用作用域插槽 会不显示某侧的边框线&#xff0c;屏幕比例缩小或放大都展示 // 修复列的 边框线消失的bug thead th:not(.is-hidden):last-child {right:-1px;// 或者//border-left: 1px solid #ebeef5; } .el-table__row{td:not(.i…

Docker 容器转为镜像

# 容器转成镜像并指定镜像名称与版本号 # commit 时原有容器挂载的目录是不会被写入到新的镜像中去的&#xff0c;数据卷相关的都不会生效 # 但是 root 目录下新建的内容会写入到新的镜像中去 $ docker commit 容器ID 新镜像名称:版本号 $ docker commit -m"描述信息"…

2023年电赛---运动目标控制与自动追踪系统(E题)OpenMV方案

前言 &#xff08;1&#xff09;废话少说&#xff0c;很多人可能无法访问GitHub&#xff0c;所以我直接贴出可能要用的代码。此博客还会进行更新&#xff0c;先贴教程和代码 &#xff08;2&#xff09;视频教程&#xff1a; https://singtown.com/learn/49603/ &#xff08;3&a…

大数据技术之Clickhouse---入门篇---数据类型、表引擎

星光下的赶路人star的个人主页 今天没有开始的事&#xff0c;明天绝对不会完成 文章目录 1、数据类型1.1 整型1.2 浮点型1.3 布尔型1.4 Decimal型1.5 字符串1.6 枚举类型1.7 时间类型1.8 数组 2、表引擎2.1 表引擎的使用2.2 TinyLog2.3 Memory2.4 MergeTree2.4.1 Partition by分…

华为OD机试真题 JavaScript 实现【取出尽量少的球】【2023Q1 200分】,附详细解题思路

目录 一、题目描述游戏规则如下&#xff1a;限制规则一&#xff1a;限制规则二&#xff1a; 二、输入描述三、输出描述四、解题思路五、JavaScript算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 刷的越多&#xff0c;抽中…

《golang设计模式》第一部分·创建型模式-04-抽象工厂模式(Abstract Factory)

文章目录 1. 概述1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1. 概述 1.1 角色 AbstractFactory&#xff08;抽象工厂&#xff09;&#xff1a;它声明了一组用于创建产品的方法&#xff0c;每一个方法对应一种产品。ConcreteFactory&#xff08;具体工厂&#xf…

phpstudy 进行 composer 全局配置

背景 因为注意到&#xff0c;使用 phpStudy 进行环境搭建时&#xff0c;有时需要使用 composer 每次都需要查找资料进行配置&#xff0c; 在此进行记录笔记&#xff0c;方便有需要的道友借鉴 配置 版本&#xff1a;composer1.8.5&#xff08;phpStudy8 当前只能安装这一个版本…

CAD批量转PDF的简单方法,三个步骤轻松完成转换

PDF格式的图纸可以在各种设备和软件上打开&#xff0c;因为PDF是一种跨平台的格式&#xff0c;不受操作系统或软件版本的影响。这意味着CAD图纸可以更容易地在不同的设备和操作系统之间传输&#xff0c;而无需担心兼容性问题&#xff0c;可以使图纸更易于共享、浏览和保护&…

Vue进阶(幺叁陆): transition标签实现页面跳转动画

文章目录 一、前言二、方案实现三、延伸阅读 transition标签四、拓展阅读 一、前言 在Vue项目开发过程中&#xff0c;应用全家桶vue-router实现路由跳转&#xff0c;且页面前进、后退跳转过程中&#xff0c;分别对应不同的切换动画。vue-router 切换页面时怎么设置过渡动画&am…

Pytorch深度学习-----神经网络之非线性激活的使用(ReLu、Sigmoid)

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…

Doccano工具安装教程/文本标注工具/文本标注自己的项目/NLP分词器工具/自然语言处理必备工具/如何使用文本标注工具

这篇文章是专门的安装教程&#xff0c;后续的项目创建&#xff0c;如何使用&#xff0c;以及代码部分可以参考这篇文章&#xff1a; NER实战&#xff1a;(NLP实战/命名实体识别/文本标注/Doccano工具使用/关键信息抽取/Token分类/源码解读/代码逐行解读)_会害羞的杨卓越的博客-…

【uniapp 样式】使用setStorageSync存储历史搜索记录

<template><view><view class"zhuangbox u-flex"><u--inputplaceholder"请输入关键字搜索"border"surround"shapecircleprefixIcon"search"prefixIconStyle"font-size: 22px;color: #909399"v-model&q…

vSphere ESXI 7.0 网络规划

ESXi 网络 业务网络、Vmotion&#xff08;漂移&#xff09;、管理网络、存储网络 ESXi 管理网络 vCenter Server 管理网络 vCenter Server SSO域名 Single Sign-on域名&#xff1a;在没有指定的情况下&#xff0c;默认填写 vsphere.local VMware vSphere整体解决方案和网络…

uniapp点击图片放大预览

阐述 有些时候我们在用uniapp显示图片时&#xff0c;有的不宜全部显示到屏幕上&#xff0c;uniapp提供了一个非常好用的api。 实现方式如下&#xff1a; <template><view class"content"><image class"logo" src"/static/images/a.…

Nacos 持久化实例 删不掉问题( Please unregister instance first )

文章目录 一、报错现象&#xff1a;二、问题解决过程&#xff1a;三、最终解决方案&#xff1a;四、注销实例API&#xff1a; &#x1f50e;请直接看第三部分&#x1f50e; 一、报错现象&#xff1a; 二、问题解决过程&#xff1a; 尝试将服务下线&#xff1a; 再次点击删除按…

如何在水务行业运用IPD?

水务行业&#xff0c;包括自来水的生产和供应、水务及其再生利用和其他水的处理、利用与分配。水务行业主要环节分布包括原水生产与供应、自来水生产和供应、污水收集、水务、中水与再生水利用等。 我国水务行业的产业链包括上游、中游、下游。上游包括科研和规划设计、设备及材…

英雄的力量【力扣2681】

1、解题思路 将数组按从大到小的顺序排列&#xff0c;i<j&#xff0c;那么以nums[i]开始&#xff0c;nums[j]结尾&#xff0c;i----j中的任意数&#xff0c;组成的排列&#xff0c;其英雄力量都是nums[i]*nums[i]*nums[j]&#xff1b; 若ij&#xff0c;则只有一种排列组合…

SOC FPGA之流水灯设计

一、DS-5简介 Altera Soc EDS开发套件的核心是Altera版ARM Development Studio 5(DS-5)工具包&#xff0c;为SoC器件提供了完整的嵌入式开发环境、FPGA自适应调试和对Altera工具的兼容。 1.1 DS-5 eclipse破解 首先下载破解器 然后进入cmd运行&#xff0c;进入到破解器所在文…

AndroidBanner - ViewPager

解决banner 不可见依旧轮播的问题 思考一下&#xff1a;什么时候可以轮播&#xff0c;什么时候不可以轮播 当Banner添加到屏幕上&#xff0c;且对用户可见的时候&#xff0c;可以开始轮播 当Banner从屏幕上移除&#xff0c;或者Banner不可见的时候&#xff0c;可以停止轮播 当…

排序进行曲-v2.0

小程一言 这篇文章是在排序进行曲1.0之后的续讲&#xff0c; 0之后的续讲,英语在上一篇讲的排序的基本概念与分类0之后的续讲, 英语在上一篇讲的排序的基本概念与分类这片主要是对0之后的续讲,英语在上一篇讲的排序的基本概念与分类这 篇主要是对几个简单的排序进行细致的分析…