第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style> </head> <body>
<div id="app">
<!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
<h4 v-text="msg"></h4>
<!-- 默认v-text是没有闪烁问题的 -->
<!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个 占位符，不会把整个元素内容清空 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<!-- v-bind：是Vue中，提供用于绑定属性的指令 -->
<!-- <input type="button" value="按钮" v-bind:title="mytitle+'123' "> -->
<!-- 注意：v-bind: 指令可以被简写为：要绑定的属性 -->
<!-- v-bind 中，可以写合法的js表达式 --> <!-- Vue 中提供了v-on:事件绑定机制 -->
<!-- <input type="button" value="按钮" :title="mytitle+'123' " v-on:click="alert('hello')"> --> <input type="button" value="按钮" v-on:click="show">
<!-- 鼠标覆盖事件 -->
<input type="button" value="按钮" v-on:mouseover="show">
</div> <script src="./lib/vue-2.6.10.js"></script> <script>
var vm = new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>哈哈，我是h1</h1>',
mytitle:'这是一个自己定义的title'
},
methods:{//这个 methods属性中定义了当前Vue实例所有可用的方法
show:function(){
alert('Hello')
}
}
})
</script>
</body>
</html> <!--v-on: Vue提供的事件绑定机制 它的缩写是 @ 所以 v-on:click="alert('hello') 可以写成 @click="alert('hello')
v-bind: Vue提供的属性绑定机制 它的缩写是 :
-->
第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件的更多相关文章
- 第二章 Kubernetes快速入门
一.四组基本概念 Pod/Pod控制器: Name/Namespace: Label/Label选择器: Service/Ingress. 二.Pod/Pod控制器 2.1 Pod Pod是K8S里能 ...
- 《驾驭Core Data》 第二章 Core Data入门
本文由海水的味道编译整理,请勿转载,请勿用于商业用途. 当前版本号:0.4.0 第二章 Core Data入门 本章将讲解Core Data框架中涉及的基本概念,以及一个简单的Core Data ...
- vue 快速入门 系列 —— 虚拟 DOM
其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
- vue 快速入门 系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用（下）
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— vue-cli 上
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
- vue 快速入门 系列 —— vue-cli 下
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
- vue 快速入门 系列 —— 实例方法（或 property）和静态方法
其他章节请看: vue 快速入门 系列 实例方法(或 property)和静态方法 在 Vue(自身) 项目结构 一文中,我们研究了 vue 项目自身构建过程,也知晓了 import Vue from ...
- vue 快速入门 系列 —— Vue 实例的初始化过程
其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...
随机推荐
- C学习笔记-数组
数组的概念 数组是一组具有相同数据类型的变量集合,这里要注意两点,数组只能存储相同的数据类型和数组的内存是连续的,这位数组和指针的联系奠定了基础. 一维数组 定义及初始化 一维数组指的是只有一个下标的 ...
- Excel输入公式后只显示公式却不计算如何解决？
在使用Excel函数公式的时候,您是否碰到过输入公式,按下Enter键之后,单元格仍只显示公式,而不显示计算结果. 工具/原料 Excel 教程以Excel2013为例 方法/步骤 教 ...
- git安装配置相关
Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中.目前,包括Rubinius ...
- Javascript去掉base64中的回车换行
给天津海关开发手机插件. 他们的API返回的文件base64遵循了RFC822规定,即BASE64编码每76个字符,还需要加上一个回车换行. 这就导致了我的Ant Design Mobile图片控件不 ...
- TCP的组包、半包、粘包与分包
一.概念 1)组包.简单的说就是tcp协议把过大的数据包分成了几个小的包传输,接收方要把同一组的数据包重新组合成一个完整的数据包. 2)半包.指接受方没有接受到一个完整的包,只接受了部分,这种情况主要 ...
- Elastic Search中mapping的问题
Mapping在ES中是非常重要的一个概念.决定了一个index中的field使用什么数据格式存储,使用什么分词器解析,是否有子字段,是否需要copy to其他字段等.Mapping决定了index中 ...
- jenkins转换显示语言为中文简体（jenkins汉化）
jenkins版本2.117 单位使用的jenkins一直是英文版本,有同事建议切换为中文版. 以下过程完成转换. 一.安装插件 主界面-->系统管理-->插件管理-->可选插件 图 ...
- redis 学习（19）-- RDB与AOF的抉择
RDB与AOF的抉择 1.RDB VS AOF RDB AOF 启动优先级 低 高 体积 小 大 恢复速度 快 慢 数据安全性 容易丢数据 根据策略决定 轻重 重 轻 2.RDB的最佳策略 关闭RDB ...
- EXSI宿主机更换硬盘后虚机启动有问题
环境说明: 最近EXSI主机磁盘坏掉了,重新换掉磁盘以后启动虚机有问题. 虚机的报错信息如下: 找了下修复方法,操作过程为: 尝试修复 (以下是百度的方法) ls -l /dev/mapper mkd ...
- CAS实现逻辑(JWT)
由于没有获取正规做CAS的流程,这里根据网上的资料,写了一个自己觉得还可以的方案流程,留着备用 名称介绍: token:用于验证请求是否合法 refreshToken:当token失效后,客户端发送t ...