Vue.js_数据绑定
一、文本
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_数据绑定的更多相关文章
- vue 双向数据绑定的实现学习(二)- 监听器的实现
废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- vue双向数据绑定的简单实现
vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue双向数据绑定原理分析(转)
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
- vue.js数据绑定
语法 插值 双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}} 表达式(各种数值,变量,运算符的综合体) ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- vue双向数据绑定最最最最最简单直观的例子
vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
随机推荐
- 特征组合&特征交叉
https://segmentfault.com/a/1190000014799038 https://www.jianshu.com/p/fc96675b6f8e https://blog.csdn ...
- chrome 脚本学习
# 编写可复用的代码段(snippet)教程 https://jingyan.baidu.com/article/67508eb423d2929ccb1ce45b.html # chrome 脚本开发 ...
- laravel的模板嵌套循环可以这样调试
@foreach($first as $value) {{ dump($value) }} @endforeach
- jQuery remove 内存 释放
解决方案(伪代码):(http://www.cnblogs.com/see7di/archive/2011/09/08/2239653.html)jQuery( “*”, obj).add([obj] ...
- Atitit.故障排除系列---NoClassDefFoundError NoClassDefFoundError ClassNotFoundException
Atitit.故障排除系列---NoClassDefFoundError NoClassDefFoundError ClassNotFoundException 1. java.lang.Class ...
- 开源Bug管理系统Redmine安装和使用心得
最终忍受不了公司使用论坛+Excel来进行bug反馈和管理工作了,于是花了一个上午时间研究了下bug管理系统.这样一个bug管理系统能够轻松的查看bug新增了哪些,攻克了哪些.当前是谁,要在什么时间解 ...
- modbus学习
- ExtJS TreeGrid的使用方法
假设您是第一次使用ExtJS的TreeGrid的话,我相信总会有一些小麻烦的,以下就来说一说ExtJS中TreeGrid的使用. 本人使用的ExtJS版本号为4.1.1,而且使用了MVC模式.假设不了 ...
- SonarQube代码质量管理平台安装与配置
1.安装说明 操作用户:root 软件下载目录:/root/opt 无root权限时,放到自定义目录即可 ================ 2.预置条件 1.需要JDK1.6+支持: 2.需要Mysq ...
- java程序调用kettle
(1).将相应的kettle的jar包导入的java项目,主要的jar包有一下几个. (2).java程序. package cn.com.taiji.oosweb.test.web; import ...