第二章 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 的源码, ...
随机推荐
- 50道Kafka面试题和解析（转载）
转载:https://zhuanlan.zhihu.com/p/78912551 前言 Apache Kafka的受欢迎程度很高,Kafka拥有充足的就业机会和职业前景.此外,在这个时代拥有kafka ...
- element-ui--按需引入
参考链接:https://www.cnblogs.com/qiezuimh/p/10103522.html
- Linux安装git （git-2.11.0）
本文旨在讲述如何在linux上安装最新版的git. 1.查看当前git版本:git --version 查看最新版git:访问https://www.kernel.org/pub/softwa ...
- J-流浪西邮之寻找火石碎片 【经典背包变形】
题目来源:2019 ACM ICPC Xi'an University of Posts & Telecommunications School Contest 链接:https://www. ...
- Anaconda Spyder 常用快捷键
Ctrl+1 注释.取消注释 Ctrl+4/5 块注释 / 取消块注释 Ctrl+D 删除一行 Ctrl+L 转到行 Ctrl+G/左键 查找函数定义 F9 运行选中代码 F12 断点 / 取消断点 ...
- vue组件之间的通信， 父子组件通信，兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- [转帖]nginx 80端口重定向 转发到443端口
nginx 80端口重定向到443端口 2017年05月16日 13:53:58 幸福丶如此 阅读数 33387 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文 ...
- Python 3.8.0 正式版发布，新特性初体验 全面介绍
Python 3.8.0 正式版发布,新特性初体验 北京时间 10 月 15 日,Python 官方发布了 3.8.0 正式版,该版本较 3.7 版本再次带来了多个非常实用的新特性. 赋值表达式 PE ...
- JS 装饰器，一篇就够
更多文章,请在Github blog查看 在 ES6 中增加了对类对象的相关定义和操作(比如 class 和 extends ),这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候,变得并 ...
- django 支持跨域请求配置
参考:https://www.jianshu.com/p/63fb55bee142 核心注意点: