vue中的v-bind与v-on的使用

（1）实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>v-bind v-on</title>

    <script src="../lib/vue.js"></script>

</head>

<body>

    <div class="app">

        <input type="button" v-bind:title="myTitle" value="按钮1" v-on:click="show">

        <!-- v-bind用来绑定属性 --><!-- v-on用来绑定点击事件 -->

        <input type="button" :title="myTitle" value="按钮2" v-on:mouseover="show">

        <!-- v-bind:title可以简写为:title --><!-- v-on用来绑定鼠标移动事件 -->

        <input type="button" v-bind:title="myTitle + '后来增加的内容'" value="按钮3" v-on:mouseout="show">

        <!-- v-bind中引号内容可看做一个js中的表达式，因此可进行连接字符串的操作，写合法的js表达式-->

    </div>

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                myTitle:'我是一个title'

            },

            methods:{

                show:function() {

                    alert('你好呀！')

                } //定义了一个方法show，通过v-on绑定到事件中，实现效果

            }

        })

    </script>

</body>

</html>

（2）摘要

　　v-bind用来绑定属性（v-bind:title="myTitle"），v-on用来绑定事件（v-on:click="show"）。

　　v-bind：绑定的属性名称  可简写为：绑定的属性名称。

　　v-on:绑定的事件名称  可简写为  @绑定的事件名称。

　　v-bind中引号内容可看做一个js中的表达式，因此可进行连接字符串的操作，可以写其他合法的js表达式。

　　在vm中的methods对象中定义方法--show:function() {alert('你好呀！')} 。通过v-on绑定到事件中，实现效果。

vue.js（3）--v-bind与v-on的更多相关文章

  1. 启动服务报错：nested exception is java.lang.NoSuchMethodError: org.apache.cxf.common.jaxb.JAXBUtils.closeUnmarshaller(Ljavax/xml/bind/Unmarshaller;)V

    1.启动tomcat时报错:Error creating bean with name 'payInfService': Invocation of init method failed; neste ...

  2. 在js或css后加?v= 版本号不让浏览器缓存

    客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下 代码如下: <span style="font-si ...

  3. vue的使用与安装 npm -v报错

    1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...

  4. 安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效

    前言 最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...

  5. node.js安装后输入“node -v”提示'node' 不是内部或外部命令，也不是可运行的程序的解决方法

    换个电脑,重新搭配环境的时候遇到的问题.node.js已经在官网进行下载安装了,但是VScode里面显示不是内部的命令,也不是可运行的程序 但是在cmd控制台还是能查到的 借助网上的方法进行了测试和调 ...

  6. Vue.js的从入门到放弃进击录（一）

    感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...

  7. 01.什么是Vue.js

    VUE.JS 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的, ...

  8. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  9. .Vue.js大全

    Vue起步 1.下载核心库vue.js bower info vue npm init --yes cnpm install vue --save vue2.0和1.0相比,最大的变化就是引入了Vir ...

  10. Vue.js - Day1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...

随机推荐

  1. 使用宝塔面板 配置nginx 访问ftp服务器下面的图片

    如果 你在服务器上 运行war项目 可以在tomcat 配置访问的: tomcat 也贴出来吧! 一.tomca配置访问,需要更改配置文件server.xml ,如果找不到,自己好好找一下  一般在 ...

  2. 菜鸟requireJS教程---1、初识requirejs

    菜鸟requireJS教程---1.初识requirejs 一.总结 一句话总结: Using a modular script loader like RequireJS will improve ...

  3. leetcode-easy-sorting and searching- 278 First Bad Version

    mycode  96.42 # The isBadVersion API is already defined for you. # @param version, an integer # @ret ...

  4. 如何消除 com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server

    在application.properties中添加以下两句话: eureka.client.register-with-eureka=falseeureka.client.fetch-registr ...

  5. 阶段3 2.Spring_10.Spring中事务控制_10spring编程式事务控制2-了解

    在业务层声明 transactionTemplate 并且声称一个set方法等着spring来注入 在需要事物控制的地方执行 execute.但是这个execute需要一个参数 需要的参数是Trans ...

  6. 阶段3 2.Spring_07.银行转账案例_3 分析事务的问题并编写ConnectionUtils

    不是没有事务造成的 这样相当于有四个connection 每一个都有自己独立的事物 每一个自己成功就提交事务. 已经提交的就执行结束.没有提交的就报异常 让这些操作使用同一个connection 事物 ...

  7. ABAP开发常用函数

    1.  LAST_DAY_OF_MONTHS——用于获取某月的最后一天. 例如输日今天的日期2013/10/16,系统将回执成2013年10月的最后一天,也就是2013/10/30 2.  CONVE ...

  8. LeetCode.12-整数转罗马数字符串(Integer to Roman)

    这是悦乐书的第351次更新,第376篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Medium级别的第6题(顺位题号是12).罗马数字由七个不同的符号表示:I,V,X,L,C,D和M. ...

  9. 车牌识别1：License Plate Detection and Recognition in Unconstrained Scenarios阅读笔记

    一.WHAT 论文下载地址:License Plate Detection and Recognition in Unconstrained Scenarios [pdf] github 的项目地址: ...

  10. 应用安全 - 工具 - 浏览器 - 火狐(FireFox) - 漏洞汇总

    CVE-2010-3131   Date Aug 类型 Mozilla Firefox - 'dwmapi.dll' DLL Hijacking 影响范围 Firefox <= CVE-2010 ...