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. 部署vuejs dist文件，通过node.js编译

    前期准备: 1. Linux环境,安装配置node.js ① 下载地址:http://nodejs.cn/download/  ,下载linux 64位 ② 已编译好的压缩包,解压到指定目录 cd / ...

  2. Android打印日志管理

    做项目的时候,免不了要打印许多日志,等项目上线了,想要去除日志是又找不到在哪里怎么办?我们可以建立一个日志打印的类来统一管理: public class LogUtil { public static ...

  3. 类与类之间关系，用C#和JavaScript体现

    前言 在面向对象中,类之间的关系有六种,分别是: 关联关系(Association) 泛化关系(Generalization) 依赖(Dependency) 聚合(Aggregation) 组合(Co ...

  4. 巨蟒python全栈开发linux之centos6

    1.nginx复习 .nginx是什么 nginx是支持反向代理,负载均衡,且可以实现web服务器的软件 在129服务器中查看,我们使用的是淘宝提供的tengine,也是一种nginx服务器 我们下载 ...

  5. C#中的自定义控件中的属性、事件及一些相关特性的总结（转）

      摘要: C#中的自定义控件中的属性(Property).事件(Event)及一些相关特性(Attribute)的总结 今天学习了下C#用户控件开发添加自定义属性的事件,主要参考了MSDN,总结并实 ...

  6. mono下c#和c交互，字符串处理

    起因是ulua里,从luajit读字符串到c#里,做了编码转换,如下 public static string lua_tostring(IntPtr luaState, int index) { v ...

  7. 面试10大算法汇总+常见题目解答（Java）

    原文地址:http://www.lilongdream.com/2014/04/10/94.html(为转载+整理) 以下从Java的角度总结了面试常见的算法和数据结构:字符串,链表,树,图,排序,递 ...

  8. webview自动循环播放

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  9. android studio DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs

    DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs 参考https://stackoverflow.com/questions/38892 ...

  10. Java栈和堆的区别

    一.栈空间 1.栈空间存储数据效率高 2.栈中的数据是按“先进后出”的方式管理 3.栈空间存储空间比较小,不能存放大量的数据 4.JVM将基本类型的数据存放在栈空间 帮助理解 1.“客栈” 能提供很多 ...