v-on

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

     <div id="id">

         {{message}}

         <button v-on:click="reverseMessage">逆转信息</button>

     </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#id",

         data:{

             message:'Hello Vue.js!'

         },

         methods:{

             reverseMessage:function(){

                 //把数据的顺序调换

                 this.message = this.message.split('').reverse().join('')

             }

         }

     })

 </script>

 </html>

v-model

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

     <div id="id">

         {{message}}

         <input v-model="message">

         <button v-on:click="reverseMessage">逆转信息</button>

     </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#id",

         data:{

             message:'Hello Vue.js!'

         },

         methods:{

             reverseMessage:function(){

                 //把数据的顺序调换

                 this.message = this.message.split('').reverse().join('')

             }

         }

     })

 </script>

 </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. EasyNVR智能云终端硬件使用说明（EasyNVR无插件直播服务硬件的具体使用方法）

    问题背景 随着EasyNVR硬件版本(EasyNVR硬件云终端)的发布不少客户选择了EasyNVR云终端作为产品选择,在客户收到EasyNVR云终端的时候肯定都有一个疑问,那就是如何使用手头上的这个小 ...

  2. echarts, 小知识点随意记录，

    注意点: 写echarts代码时,注意格式,每个项的子项用‘,‘分隔,最后一项不需要.如符号不也会造成图形显示不出来.写时注意参照配置项. 如下orient的属性需要单引号,每个项需要逗号等. leg ...

  3. websocket集群情况下Nginx 代理出现的坑

    那么问题的背景: A想给B发送socket 消息 ! A这消息 这时候被Nginx 轮询发到了C 服务器上! 擦!   这时候就蛋疼了!   要接收消息那个人在B服务器上!     B就这样苦逼的收不 ...

  4. asp.net mvc4连接mysql

    环境:vs2013+mysql5.6+mysql connector for .net 6.8.3+MySQL for Visual Studio 1.1.3 参考:http://dev.mysql. ...

  5. the core of Git is a simple key-value data store The objects directory stores all the content for your database

    w https://git-scm.com/book/en/v1/Git-Internals-Plumbing-and-Porcelain Git is a content-addressable f ...

  6. pmd 使用笔记

    pmd是一块开源的代码静态分析工具,使用java编写,可以自定义规则来进行自己想要的分析.pmd可以单独使用,也可以作为idea.eclipse的插件使用.它的规则分为xpath规则,和java规则. ...

  7. MySQL中一致性非锁定读

    一致性非锁定读(consistent nonlocking read)是指InnoDB存储引擎通过多版本控制(multi versionning)的方式来读取当前执行时间数据库中行的数据,如果读取的行 ...

  8. 数据库垂直拆分，水平拆分利器，cobar升级版mycat（转）

    原文:数据库垂直拆分,水平拆分利器,cobar升级版mycat 1,关于Mycat Mycat情报 基于阿里的开源cobar ,可以用于生产系统中,目前在做如下的一些改进: 非阻塞IO的实现,相对于目 ...

  9. 爬虫五 Beautifulsoup模块

    一 介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你 ...

  10. openstack ocata版（脚本）控制节点安装

    一.初始化环境: 1.更换yum源: yum install -y wget mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS- ...