<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的数据

v-on:click可以简写称@click
<div @click="handleClick">{{content}}</div>

vuejs数据和事件的更多相关文章

  1. 一次tomcat数据乱码事件

    一次环境变量出错导致的tomcat数据乱码事件 1.1 事件起因 由于业务的调整,我们需要将在A服务器上的后台系统迁移到B服务器上的后台,我们选择在下班后进行迁移,因为那个时间点,后台系统已经几乎没有 ...

  2. PB Event ID 含义 内容浅析2 未公开的数据窗口事件

    原网址:https://www.cnblogs.com/lenya/archive/2010/11/12/3706971.html  (作者:Mark   Brown)         到目前为止,P ...

  3. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  4. DIOCP之数据接收事件

    一.不引用编码器与解码器的情况下(ECHO的DEMO) 类TIOCPtcpclient,接收服务器的数据事件:OnRecvBuffer 类TDiocpTcpServer,接收客户端数据事件:OnRec ...

  5. jQuery异步加载数据添加事件

    几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了. 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作 ...

  6. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  7. Swing-JTable检测单元格数据变更事件

    在JTable的初级教程中往往会提到,使用TableModel的 addTableModelListener方法可以监听单元格数据的变更,在其事件处理函,数tableChanged中,可以通过e.ge ...

  8. vue组件-子组件向父组件传递数据-自定义事件

    自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

  9. [转]vue数据绑定(数据,样式,事件)

    1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...

随机推荐

  1. 洛谷P2202 [USACO13JAN]方块重叠Square Overlap

    P2202 [USACO13JAN]方块重叠Square Overlap 题目描述 Farmer John is planning to build N (2 <= N <= 50,000 ...

  2. [Xcode 实际操作]四、常用控件-(10)动作表样式警告窗口的使用

    目录:[Swift]Xcode实际操作 本文将演示动作表单窗口的使用. 动作表单可以给用户展现一系列的选项, 和警告窗口不同的是,动作表单的展示形式和设备的尺寸有关. 在项目导航区,打开视图控制器的代 ...

  3. SAP 权限层次

    此文可是没有维护过权限的人对权限有一个整体的认知,转来加以记忆. 一是系统权限 主要是对模块为单位的权限划分,具体就是用户对该模块可见不可见,能不能对该模块进行再授权的操作.表现在用户界面就是用户登录 ...

  4. JSP读取Oracle数据库里的图片Blob字段并显示在页面上

    1.java代码: /** * 打印模板获取电子签名 * @param request * @param resp * @param id * @return * @throws Exception ...

  5. 小程序组件的继承 - behavior

    1.目录结构 demo-one 和 demo-two 一起公用一些属性 和 方法 存在demo-beh.js中 需要像模块一样导出 2.调用的方法: // components/demo-class/ ...

  6. [題解](迭代加深)POJ2248_Addition Chains

    發現m不會特別大,也就是層數比較淺,所以採用迭代加深 由於xi+xj可能相同,所以開一下vis數組判斷重複 #include<iostream> #include<cstdio> ...

  7. 省选九省联考T2 IIIDX(线段树)

    题目传送门:https://www.luogu.org/problemnew/show/P4364 期中考后记:期中考刚考完,感觉不咋滴,年排第3.我抗压力太差了..期末得把rank1抢回来. 本来感 ...

  8. DB2的常用数据类型

    今天在db2中查询数据时出现错误: Overflow occurred during numeric data type conversion:SQLCODE=-413, SQLSTATE=22003 ...

  9. CentOS 7: ping Name or service not known

    解决方法 cd到/etc/sysconfig/network-scripts/ 修改ifcfg-*(*代表的内容可通过ifconfig查看)中的ONBOOT=yes reboot ifcfg-ens3 ...

  10. windows下显示隐藏的文件

    文件--文件夹选项---查看---高级设置----隐藏文件和文件夹----显示隐藏的文件.文件夹和驱动器