在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。

<div id="app0">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div> <script>
Vue.component('todo-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
}); var vm = new Vue({
el:"#app0",
data:{
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
});
</script>

Vue语法学习第四课(1)——组件简单示例的更多相关文章

  1. Vue语法学习第四课(2)——class与style的绑定

    之前学到的指令 v-bind 在用于绑定class和style时,表达式结果可以是字符串.数组.对象. 一.绑定HTMLClass ① 对象语法 <div class="static& ...

  2. Vue语法学习第五课——条件渲染

    ① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...

  3. Vue语法学习第三课——计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...

  4. Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介)

    原文:Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介) 版权声明:本文为博主原创文章,遵循CC 4.0 BY ...

  5. QML从文件加载组件简单示例

    QML从文件加载组件简单示例 文件目录列表: Project1.pro QT += quick CONFIG += c++ CONFIG += declarative_debug CONFIG += ...

  6. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  7. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  8. java gRPC四种服务类型简单示例

    一.gRPC 简介 gRPC 是Go实现的:一个高性能,开源,将移动和HTTP/2放在首位通用的RPC框架.使用gRPC可以在客户端调用不同机器上的服务端的方法,而客户端和服务端的开发语言和 运行环境 ...

  9. Vue语法学习第一课——插值

    学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 <span>Message:{{msg}}</span> 注:双大括号中的m ...

随机推荐

  1. python实现列表去重的方法

    >>> l=[,,,,,,] >>> list(set(l)) [, , , ] >>>

  2. Kafka作为大数据的核心技术,你了解多少?

    Kafka作为大数据最核心的技术,作为一名技术开发人员,如果你不懂,那么就真的“out”了.DT时代的快速发展离不开kafka,所以了解kafka,应用kafka就成为一种必须. 什么是kafka?K ...

  3. 因为没有安装xcode,得不到xcode证书报错

    新接的一个项目.在从gitlab上clone代码的时候报错: Agreeing to the Xcode/iOS license requires admin privileges, please r ...

  4. Linux 安装 Rabbit MQ

    安装socat yum -y install socat 下载erlang软件包,本文使用erlang-19.0.4版本,下面给出下载链接 wget http://www.rabbitmq.com/r ...

  5. Kafka 1.0.0集群安装

    环境 主机名 IP 地址 安装路径 系统 sht-sgmhadoopdn-01 172.16.101.58 /opt/kafka_2.12-1.0.0 /opt/kafka(软连接) CentOS L ...

  6. HDU 3月ACM模拟赛T10 COUNT

    题面 //来自TKJ的友好提供 ^_^ 然后我又被卡了半天不知道怎么转移N3 于是听CWY给我讲 终于会了 (虽然他讲的不是很清楚QAQ 但是凭着我们之间根本不存在的默契竟然达成了心智联通) 重点在于 ...

  7. VUE + vue-cli + webpack 创建新项目(2)

    上一篇其实没写完. 好吧这一篇其实也没啥. 就补充一些上一篇没写完的.(随时害怕笔记本丢失的人) 上一篇写完了登录验证的跳转,这一片首先补充一下接口(?). 在使用axios的过程中,我们家后台表示你 ...

  8. ie11兼容

    项目里遇到ie11的问题, 1.控制台报:SCRIPT7002: XMLHttpRequest: 网络错误 0x80070005, 拒绝访问. 后来发现是由于传参过长,不应该用get请求,后改成pos ...

  9. cron 配置

    一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...

  10. 2015-10-29 ado.net 1

                                                                   ADO.NET 一.什么是ado.net ADO.NET是一组允许.NET ...