使用前端组件化思想修改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 前端组件化的痛点在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟 ...
随机推荐
- Task2 四则运算2
1.任务要求:对之前的自动出题系统提出了新的要求:(1).题目避免重复:(2).可定制(数量/打印方式):(3)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...
- xml命名空间
https://yq.aliyun.com/articles/40353 ************************************* 摘要: 相信很多人和我一样,在编写Spring或者 ...
- 深入理解Java类加载器(2)
1 基本信息 每个开发人员对Java.lang.ClassNotFoundExcetpion这个异常肯定都不陌生,这背后就涉及到了java技术体系中的类加载.Java的类加载机制是技术体系中比较核心的 ...
- ps -aux 命令下的前几行内容解释 与 top命令下的前几行内容解释
系统进程分为5种不同的状态: R(运行):正在运行或在运行队列中等待 S(中断):休眠中,在等待某个条件的形成或接受到信号 D(不可中断):收到信号不唤醒和不可运行.进程必须等待直到有中断发生 Z(僵 ...
- java杂项
简单介绍==和equals区别==是判断两个变量或实例是不是指向同一个内存空间equals是判断两个变量或实例所指向的内存空间的值是不是相同 final, finally, finalize的区别fi ...
- scrapy-scrapy如何打开页面？[转]
一.首先我们来看scrapy spider如何打开页面: 要打开页面,我们用的是手,同样scrapy也有一个得力助手:spider:至于spider如何打开页面,且听我娓娓道来,如果一上来就噼里啪啦的 ...
- windows版本 rac 报错信息
原因 - 安装程序无法在一个或多个节点上执行指定的脚本.这可能是由于在节点上执行脚本时出现异常错误. 操作 - 有关详细信息, 请查看日志文件 'C:\Users\ADMINI~1\AppData\L ...
- Android Holo Theme的三种表现形式
摘录自:http://blog.csdn.net/xyz_lmn/article/details/12000941 Holo Theme的三种表现形式 Holo Theme是android4.0开始提 ...
- Vue 小组件input keyup.enter绑定
<div id="todo-list-example"> <input v-model="newTodoText" v-on:keyup.en ...
- PHP导出sql文件
发现自己之前写的php导出sql数据为Excel文件在导出一些数据的时候出现了精度的问题,比如导出身份证号的时候会把后面变成0000.暂时先把这个问题留下,有空去看看到底是什么问题. 写了一个导出sq ...