一、文本

data

{{data}}

 <div id="div1">{{message}}</div>
<script>
var div1 = new Vue({
el: "#div1",
data: {
message:"Hello Vue.js!"
}
})
</script>

页面:

二、属性

data

v-bind:attr="data"

 <style>
.title{ width:300px; height:45px; background:#ffd800; border:1px solid #b6ff00; }
</style>
<div id="div2" v-bind:class="addClass" v-bind:title="addTitle"></div>
<script>
var div2 = new Vue({
el: "#div2",
data: {
addClass: "title",
addTitle:"这是一个div"
}
})
</script>

页面:

三、Html

data

v-html="data"

    <div id="div3" v-html="addHtml"></div>
<script>
var div3 = new Vue({
el: "#div3",
data: {
addHtml:"<input type='text' />"
}
})
</script>

页面:

四、用户输入数据

methods

v-model="data" +  {{data}}

<div id="input1">
<input type="text" v-model="info" />
<p>{{info}}</p>
</div>
<script>
var input1 = new Vue({
el: "#input1",
data: {
info:"请在此输入数据测试"
}
})
</script>

页面:

                   

五、监听事件

methods

v-on:Event="function"

<input id="input2" type="button" value="点击试试" v-on:click="clickTest" />
<script>
var input2 = new Vue({
el: "#input2",
methods: {
clickTest: function () {
alert("点击成功!");
}
}
})
</script>

页面:

【初始打开时】         【点击后】

六、过滤器

filters

{{data|function}}

<div id="div4">
{{message|Handle}}
</div>
<script>
var div4 = new Vue({
el: "#div4",
data: {
message:885
},
filters: {
Handle: function (val) {
return val + "+ 500=" + (val + 500);
}
}
})
</script>

接收将表达式中的第一个值,作为方法的一个参数传入,并返回值。用于过滤某个值得表现形式或对其进行格式化

页面:

进价多参,多值传递过滤

<div id="div4">
{{message|moreVal(10,20)}}<br /><!--885+10+20=915-->
{{message|transmit(20)|moreVal(10,20)}}<!--905+10+20=935 , 解析:905=885+20-->
</div>
<script>
var div4 = new Vue({
el: "#div4",
data: {
message: 885
},
filters: {
Handle: function (val) {
return val + "+ 500=" + (val + 500);
},
moreVal: function (a, b, c) {
return a + "+" + b + "+" + c + "=" + (a + b + c);
},
transmit: function (arg1, arg2) {
return arg1 + arg2;
}
}
})
</script>

说明:过滤器会接收多次传递,默认将表达式的第一个值,参数传递给下一个的表达式,就这样依次传递,直到最后一个

解析:{{message|Handle}}

将message作为参数传递给Handle,Handle带入过滤器方法然后返回结果:885+ 500=1385

解析:{{message|moreVal(10,20)}}

将message作为参数传递给moreVal,并默认传递第二参数为10,第三参数为20,moreVal带入过滤器方法然后返回结果:885+10+20=915

解析:{{message|transmit(20)|moreVal(10,20)}}

将message作为参数传递给transmit,并默认传递第二参数为20,transmit带入过滤器方法然后返回结果:905

将transmit返回结果905,继续传递给moreVal,并默认传递第二参数为10,第三参数为20,moreVal带入过滤器方法然后返回结果:905+10+20=935

页面:

Vue.js_数据绑定的更多相关文章

  1. vue 双向数据绑定的实现学习(二)- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  2. vue 双向数据绑定的实现学习(一)

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  3. vue双向数据绑定的简单实现

    vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. Vue双向数据绑定原理分析(转)

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  5. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

  6. vue.js数据绑定

      语法         插值             双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}}        表达式(各种数值,变量,运算符的综合体)     ...

  7. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  8. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  9. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

随机推荐

  1. win10 清理winsxs文件夹

    dism /online /cleanup-image /startcomponentcleanup /resetbase

  2. sql between写法关于查时间区间是否重叠

    --判断是否重叠 SELECT * FROM TABLEName WHERE starttime BETWEEN '2008-10-01' AND '2008-10-07' OR endtime BE ...

  3. Hadoop 集群搭建 mark

    Hadoop 集群搭建 原创 2016-09-24 杜亦舒 性能与架构 性能与架构 性能与架构 微信号 yogoup 功能介绍 网站性能提升与架构设计 目标 在3台服务器上搭建 Hadoop2.7.3 ...

  4. sql自动增长标识(转载)

    sql自动增长标识   对于一个设了自动增长标识的数据表来说,它的字段的值是由数据库自动设置的:这在导数据时很麻烦.   当我们导数据时,我们往往想想将标识字段的数据也导进来,怎么办呢?   方法有两 ...

  5. Redis 5种数据类型,2种特殊数据处理策略

    5种数据类型 String [html] view plaincopy 1.String   经常使用命令:   除了get.set.incr.decr mget等操作外,Redis还提供了下面一些操 ...

  6. https证书最佳实战目录

    [svc]openssl对称加密,非对称加密最佳实战 http://blog.csdn.net/iiiiher/article/details/78593464 [svc]证书的生成和各个字段的含义 ...

  7. phpcms 模板学习

    1.phpcms\modules\content 里面可以自己定义常量变量,常量在魔板不用$,变量要用2.\phpcms_v9_UTF8\caches\configs system.php 设置魔板是 ...

  8. python练习题4-判断日期是一年的第几天

    题目:输入某年某月某日,判断这一天是这一年的第几天? 程序分析:以3月5日为例,应该先把前两个月的加起来,然后再加上5天即本年的第几天,特殊情况,闰年且输入月份大于2时需考虑多加一天: 程序源代码: ...

  9. rsync--数据镜像备份_转

    转载:rsync的配置使用 Rsync全称为remoterynchronization,rsync具有可使本地和远程两台主机之间的数据快速复制同步镜像.远程备份的功能,这个功能类似于scp命令,但优于 ...

  10. 【iOS越狱开发】如何将应用打包成.ipa文件

    在项目开发中,我们常常需要将工程文件打包成.ipa文件,提供给越狱的iphone安装. 下面是一种方法: 1.首先应该给工程安装好配置文件(这里不再敖述),在ios device的状态下,运行成功. ...