vue.js（3）--v-bind与v-on
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表达式。
vue.js（3）--v-bind与v-on的更多相关文章
- 启动服务报错：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 ...
- 在js或css后加?v= 版本号不让浏览器缓存
客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下 代码如下: <span style="font-si ...
- vue的使用与安装 npm -v报错
1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...
- 安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
前言 最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...
- node.js安装后输入“node -v”提示'node' 不是内部或外部命令，也不是可运行的程序的解决方法
换个电脑,重新搭配环境的时候遇到的问题.node.js已经在官网进行下载安装了,但是VScode里面显示不是内部的命令,也不是可运行的程序 但是在cmd控制台还是能查到的 借助网上的方法进行了测试和调 ...
- Vue.js的从入门到放弃进击录（一）
感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...
- 01.什么是Vue.js
VUE.JS 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的, ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- .Vue.js大全
Vue起步 1.下载核心库vue.js bower info vue npm init --yes cnpm install vue --save vue2.0和1.0相比,最大的变化就是引入了Vir ...
- Vue.js - Day1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...
随机推荐
- 实现一个成熟的底层毛玻璃效果（纯CSS）
写在前面 毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)现提供一个代 ...
- 跨IDC ycache原理和配置说明
总体介绍: 多idc缓存方案的invalid方案(如下图),是通过两个操作保证多个idc之间的缓存的高可用性和最终一致性的. 更新数据库后,发送invalid消息:invalid消息广播到其他id ...
- ad2014注册出现：注册 - 激活错误 (0015.111)
将安装包内的(adlmact.dll & adlmact_libFNP.dll)这两个文件取出并覆盖即可.安装包内文件具体位置:在安装包内搜索“adlmact”出现的两个文件“adlmact_ ...
- BOSCH汽车工程手册————驾驶员辅助系统
根据交通事故统计得出平均每分钟有一人死于交通事故 而辅助驾驶系统能够为驾驶员洞察了解汽车周围情况,识别危险的行驶状况. 提早为驾驶员告诉危险信息,可减少60%汽车驶上主路事故和1/3汽车前碰事故. 有 ...
- flutter dialog
flutter Dialog import 'dart:math'; import 'package:flutter/material.dart'; import 'test.dart'; impor ...
- http详解之post 2
-----------------------post请求示例----------------#请求行POST https://re.csdn.net/csdnbi HTTP/1.1 #请求头部开始H ...
- Python基本语法_函数属性 & 参数类型 & 偏函数的应用
目录 目录 前言 软件环境 Python Module的程序入口 函数的属性 Python函数的创建 函数的参数 必备参数 缺省参数 命名参数 不定长参数 匿名参数 偏函数的应用 前言 Python除 ...
- apache用户认证
创建一个目录abc:mkdir abc在此目录下建一个文件:12.txt正常情况下可以访问. 建立用户认证,从而使用户访问特定目录文件需要认证 在虚拟主机配置文件中即vim /usr/local/ap ...
- LeetCode.985-查询后偶数的总和(Sum of Even Numbers After Queries)
这是悦乐书的第370次更新,第398篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第232题(顺位题号是985).有一个整数数组A和一个查询数组queries. 对于第i ...
- Java实验报告四
一.实验目的 (1)掌握类的继承方法: (2)变量的继承和覆盖,方法的继承.重载和覆盖实现: 二.实验内容 1)实验代码 import java.util.Scanner; public class ...