一、文本

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. 特征组合&特征交叉

    https://segmentfault.com/a/1190000014799038 https://www.jianshu.com/p/fc96675b6f8e https://blog.csdn ...

  2. chrome 脚本学习

    # 编写可复用的代码段(snippet)教程 https://jingyan.baidu.com/article/67508eb423d2929ccb1ce45b.html # chrome 脚本开发 ...

  3. laravel的模板嵌套循环可以这样调试

    @foreach($first as $value) {{ dump($value) }} @endforeach

  4. jQuery remove 内存 释放

    解决方案(伪代码):(http://www.cnblogs.com/see7di/archive/2011/09/08/2239653.html)jQuery( “*”, obj).add([obj] ...

  5. Atitit.故障排除系列---NoClassDefFoundError  NoClassDefFoundError ClassNotFoundException

    Atitit.故障排除系列---NoClassDefFoundError  NoClassDefFoundError ClassNotFoundException 1. java.lang.Class ...

  6. 开源Bug管理系统Redmine安装和使用心得

    最终忍受不了公司使用论坛+Excel来进行bug反馈和管理工作了,于是花了一个上午时间研究了下bug管理系统.这样一个bug管理系统能够轻松的查看bug新增了哪些,攻克了哪些.当前是谁,要在什么时间解 ...

  7. modbus学习

  8. ExtJS TreeGrid的使用方法

    假设您是第一次使用ExtJS的TreeGrid的话,我相信总会有一些小麻烦的,以下就来说一说ExtJS中TreeGrid的使用. 本人使用的ExtJS版本号为4.1.1,而且使用了MVC模式.假设不了 ...

  9. SonarQube代码质量管理平台安装与配置

    1.安装说明 操作用户:root 软件下载目录:/root/opt 无root权限时,放到自定义目录即可 ================ 2.预置条件 1.需要JDK1.6+支持: 2.需要Mysq ...

  10. java程序调用kettle

    (1).将相应的kettle的jar包导入的java项目,主要的jar包有一下几个. (2).java程序. package cn.com.taiji.oosweb.test.web; import ...