一、文本

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. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  2. android实现下拉框(spinner),自己定义大小颜色背景位置,去掉默认样式黑边

    1. 实现最简单的spinner xml文件,有一个TextView,一个Spinner: <RelativeLayout xmlns:android="http://schemas. ...

  3. hash slot(虚拟桶)

    在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小. round robin算法:是把数据mod后直接映射到真 ...

  4. 微信小程度腾讯地图SDK使用方法

    在开发过程中,不少人肯定遇到过要用到地图,那么在小程序里,腾讯也给出了相应的SDK供我们来使用.那么接下来,就介绍下如何使用该SDK实现获取经纬度然后显示当前用户所在地址 首先第一步:下载腾讯地图SD ...

  5. Java 堆内存

    堆内存 Java 中的堆是 JVM 所管理的最大的一块内存空间,主要用于存放各种类的实例对象. 在 Java 中,堆被划分成两个不同的区域:新生代 ( Young ).老年代 ( Old ).新生代 ...

  6. Selenium操作之滚动条

    在用Selenium做UI自动化时,经常会遇到有些元素找不到之类的问题,但是自己的代码并没有错,元素就是找不到,这是为什么呢?原因很简单,由于页面内容较多,有些内容需要下拉滚动条才会显示,这里介绍一种 ...

  7. Powershell对象选择,排序和变量存储

    PowerShell基础教程(17)——对象的选择.排序和变量存储 可以使用 Select-Object cmdlet 来创建新的.自定义的 Windows PowerShell 对象,后者包含的属性 ...

  8. PHP——上传头像(2)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【转帖】关于sql server 2008 的mdf收缩问题

    原帖地址:http://social.msdn.microsoft.com/forums/windowsazure/pt-br/388f92e1-9a1e-497d-bde1-6664561fd44e ...

  10. spring+mybatis+javafx

    @Service用于标注业务层组件 @Controller用于标注控制层组件(如struts中的action) @Repository用于标注数据访问组件,即DAO组件. @Component泛指组件 ...