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 ...
随机推荐
- sqlserver创建数据库
--指向当前要使用的master数据库,向master数据库中注册创建信息 use master go --创建数据库 create database StudentManageDB on prima ...
- 使用gulp压缩js详细步骤笔记
先要安装nodejs,初始化项目配置文件package.json,根据情况输入配置参数 npm init test command: git repository: keywords: author: ...
- ctags使用
1:安装ctags sudo apt-get install exuberant-ctags ctags --help 2:建立源码之间的组织关系: 1:ctags ./*.c -R 生成tags文件 ...
- .Net 大型分布式基础服务架构横向演变概述(转)
一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...
- solr defType查询权重排序
Solr的defType有dismax/edismax两种,这两种的区别,可参见:http://blog.csdn.net/duck_genuine/article/details/8060026 下 ...
- 初级安全入门—— WEBshell与文件上传漏洞
概念介绍 WebShell网页木马文件 最常见利用文件上传漏洞的方法就是上传网站木马(WebShell)文件,根据开发语言的不同又分为ASP木马.PHP木马.JSP木马等,该木马利用了脚本语言中的系统 ...
- linux：安装mysql管理工具phpmyadmin
1.下载phpmyadmin,下载地址:http://www.phpmyadmin.net/ 2.解压到/var/www/html/phpmyadmin/ 3.修改配置 cd /var/www/htm ...
- es6基础(7)--函数扩展
{ //有默认值的后面如果有参数必须要有默认值 function test(x,y="world"){ console.log(x,y) } test('hello');//hel ...
- day4作业（基本运算流程if for）
#coding:utf-8'''默写: 循环嵌套 必做: 1. 求1-100的所有数的和 2. 输出 1-100 内的所有奇数 3. 输出 1-100 内的所有偶数 5. 求1-2+3-4+5 ... ...
- 零基础学习python_类和对象（36-40课）
今天我们开始学习面向对象的知识咯,之前我对面向对象也学的懵懵的,因为感觉知道好像又不是特别清楚,接下来我们一起来学习类和对象吧.零基础的课程我都是看小甲鱼的视频学的,没基础的可以去这个网址下载视频学习 ...