第二章 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 的源码, ...
随机推荐
- bg_imgae
- sql中级语句
创建联结 select n_title,n_content,t_name,t_memo from nrc_news,nrc_type where nrc_news.t_id=nrc_type.t_id ...
- Windows 下部署 hadoop spark环境
一.先在本地安装jdk 我这里安装的jdk1.8,具体的安装过程这里不作赘述 二.部署安装maven 下载maven安装包,并解压 设置环境变量,MAVEN_HOME=D:\SoftWare\Mave ...
- [转帖]socks5 协议简介
socks5 协议简介 http://zhihan.me/network/2017/09/24/socks5-protocol/ 什么是socks5 或许你没听说过socks5,但你一定听说过Shad ...
- Vue--理解非prop特性
所谓非 prop 特性,就是指它可以直接传入组件,而不需要定义相应的 prop. 尽管为组件定义明确的 prop 是推荐的传参方式,组件的作者却并不总能预见到组件被使用的场景.所以,组件可以接收任意传 ...
- PAT B1011 A+B 和 C (15)
AC代码 #include <cstdio> int main() { int T, tcase = 1; scanf("%d", &T); for(int i ...
- 区间DP(入门)括号匹配
https://www.nitacm.com/problem_show.php?pid=8314 思路:类似于https://blog.csdn.net/MIKASA3/article/details ...
- springboot2.0整合freemarker快速入门
目录 1. 快速入门 1.1 创建工程pom.xml文件如下 1.2 编辑application.yml 1.3 创建模型类 1.4 创建模板 1.5 创建controller 1.6 测试 2. F ...
- one:arguments对象伪数组
这是我的第一个博客 <script> //计算N个数字的和 //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传入了几个参数,没办法计算, // 但是如果在函数中知道了参数的 ...
- 代理、反射、注解、hook
代理 通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,扩展目标对象的功能. 代理对象拦截真实对象的方法调用,在真实对象调用前/后实现自己的逻辑调用 这里使用到编程中的一个思想:不 ...