草庐IT

第三方组件element-ui

折诗 2023-03-28 原文

第三方组件element-ui

组件间的传值

  • 组件可以由内部的Data提供数据,也可以由父组件通过prop的方式传值。
  • 兄弟组件之间可以通过Vuex等统一数据源提供数据共享。
  1. 由data提供数据:
<template>
    <div>
        <h1>{{title}}</h1>
        <h2>{{score}}</h2>
    </div>
</template>

<script>
export default {
    name:"Movie",
    data:function(){
        return{
            title: "金刚",
            score: "3"
        }
    }
}
</script>

<style>

</style>
  1. 通过props传值,props声明的是自定义的属性,其对应一个列表,可以任意定义属性的名称,然后其他组件就可以使用这个属性并且赋值了,并且这个值会被传递会父组件,而且这个属性可以被渲染到模板里面(template)去。



  1. 多组数据的情况,使用v-for指令
<template>
  <div id="app">
    <!--一定要有key属性,而且是唯一性地,其他属性都从movies中获取-->
    <movie v-for="movie in movies" :key="movie.id" :title="movie.title" :score="movie.score"></movie>
  </div>
</template>

<script>
import Movie from './components/Movie.vue'

export default {
  name: 'App',
  data:function(){
    return {
      movies:[
        {id:1, title:"哪吒1", score:9.1},
        {id:2, title:"哪吒2", score:9.2},
        {id:3, title:"哪吒3", score:9.3}
        
      ]
    }
  },
  components: {
    Movie
  }
}
</script>

element-ui介绍

  • Element是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了Vue、React、Angular等多个版本。

  • 文档地址:组件 | Element

  • 引入Element:

第三方图标库:Font Awesome

  • 由于Element UI提供的字体图标比较少,一般会采用其他图标库,如Font Awesome
  • Font Awesome提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括大小、颜色、阴影或者其他任何支持的效果。
  • 文档地址:http://fontawesome.dashgame.com/
  • 安装:npm install font-awesome
  • 使用:import 'font-awesome/css/font-awesome.min.css' //在main.js中导入
<i class="fa fa-pencil" style="color: blue"></i>

有关第三方组件element-ui的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  3. ruby - 尝试比较两个文本文件,并根据信息创建第三个 - 2

    我有两个文本文件,master.txt和926.txt。如果926.txt中有一行不在master.txt中,我想写入一个新文件notinbook.txt。我写了我能想到的最好的东西,但考虑到我是一个糟糕的/新手程序员,它失败了。这是我的东西g=File.new("notinbook.txt","w")File.open("926.txt","r")do|f|while(line=f.gets)x=line.chompifFile.open("master.txt","w")do|h|endwhile(line=h.gets)ifline.chomp!=xputslineendende

  4. ruby-on-rails - 如何使用 grape swagger ui 传递数组? - 2

    我在下面定义了api端点:paramsdorequires:ids,type:Array,desc:'Arrayofgroupids'end我无法从Swagger生成的UI传递数组。如果我输入[1,2,3,4]或ids%5b%5d=1&ids%5b%5d=2&ids%5b%5d=3然后两者都无效.如果我使用数组调用spec中的api,它就可以工作。我的客户想尝试Swagger的整个api,所以我想要一个适用于SwaggerUI的解决方案。 最佳答案 我对所有情况的解决方案:paramsdorequires:ids,type:Arra

  5. jquery - Sprockets::FileNotFound - 找不到文件 'jquery.ui' - 2

    这个问题已经被问过几次了,但我尝试了提供的解决方案,但仍然没有帮助,所以我提出了一个新问题。gem文件gem'jquery-ui-rails'按照建议,我将gem放在:assets组之外Application.css~*=require_self*=requirejquery.ui*=requirebootstrap-datepicker*=requirejquery.timepicker*=require_tree.*/RailsAssetPipeline根据列出的顺序加载Assets。在这里,我把它排在列表的第2位。Application.css.scss*=require_sel

  6. jquery - 'jquery-rails' 和 'jquery-ui-rails' 可以在一个项目下管理吗? - 2

    我有一个Rails应用,使用Rails5.1.6和ruby2.3.5p376我的Gemfile中有这两个gemgem'jquery-rails','~>4.3.3'gem'jquery-ui-rails','~>6.0.1'在show.html.erb中我有以下内容:$(function(){$("#datepicker").datepicker();});Date:在application.js中//=requirejquery-ui//=requirejquery//=requirerails-ujs//=requireturbolinks//=require_tree.在appl

  7. Handler在UI线程与子线程中的使用 - 2

    Handler在UI线程与子线程中的使用一、Handler基本概念Handler:其作用是在新启动的线程中发送消息,在主线程中获取和处理消息。Message:Handler接收和处理的消息对象。MessageQueue:消息队列,采用先进先出的方式来管理Message。由Looper对象进行管理,在程序创建Looper对象时,会在它的构造方法中创建MessageQueue对象,两者是相互依存的。Looper:每个线程只能拥有一个Looper对象。它在loop()方法会不断在MessageQueue中读取Message消息,分给对应的Handler来进行处理。二、Handler使用步骤在主线程中

  8. ruby-on-rails - Rails 4 - Mailer deliver_later 没有按照我的预期进行,阻止了 UI - 2

    我有一个Rails应用程序,其中有一个功能可以发送很多电子邮件。我想以异步方式的方式进行,并且我认为deliver_later方法可以做到这一点。目前,从用户单击submit到提交表单,我有一些延迟-这会导致糟糕的用户体验(这是一个非常简单的表单)。我的实现如下所示:defcreaterespond_todo|format|if@competition.save[...]send_notification_to_team_membersendenddefsend_notification_to_team_members@team.members.eachdo|member|unless

  9. 续集来了丨UI自动化测试(二):带视频,实在RPA高效进行web项目UI自动化测试 - 2

    一、什么是web项目ui自动化测试?通过测试工具模拟人为操控浏览器,使软件按照测试人员的预定计划自动执行测试的一种方式,可以完成许多手工测试无法完成或者不易实现的繁琐工作。正确使用自动化测试,可以更全面的对软件进行测试,从而提高软件质量进而缩短迭代周期。二、构建测试用例的“九部曲”(一)创建流程包划分功能模块日常测试活动中,都会根据功能模块进行拆分,所以在设计器中我们可以通过创建流程包的方式来拆分需要测试的功能模块,如下图中操作创建一个电脑流程包并且取名为对应的功能模块名称,如果有多个功能模块就创建多个对应的流程包,实在RPA设计器有易用的图形可视化界面,方便管理较多的功能模块。(二)在流程包

  10. ruby - 绕过 Element 的方法无法滚动到 View 中 - Watir-webdriver with Ruby - 2

    因此,我们的页面中有以下代码:OnOff这是2个单选按钮。'开和关'。“关闭”是默认值。使用Watir-webdriver和Ruby,我们想要选择“打开”单选按钮。我们这样做:browser.radio(:id=>"HasRegistration_true").set但在这样做时,我们得到以下错误:`WebElement.clickElement':Elementcannotbescrolledintoview:[objectHTMLInputElement](Selenium::WebDriver::Error::MoveTargetOutOfBoundsError)我们知道Sele

随机推荐