vuejs数据和事件
<body>
<div id='root'>{{number}}</div>
<script>
new Vue({
el:'#root',
data:{
msg:'hello world',
number:123
}
})
</script>
</body>
{{number}} //这个语法我们把他叫做插值表达式，除了这种写法,还有两种写法
<h1 v-text='number'></h1> //不编译html,引号内部是个变量
<h1 v-html='number'></h1> //编译html
<div id='root'>
<div v-on:click="handleClick">{{content}}</div>
</div>
<script>
new Vue({
el:'#root',
data:{
content:'hello'
},
methods: {
handleClick:function(){
this.content = 'world';
}
}
})
</script>
用指令v-on:click绑定，方法写在methods选项里面，在vue里面把hello变成world，之前要去改变dom，vuejs里面不用改变dom，直接改变数据就好了，this.content表示这个实例Vue里面data的content的数据
<div @click="handleClick">{{content}}</div>
vuejs数据和事件的更多相关文章
- 一次tomcat数据乱码事件
一次环境变量出错导致的tomcat数据乱码事件 1.1 事件起因 由于业务的调整,我们需要将在A服务器上的后台系统迁移到B服务器上的后台,我们选择在下班后进行迁移,因为那个时间点,后台系统已经几乎没有 ...
- PB Event ID 含义 内容浅析2 未公开的数据窗口事件
原网址:https://www.cnblogs.com/lenya/archive/2010/11/12/3706971.html (作者:Mark Brown) 到目前为止,P ...
- jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- DIOCP之数据接收事件
一.不引用编码器与解码器的情况下(ECHO的DEMO) 类TIOCPtcpclient,接收服务器的数据事件:OnRecvBuffer 类TDiocpTcpServer,接收客户端数据事件:OnRec ...
- jQuery异步加载数据添加事件
几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了. 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作 ...
- vuejs数据双向绑定原理（get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...
- Swing-JTable检测单元格数据变更事件
在JTable的初级教程中往往会提到,使用TableModel的 addTableModelListener方法可以监听单元格数据的变更,在其事件处理函,数tableChanged中,可以通过e.ge ...
- vue组件-子组件向父组件传递数据-自定义事件
自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
- [转]vue数据绑定(数据,样式,事件)
1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...
随机推荐
- jQuery点击弹出层，弹出模态框，点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- MCP|ZCM|Investigating Lactococcus lactis MG1363 response to phage p2 infection at the proteome level（研究乳酸乳球菌MG1363在噬菌体p2感染后的蛋白质组水平变化）
一.概述: 噬菌体是特异性感染并最终杀死其细菌宿主的病毒.他们在所有生态系统中发挥着关键的生态作用.尽管经过了几十年的研究,噬菌体与细菌宿主之间的相互作用仍然知之甚少.本研究使用无标记定量蛋白质组学来 ...
- 使用combobox下拉列表框实现省 市 县 的三级联动
package com.hanqi.entity; //地区 public class Region { //地区id private String regionID; //地区名称 private ...
- EIGRP-7-可靠传输协议
可靠传输协议(RTP,Reliable Transport Protocol)负责管理ElGRP数据包的发送和接收.可靠传输意味着传输是有保障的,并且数据包会被按顺序发送.这种传输效果是依靠Cisco ...
- 学霸笔记系列 - Python Selenium项目实战（一）—— 怎么去验证一个按钮是启用的（可点击）？
Q: 使用 Python Selenium WebDriver 怎么去验证一个按钮是启用的(可点击)? A:Selenium WebDriver API 里面给出了解决方法is_enabled() 使 ...
- HIVE获取表的大小和修改日期
### 获取表的大小 hdfs dfs -du /user/hive/warehouse/database_name.db/ > 360_du ### 获取表的修改日期 hdfs dfs -ls ...
- groovy使用小记
下载groovy的sdk, 解压后设置GROOVY_HOME和PATH变量 http://groovy-lang.org/download.html 使用IDEA创建java项目勾选Groovy组件 ...
- jsonp——使用公共接口获取数据
demo: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- HDU 2473 Junk-Mail Filter 并查集，虚拟删除操作
http://acm.hdu.edu.cn/showproblem.php?pid=2473 给定两种操作 第一种是合并X Y 第二种是把X分离出来,就是从原来的集合中分离出来,其它的关系不变. 关键 ...
- CUDA杂谈
这一年都在编写CUDA的程序,用了很多优化的手段,发现大部分其实还是官方的指南里面的手段 https://docs.nvidia.com/cuda/cuda-c-best-practices-guid ...