1.什么是组件

  • 组件是可复用的Vue实例，也就是一组可以复用的模版，类似JSTL的自定义标签。

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

2.第一个Vue组件

　　注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

1.使用 Vue.component() 方法注册组件,格式如下：

  • Vue.componet()：注册组件
  • props属性：用来传递参数，注意：默认规则下props属性里的值不能为大写
  • first_component：自定义组件的名字
  • template：自定义组件需要执行的模版

说明：

  • v-for="item in items" ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件
  • v-bind:item="item" ：将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上；= 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.  <!--view层模块-->
  9.  <div id="vue">
  10.  
  11.      <!--组件：传递给组件中的值：props-->
  12.      <first_component v-for="item in items" v-bind:com="item"></first_component>
  13.  </div>
  14.  
  15.  <!--导入Vue.js-->
  16.  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  17.  <script type="text/javascript">
  18.  
  19.      //定义一个Vue组件
  20.      Vue.component("first_component", {
  21.          props: ["com"],
  22.          template: "<li>{{com}}</li>"
  23.      })
  24.  
  25.      let vm = new Vue({
  26.          el: '#vue',
  27.          data: {
  28.              items: ["java", "C++", "C#", "Python", "PHP"]
  29.          },
  30.  
  31.      });
  32.  </script>
  33.  </body>
  34.  </html>

5.Vue的组件的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  6. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  7. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  8. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  9. 为什么VUE注册组件命名时不能用大写的？

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

  10. vue的组件化运用（数据在两个组件互传，小问题总结）

    一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...

随机推荐

  1. RocketMQ支持事务消息机制

    事务消费 我们经常支付宝转账余额宝,这是日常生活的一件普通小事,但是我们思考支付宝扣除转账的钱之后,如果系统挂掉怎么办,这时余额宝账户并没有增加相应的金额,数据就会出现不一致状况了. 上述场景在各个类 ...

  2. k8s web终端连接工具

    k8 web terminal 一个k8s web终端连接工具,在前后端分离或未分离项目中心中,也可以把此项目无缝集成,开箱即用. 项目地址:https://github.com/jcops/k8-w ...

  3. 解决 cannot find reference 'LSHForest' in '__init__.py'

    from sklearn.neighbors import LSHForest cannot find reference 'LSHForest' in '__init__.py'报错 pip3 li ...

  4. mysql float类型详解

    mysql float类型详解float类型长度必须设置3以上 不然会报错 out of range如果设置3 就只是 整数+小数的长度 比方说3.23 3.2等等 3.333就不行了 4位了

  5. MyBatis 构造动态 SQL 语句

    以前看过一个本书叫<深入浅出 MFC >,台湾 C++ 大师写的一本书.在该书中写到这样一句话,“勿在浮沙筑高台”,这句话写的的确对啊.编程很多语言虽然相通,但是真正做还是需要认真的学习, ...

  6. 什么是IDE（集成开发环境）？

    实际开发中,除了编译器是必须的工具,我们往往还需要很多其他辅助软件,例如: 编辑器:用来编写代码,并且给代码着色,以方便阅读: 代码提示器:输入部分代码,即可提示全部代码,加速代码的编写过程: 调试器 ...

  7. Mybatis中的Mapper.xml映射文件sql查询接收多个参数

    ​ 我们都知道,在Mybatis中的Mapper.xml映射文件可以定制动态SQL,在dao层定义的接口中定义的参数传到xml文件中之后,在查询之前mybatis会对其进行动态解析,通常使用#{}接收 ...

  8. 端口快速扫描程序（c#版 一次可发起1000个连接）

    前言 为了探测本机或对方开放了哪些端口,需要用到端口扫描程序.扫描端口的原理很简单:就是尝试连接对方:如果成功,对方就开放了此端口.扫描程序的关键是速度,如果一次只能发起几个连接,显然速度太慢.如果对 ...

  9. Java中配置文件的三种配置位置及读取方式

    XML 和properties properties: 1.存放于src根目录下 //获取到同包下的资源文件,将其转换成流对象 //InputStream is= PropertiesDemo.cla ...

  10. Linux文本文件——文本编辑器Vim

    Linux文本文件——文本编辑器Vim 摘要:本文主要学习在Linux系统中使用Vim文本编辑器编辑文本. 什么是Vim Vim是一个基于文本界面的编辑工具,使用简单且功能强大.更重要的是,Vim是所 ...