Vue.js(二)
时间:2019-10-26
本文章向大家介绍Vue.js(二),主要包括Vue.js(二)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一篇地址:https://www.cnblogs.com/autumn-starrysky/p/11741230.html
五、组件化应用构建
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
这一块是我目前看到的Vue的比较核心的部分,所以单独列出来进行整理。
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。首先在 Vue 中注册组件:
// 定义名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) var app = new Vue(...)
现在我们可以用它构建另一个组件模板:
<ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item> </ol>
但是这样会为每个待办项渲染同样的文本,这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。
这就需要引入 props :
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量,即其内容可以是动态的。 我们也需要为每个组件提供一个“key”,稍后再 作详细解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div>
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] } })
(看过前面的就知道这里依旧是图片哈哈哈,我还不知道怎么把我写的html传进来)
我的理解:首先定义了Vue新组件 todo-item ,然后自定义一个 props:['todo'] 特性,通过 v-bind 将 todo 绑定在 v-for 中的 item上,通过 v-for来循环调用并显示 groceryList 中的元素。
原文地址:https://www.cnblogs.com/autumn-starrysky/p/11743154.html
- 如何突破Windows环境限制打开“命令提示符”
- 【Spark研究】Spark之工作原理
- Java中泛型使用的必要性
- “一切都是消息”--MSF(消息服务框架)之【发布-订阅】模式
- Android基础总结(4)——广播接收器
- “一切都是消息”--MSF(消息服务框架)之【请求-响应】模式(点对点)
- “老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春
- 解决服务器SID引起虚拟机不能加入AD域用户,无法远程登录的问题
- 【Python环境】如何使用 Docker 快速配置数据科学开发环境?
- Java中UUID的2种创建方法——有代码实例
- 使用“消息服务框架”(MSF)实现分布式事务的三阶段提交协议(电商创建订单的示例)
- Android基础总结(3)——UI界面布局
- 常见.NET功能代码汇总 (2)
- 问题系列之Java中删除有序List的重复数据——提供两种方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 个性化终端 | zsh bash oh-my-zsh
- VirtualBox无限嵌套方法 | 虚拟机套娃
- Win10 LTSC 激活方法 | Win10专业版(永久激活)长期服务版 LTSC 2019密钥
- Nginx代理以及面向未来的HTTP
- git的基本使用
- 一、玩转Git三剑客-Git基础
- Docker和k8s的故障排除和监控利器 Weave-Scope服务
- docker 配置Consul+registrator实时服务发现
- 使用Docker搭建Zookeeper集群
- GDCRNATools内置的gdc-client不好用
- 字符编码与字符串表达式
- 关于批次效应矫正后出现负值
- 在SAP WebIDE里使用Fiori Elements快速开发SAP UI5应用
- SAP Fiori Elements里的Smart Table工作原理解析
- SAP Fiori Elements里Smart Link工作原理介绍