<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. centos6.6上安装beef

    https://rvm.io/https://rvm.io/rvm/securityhttps://www.runoob.com/ruby/ruby-installation-unix.htmlhtt ...

  2. 关于dijkstra求最短路(模板)

    嗯....   dijkstra是求最短路的一种算法(废话,思维含量较低,   并且时间复杂度较为稳定,为O(n^2),   但是注意:!!!!         不能处理边权为负的情况(但SPFA可以 ...

  3. Exadata 12.2.1.1.0 Highlights

    突然发现,在中国农历新年的这几年里,Exadata 12.2版本已经发布了. 本起去docs.oracle.com上看看它的新特性,结果发现文档还没有更新: 下面是找到的一些资料,让我们来一睹为快吧: ...

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

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

  5. POJ1009 Edge Detection

    题目来源:http://poj.org/problem?id=1009 题目大意: 某图像公司用run length encoding(RLE)的方式记录和存储了大量的图像.程序的目标是读入压缩后的图 ...

  6. git 工作中常用命令(结合vscode学习git 命令)

    作为一名前端开发,大家在工作中常常使用什么开发工具呢,我觉得我首选的是vscode,他配合git使用起来非常方便. 工作中常用三个命令: git终端常使用: git add . git commit ...

  7. spock和junit测试报告

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. (转)老男孩linux培训某节课前考试试题及答案分享

    目录:[考试目的] ................................2[考试范围]  ...............................2[答题策略] .......... ...

  9. 这个五月,我拿到了腾讯暑期offer

    前情回顾 本来学校就是双非,如果再没有些亮点,是很难进大厂的. 我比较幸运,曾在网易实习过一段时间,很感谢这段经历,让我有幸通过腾讯HR们的简历筛选. 对于腾讯春招,其实我是没有参加网申(2.28-3 ...

  10. Java排序算法(二)

    java排序算法(二) 二.改进排序算法 2.1希尔排序 定义:希尔排序(ShellSort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法. ...