Vue语法学习第四课(1)——组件简单示例

在 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>

原文地址:https://www.cnblogs.com/zhuxingqing/p/10502150.html

时间: 2024-09-30 07:10:57

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

RPC学习----Thrift快速入门和Java简单示例

一.什么是RPC? RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. RPC协议假定某些传输协议的存在,如TCP或UDP,为通信程序之间携带信息数据.在OSI网络通信模型中,RPC跨越了传输层和应用层.RPC使得开发包括网络分布式多程序在内的应用程序更加容易. 二.什么是Thrift? thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和

Vue.js学习笔记(7)组件详解

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记(5)tabs组件和Tree升级版(实现省市多级联动) 先给大家看下小颖写了一个简单的组件示例: 组件: <template> <div class='content' v-if='showFlag'> <input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='m

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

全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> <g

Web前端学习-第四课HTML篇

Q10:什么是DTD?有多少种DTD?其分别使用环境?多种DTD的好处和坏处? DTD(Document Type Definition文档定义类型):可定义合法的XML文档构建模块,它使用一系列合法的元素来定义文档的结构:可被成行的声明于xml文档中,也可作为一个外部引用. DTD是一套关于标记符的语法规则,他是标准通用标记语言和可扩展标记语言1.0版规格的一部分,是文档的验证机制,他是保证标准通用标记语言和可扩展标记语言文档格式正确的有效方法,可通过比较文档和文档类型定义文件来看文档是否符合

vue个人学习(四)----生命周期

生命周期: beforeCreate          组件实例刚刚被创建,属性都没有 created                  实例已经创建完成,属性已经绑定 beforeMount          模板编译之前 mounted               模板编译之后,代替之前ready * beforeUpdate        组件更新之前 updated               组件更新完毕 * beforeDestroy      组件销毁前 destroyed    

C#基本语法学习(四)

重载 一个方法的名字和方法的参数列表称为方法的签名.C#根据方法签名来识别方法,如果两个方法签名不同那么他们就是两个不同的方法. 重载可以是方法重载(包括构造函数重载)和运算符重载.方法重载指的是一组名字相同而参数列表不同的方法.但方法的返回值类型不同不能构成重载. 1 public static int max(int a, int b) 2 { 3 4 } 5 6 public static int max(int a, int b, int c) 7 { 8 9 } C#中除了方法可以重载

【ios开发学习 - 第四课】UIButton使用

一.创建 两种方法: 1. 常规的 initWithFrame 源码打印? UIButton *btn1 = [[UIButton alloc]initWithFrame:CGRectMake(10, 10, 80, 44)]; 对代码创建View(UIControl继承自UIView,所以也是view)不甚了解的请参看: <有关View的几个基础知识点> 2. UIButton 的一个类方法(也可以说是静态方法)buttonWithType 源码打印? UIButton *btn2 = [U

RCEL Linux学习第四课

这节课学的内容比较多,都是Linux比较初级的知识点,直接上图. 原文地址:https://blog.51cto.com/4250232/2473341

javascript学习第四课函数

常用函数方式示例: 注意:虽然函数支持嵌套调用,但尽量少用好一些. 简单的效率测试方法: 函数的作用域示例,三种生成函数对比: 函数的形参与实参: 小结: