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安装jsvc，及Linux服务开发
在linux上以服务的方式启动java程序,需要提前安装jsvc.linux是利用daemon(jsvc)构建java守护进程. 编译 daemon 安装JSVC 1 下载文件,http://comm ...
- 使用gulp压缩js详细步骤笔记
先要安装nodejs,初始化项目配置文件package.json,根据情况输入配置参数 npm init test command: git repository: keywords: author: ...
- 第11章 拾遗3：虚拟局域网(VLAN)
1. 虚拟局域网(VLAN) (1)VLAN是建立在物理网络基础上的一种逻辑子网,它将把一个LAN划分成多个逻辑的局域网(VLAN),每个VLAN是一个广播域,VLAN内的主机间通信就和在一个LAN内 ...
- Http跨域
一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jQuery的json ...
- Linux netstat命令查看并发连接数
netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 解释: 返回结果示例: LAST_ACK 5 (正在等待处理的 ...
- three.js学习：点光源+动画的实现
与前几个教程类似,场景和相机等设置就不再重复声明了.这里只列出新学的内容. 1.圆柱体(圆锥体)的初始化 function initObject() { var geometry = new THRE ...
- Vue-ui常用组件库整理
Vue-ui常用组件库整理 查看全部整理内容==> element-ui Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. 这款是我用了很久的, ...
- WPF 交替行背景属性
交替行背景色:RowBackground奇数行,AlternatingRowBackground偶数行 <!--#region 表格--> <DataGrid x:Name=&quo ...
- 初识IP基础分类、CIDR
IP地址概念 IP(IPv4)地址是一个32位的二进制数,通常被分割为4个“8位二进制数”(也就是4个字节).IP地址通常用“点分十进制”表示成(a.b.c.d)的形式,其中,a,b,c,d都是0~2 ...
- sqlserver 导入导出
待写 excel 导入 数字日期等导入为文本,在excel设置类型为文本再导入即可. Excel数字.文本混合列导入SQL Server出现的问题&解决办法 Excel文件: 序号 姓名 内部 ...