v-on

vue可以使用v-on指令来监听事件，方便与用户进行交互。我们不需要修改DOM中的数据，所有的操作都由Vue来实现，你编写的代码只需要关注底层逻辑。这也是Vue强大的地方之一

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.      <div id="id">
  10.          {{message}}
  11.          <button v-on:click="reverseMessage">逆转信息</button>
  12.      </div>
  13.  </body>
  14.  <script>
  15.      var vm = new Vue({
  16.          el:"#id",
  17.          data:{
  18.              message:'Hello Vue.js!'
  19.          },
  20.          methods:{
  21.              reverseMessage:function(){
  22.                  //把数据的顺序调换
  23.                  this.message = this.message.split('').reverse().join('')
  24.              }
  25.          }
  26.      })
  27.  </script>
  28.  </html>

v-model

在上面的例子中再添加 v-model指令双向绑定表单输入和应用状态，实现指令之间的组合使用

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <script type="text/javascript"  src="vue.js"></script>
  7.  </head>
  8.  <body>
  9.      <div id="id">
  10.          {{message}}
  11.          <input v-model="message">
  12.          <button v-on:click="reverseMessage">逆转信息</button>
  13.      </div>
  14.  </body>
  15.  <script>
  16.      var vm = new Vue({
  17.          el:"#id",
  18.          data:{
  19.              message:'Hello Vue.js!'
  20.          },
  21.          methods:{
  22.              reverseMessage:function(){
  23.                  //把数据的顺序调换
  24.                  this.message = this.message.split('').reverse().join('')
  25.              }
  26.          }
  27.      })
  28.  </script>
  29.  </html>

Vue v-on v-model 组合使用的更多相关文章

  1. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  2. 转：V$SQL,V$SQLAREA,V$SQLTEXT

    V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...

  3. v$session & v$session_wait

    (1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...

  4. A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes

    A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes (文 ...

  5. 错误提示：Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You can disable statistics in the preference menu,or obtanin select priviliges on the v$session,v$sess

    1.错误提示:Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You ...

  6. 动态性能视图v$mystat,v$sesstat,v$statname

    视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...

  7. Oracle v$session/v$sql 表

    在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...

  8. oracle常用视图v$mystat v$sesstat v$sysstat v$statname v$thread v$ parameter v$session v$process

    这两天看了盖国强老师的<<深入浅出>>,很佩服盖老师钻研的精神.书中常用到一个查询语句,为了获取当前会话的跟踪文件路径,sql如下: SELECT d.VALUE || '/' ...

  9. 学习动态性能表(4)--v$sqltext&v$sqlarea

    学习动态性能表 第四篇-(1)-V$SQLTEXT  2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...

  10. 转：Oracle里几组重要的视图--v$sysstat，v$system_event，v$parameter v$system_parameter

    按组分的几组重要的性能视图 1.System 的 over view v$sysstat , v$system_event  , v$parameter,V$instance得到oracle_sid ...

随机推荐

  1. FastExcel遇到的问题

    第一次使用FastExcel发现在创建excel文件的时候不成功,一直报这个问题: org.apache.poi.EmptyFileException: The supplied file was e ...

  2. tomcat8热部署配置--maven自动发布项目到tomcat8（如何支持远程访问部署）

    1.tomcat8实现热部署的配置  我们实现热部署后,自然就可以通过maven操作tomcat了,所以就需要maven取得操作tomcat的权限,现在这一步就是配置tomcat的可操作权限. #进入 ...

  3. jQuery DOM 元素方法（get）

    jQuery DOM 元素方法 1..get() 获得由选择器指定的 DOM 元素. $(selector).get(index)index 可选.规定获取哪个匹配元素(通过 index 编号). 实 ...

  4. Java你不知道的那些事儿—Java隐藏特性

    转载自:http://www.cnblogs.com/lanxuezaipiao/p/3460373.html 每 种语言都很强大,不管你是像我一样的初学者还是有过N年项目经验的大神,总会有你不知道的 ...

  5. .net 取得类的属性、方法、成员及通过属性名取得属性值

    //自定义的类 model m = new model();   //取得类的Type实例 //Type t = typeof(model);    //取得m的Type实例 Type t = m.G ...

  6. MySQL中Index Condition Pushdown(ICP)优化

    在MySQL 5.6开始支持的一种根据索引进行查询的优化方式.之前的MySQL数据库版本不支持ICP,当进行索引查询是,首先根据索引来查找记录,然后在根据WHERE条件来过滤记录.在支持ICP后,My ...

  7. 前端基础-html（3）

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  8. java ReentrantLock可重入锁的使用场景

    摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a.用在定时任务时,如果任务执行时间可能超过下次 ...

  9. 2.3 使用ARDUINO控制MC20进行GPRS的TCP通讯

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  10. Guide to Spring @Autowired

    Guide to Spring @Autowired Spring希望由@Autowired注解的依赖在某个依赖bean被构造时是可以访问的.如果框架不能解析这个用于wiring的bean,就会抛出异 ...