一、属性绑定和双向数据绑定：

　　　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功能开发的更多相关文章

  1. Vue学习之todolist功能开发

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 3-1 todolist功能开发

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 8个必备的PHP功能开发

    这篇文章主要介绍了8个必备的PHP功能开发,需要的朋友可以参考下 PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得心应手,本文将分享8个开发必备的PH ...

  4. [5] 微信公众号开发 - 微信支付功能开发（网页JSAPI调用）

    1.微信支付的流程 如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...

  5. Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述—— 隐鹤 / HelloWorld

    Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述———— 隐鹤  /  HelloWorld 1. 引言 自本人第一篇博文“Excel阅读模式/单元格行列指示/聚光灯开发技术要 ...

  6. PHP多条件分类列表筛选功能开发实例

    PHP多条件分类列表筛选功能开发实例,前后台一起实现 后台对接可以拼接sql语句,PHP通过表单值隐藏值筛选,常用又实用! 表单筛选核心函数 function Filter(a, b) { var $ ...

  7. 微信公众号开发 [05] 微信支付功能开发（网页JSAPI调用）

    1.微信支付的流程 如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...

  8. 后台商品搜索功能开发SQL

    在做后台的商品搜索功能开发时遇到了一些问题记录下来 版本一 <select id="SelectByNameAndParentId resultMap="Base_resul ...

  9. C# 注册机功能开发，机器码设计

    前言 本文将使用一个NuGet公开的组件技术来实现机器码注册码功能开发,提供了一些简单的API,来方便的实现. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet ...

随机推荐

  1. [UE4][Canvas]用C++代码绘制血条(HealthBar)

    转自:http://aigo.iteye.com/blog/2275110 参考自Epic官方项目StrategyGame 血条效果: StrategyHUD.h StrategyHUD.cpp

  2. linux系统添加指定uid和gid的用户和组

    1.添加指定gid的组 groupadd -g 1001 upload # 添加了一个指定gid为1001的upload用户 2.添加指定uid的用户,并加入到指定组 useradd -u 1001 ...

  3. Java调用Jenkins接口实现远程发版

    主要有以下几个要点: 1.在 Manage Jenkins 中设置Configure Global Security(主要是设置CSRF Protection中的prevent cross site ...

  4. Docker Basic

    1.简介 last 1.简介 1.1目的?一次编译.到处运行: 1.2.是什么? 实现[运行环境和配置文件的]软件容器,方便[持续集成]实现[整体发布]的容器虚拟化技术: 概括:整体发布的[容器虚拟化 ...

  5. LeetCode 3. longest characters & 切片

    Longest Substring Without Repeating Characters 找无重复的最长子串 第1次提交 class Solution: def lengthOfLongestSu ...

  6. [Unity算法]斜抛运动(变种)

    之前的斜抛运动,如果运动到游戏中,显然是太呆板了,那么可以试着加入一些效果,让它看起来更生动一些,类似游戏中的击飞或者掉落效果: 1.在达到最高点的时间点±X的时间段内,会有“减速”效果,形成一种在空 ...

  7. mysql 替代Oracle instr

    在迁移项目时遇到的,原项目的数据库使用的Oracle,现在要迁移到MySQL中,而项目中用到了Oracle的instr函数,而MySQL只能查找子串是否在父串中,没法按照出现的次数进行查找. 先来介绍 ...

  8. 配置Eclipse的Maven环境

  9. gzip1

    经过GZIP压缩后页面大小可以变为原来的30%甚至更小.要实现GZIP压缩页面需要浏览器和服务器共同支持, 实际上就是服务器压缩,传到浏览器后浏览器解压并解析.浏览器那边不需要我们担心,因为现在绝大多 ...

  10. hive执行报错：Both left and right aliases encountered in JOIN 's1'

    原因:两个表join的时候,不支持两个表的字段 非相等 操作. 可以把不相等条件拿到 where语句中. 例如: right JOIN test.dim_month_date p2 on p1.mon ...