Todolist功能开发
一、属性绑定和双向数据绑定：
v-bind:title 或简写成 :title实现title属性绑定；
v-model实现双向数据绑定（双向是指：当数据变了，input的value会改变；当input的value变了，数据content也会跟着变）
二、计算属性、侦听器、v-if、v-show、v-for
- 计算属性：computed指的是：一个属性经过其他属性计算而来
优点：当firstName和lastName的值不变时，fullName会使用上次计算属性的缓存结果。计算属性的性能是很高的，只有依赖fullName的数据变时，它才变。
- 侦听器：watch作用是监测某一数据或计算属性发生的变化。一旦发生变化，就可以在侦听器里写一些业务逻辑。
- v-if、v-show效果相同，但原理不同。
v-if是通过删除和创建dom元素来实现div元素的显示和隐藏，也就是控制dom的存在与否；v-show是通过设置display:block和display:none来实现的，也就是控制dom的显示与否。
如果需要频繁的显示和隐藏，那么使用v-show性能更优。如果只需要一次的显示隐藏，那么使用v-if更佳。
- v-for(循环展示)：用来控制一组数据，通过这组数据来循环显示出一些页面上的dom结构;
例如：要循环list这个数据项，每一次循环，会把对应的循环项的内容放到item这个变量里面去，循环展示li的时候，就可以把item的内容输出来
注：同时添加一个名字叫key的属性，可以提升每一页渲染的性能。它的值暂时可以取index,但是会有一定的问题，暂时留待解决。
三、一个简单的todolist功能开发
实现当在input框输入内容时，li列表项会显示相应的输入的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="inputValue"/> <!-- v-model实现双向数据绑定 -->
<button @click="handleSubmit">提交</button> <!-- 给button添加点击事件 -->
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
<!-- 循环list，把item里的内容展示出来 -->
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function(){
// 将input里的内容添加到list数组里
this.list.push(this.inputValue);
// 将input内容清空
this.content = ''
}
} })
</script>
</body>
</html>
效果图：
Todolist功能开发的更多相关文章
- Vue学习之todolist功能开发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 3-1 todolist功能开发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 8个必备的PHP功能开发
这篇文章主要介绍了8个必备的PHP功能开发,需要的朋友可以参考下 PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得心应手,本文将分享8个开发必备的PH ...
- [5] 微信公众号开发 - 微信支付功能开发（网页JSAPI调用）
1.微信支付的流程 如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...
- Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述—— 隐鹤 / HelloWorld
Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述———— 隐鹤 / HelloWorld 1. 引言 自本人第一篇博文“Excel阅读模式/单元格行列指示/聚光灯开发技术要 ...
- PHP多条件分类列表筛选功能开发实例
PHP多条件分类列表筛选功能开发实例,前后台一起实现 后台对接可以拼接sql语句,PHP通过表单值隐藏值筛选,常用又实用! 表单筛选核心函数 function Filter(a, b) { var $ ...
- 微信公众号开发 [05] 微信支付功能开发（网页JSAPI调用）
1.微信支付的流程 如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...
- 后台商品搜索功能开发SQL
在做后台的商品搜索功能开发时遇到了一些问题记录下来 版本一 <select id="SelectByNameAndParentId resultMap="Base_resul ...
- C# 注册机功能开发，机器码设计
前言 本文将使用一个NuGet公开的组件技术来实现机器码注册码功能开发,提供了一些简单的API,来方便的实现. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet ...
随机推荐
- Linux常用指令之一
1.基础命令 ls --查看当前目录下的文件 cd --切换目录或者直接回到home目录 cd - --切换最近使用的两次目录 cd .. --切换到上一级目录 pwd ...
- Redis 实现问题
Redis和数据库的同步如何做? 设置redis中数据的过期时间(登录信息) 更新或修改数据库中数据的时候同时更新redis的 数据 使用MQ更新缓存数据 Redis的好处? 速度快:因为数据在内存中 ...
- Linux程序的执行
一.多任务协调机制 $ find /boot | cpio -ocB > /tmp/boot.img 程序执行方式——流式处理 “|”是匿名管道 管道分匿名管道,命名管道.匿名管道属于临时工,随 ...
- Keras之inception_v3使用
一.安装 必要:tensorflow,Keras 首次运行需要安装: 1)下载模型权重 inception_v3_weights_tf_dim_ordering_tf_kernels.h5 路径见 ...
- mybatis的插件，挺好支持下
利用 Mybatis-generator自动生成代码http://www.cnblogs.com/yjmyzz/p/4210554.html Mybatis 通用 Mapper3 https://gi ...
- 通过表达式树把datareader和datatable转换为实体
续上两篇文章,使用emit构造dynamic method,把 datareader转换为实体,以避免直接使用反射来实现带来的性能损失.代码看似没有纰漏,但是实际上我在framwork4下运行时,调用 ...
- CS229 6.4 Neurons Networks Autoencoders and Sparsity
BP算法是适合监督学习的,因为要计算损失函数,计算时y值又是必不可少的,现在假设有一系列的无标签train data: ,其中 ,autoencoders是一种无监督学习算法,它使用了本身作为标签以 ...
- Page Cache, the Affair Between Memory and Files.页面缓存-内存与文件的那些事
原文标题:Page Cache, the Affair Between Memory and Files 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限 ...
- MicroMsg.SDK.WXApiImplV10: register app failed for wechat app signature check failed
支付时: IWXAPI wxapi = WXAPIFactory.createWXAPI(this,WXAPPID,true); 替换为 IWXAPI wxapi = WXAPIFactory.cre ...
- JVM总结-Java 虚拟机是怎么识别目标方法（上）
重载与重写 在 Java 程序里,如果同一个类中出现多个名字相同,并且参数类型相同的方法,那么它无法通过编译.也就是说,在正常情况下,如果我们想要在同一个类中定义名字相同的方法,那么它们的参数类型必须 ...