使用前端组件化思想修改todolist
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todolist</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<input type="text" name="" id="" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
<!-- 把li标签里的内容整体变成一个组件 -->
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- v-bind:向子组件传递一个绑定值 -->
<todo-item v-bind:content="item" v-for="item in list">
</todo-item>
</ul>
</div> <script>
// Vue.component('TodoItem', {
// props: ['content'], //从父组件接收的内容
// template: '<li>{{content}}</li>',
// }); //vue提供的创建全局组件的方法 //注册局部对象
var TodoItem = {
props: ['content'], //定义接收外部传递过来的数据
template: '<li>{{content}}</li>', //子组件的模板
}; var app = new Vue({
el: '#app',
components: {
TodoItem: TodoItem, //把局部组件注册到实例中
},
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function() {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
</script>
</body> </html>
使用前端组件化思想修改todolist的更多相关文章
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- 前端组件化Polymer入门教程(1)——初识&&安装
前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...
- 基于layui的框架模版，采用模块化设计，接口分离，组件化思想
代码地址如下:http://www.demodashi.com/demo/13362.html 1. 准备工作 编辑器vscode,需要安装liveServer插件在前端开启静态服务器 或者使用hbu ...
- 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- AppBoxFuture(六): 前端组件化开发
前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端 ...
- 如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
- 前端组件化Polymer深入篇(1)
在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...
- 前端组件化-Web Components【转】
以下全部转自:http://www.cnblogs.com/pqjwyn/p/7401918.html 前端组件化的痛点在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟 ...
随机推荐
- 第一次Sprint计划
目标: 各成员先学习基于eclipse开发android应用软件的基本技术(砍柴要先磨刀,工具都没怎么做) 先弄一个简单的四则运算答题功能看看程序是否能在手机上运行 (以上为冲刺一内容) 时间: 5月 ...
- 【CSAPP笔记】13. 链接
下面就要进入本书的第二部分--在系统上运行程序.书的第一部分,主要是研究单个应用程序,关注的是数据类型.机器指令.程序性能.存储器系统等话题.在书的第二部分,我们继续对计算机系统的探索.现代操作系统与 ...
- 结对项目-四则运算出题程序（GUI版）
目录: 一.致搭档(含项目地址) 二.PSP(planning) 三.结对编程中对接口的设计 四.计算模块接口的设计与实现过程 五.计算模块接口部分的性能改进 六.计算模块部分单元测试展示 七.计算模 ...
- ReentrantLock 和 Condition的使用
ReentrantLock ReentrantLock可以等同于synchronized使用. ReentrantLock 类实现了Lock ,它拥有与 synchronized 相同的并发性和内存 ...
- Linux操作系统（一）
操作系统:介于硬件与用户之间的一组程序,方便用户操作,用以管理计算机的所有活动及硬件资源. 1.硬件->内核->系统调用(shell.命令)->应用程序. 只要具备以下几点,即可称为 ...
- httpclient的get和post
pom.xml <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId&g ...
- PHP 常用函数总结（二）
4.PHP处理数据库的常用函数. 汇总表 PHP 5 MySQLi 函数 函数 描述 mysqli_affected_rows() 返回前一个 Mysql 操作的受影响行数. mysqli_autoc ...
- C++中sizeof操作符与strlen函数
sizeof操作符: sizeof是一个操作符,返回一条表达式或一个类型名字所占的字节数.返回值一个常量表达式,类型为size_t. size_t sizeof(type) size_t sizeof ...
- vue 组件 模板中根数据绑定需要指明路径并通信父
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...
- 检测web服务器指定位置大文件是否存在
在bugscan群里看到有人问有一个大文件,想探测其是否存在.如果使用curl的话,会将整个文件下载到节点,对于扫描没有任何用处,反而浪费了扫描时间. 于是我想到的解决办法是不使用curl,直接用底层 ...