1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. [v-cloak]{
  10. display: none;
  11. }
  12. </style>
  13.  
  14. </head>
  15.  
  16. <body>
  17. <div id="app">
  18. <!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
  19. <p v-cloak>{{msg}}</p>
  20. <h4 v-text="msg"></h4>
  21. <!-- 默认v-text是没有闪烁问题的 -->
  22. <!-- v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个 占位符,不会把整个元素内容清空 -->
  23. <div>{{msg2}}</div>
  24. <div v-text="msg2"></div>
  25. <div v-html="msg2"></div>
  26. <!-- v-bind:是Vue中,提供用于绑定属性的指令 -->
  27. <!-- <input type="button" value="按钮" v-bind:title="mytitle+'123' "> -->
  28. <!-- 注意:v-bind: 指令可以被简写为:要绑定的属性 -->
  29. <!-- v-bind 中,可以写合法的js表达式 -->
  30.  
  31. <!-- Vue 中提供了v-on:事件绑定机制 -->
  32. <!-- <input type="button" value="按钮" :title="mytitle+'123' " v-on:click="alert('hello')"> -->
  33.  
  34. <input type="button" value="按钮" v-on:click="show">
  35. <!-- 鼠标覆盖事件 -->
  36. <input type="button" value="按钮" v-on:mouseover="show">
  37. </div>
  38.  
  39. <script src="./lib/vue-2.6.10.js"></script>
  40.  
  41. <script>
  42. var vm = new Vue({
  43. el:'#app',
  44. data:{
  45. msg:'123',
  46. msg2:'<h1>哈哈,我是h1</h1>',
  47. mytitle:'这是一个自己定义的title'
  48. },
  49. methods:{//这个 methods属性中定义了当前Vue实例所有可用的方法
  50. show:function(){
  51. alert('Hello')
  52. }
  53. }
  54. })
  55. </script>
  56. </body>
  57. </html>
  58.  
  59. <!--v-on: Vue提供的事件绑定机制 它的缩写是 @ 所以 v-on:click="alert('hello') 可以写成 @click="alert('hello')
      v-bind: Vue提供的属性绑定机制 它的缩写是 :
    -->

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件的更多相关文章

  1. 第二章 Kubernetes快速入门

    一.四组基本概念 Pod/Pod控制器: Name/Namespace: Label/Label选择器: Service/Ingress. 二.Pod/Pod控制器 2.1 Pod Pod是K8S里能 ...

  2. 《驾驭Core Data》 第二章 Core Data入门

    本文由海水的味道编译整理,请勿转载,请勿用于商业用途.    当前版本号:0.4.0 第二章 Core Data入门 本章将讲解Core Data框架中涉及的基本概念,以及一个简单的Core Data ...

  3. vue 快速入门 系列 —— 虚拟 DOM

    其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...

  4. vue 快速入门 系列 —— vue 的基础应用(上)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  5. vue 快速入门 系列 —— vue 的基础应用(下)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  6. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  7. vue 快速入门 系列 —— vue-cli 上

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

  8. vue 快速入门 系列 —— vue-cli 下

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

  9. vue 快速入门 系列 —— 实例方法(或 property)和静态方法

    其他章节请看: vue 快速入门 系列 实例方法(或 property)和静态方法 在 Vue(自身) 项目结构 一文中,我们研究了 vue 项目自身构建过程,也知晓了 import Vue from ...

  10. vue 快速入门 系列 —— Vue 实例的初始化过程

    其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...

随机推荐

  1. bg_imgae

  2. sql中级语句

    创建联结 select n_title,n_content,t_name,t_memo from nrc_news,nrc_type where nrc_news.t_id=nrc_type.t_id ...

  3. Windows 下部署 hadoop spark环境

    一.先在本地安装jdk 我这里安装的jdk1.8,具体的安装过程这里不作赘述 二.部署安装maven 下载maven安装包,并解压 设置环境变量,MAVEN_HOME=D:\SoftWare\Mave ...

  4. [转帖]socks5 协议简介

    socks5 协议简介 http://zhihan.me/network/2017/09/24/socks5-protocol/ 什么是socks5 或许你没听说过socks5,但你一定听说过Shad ...

  5. Vue--理解非prop特性

    所谓非 prop 特性,就是指它可以直接传入组件,而不需要定义相应的 prop. 尽管为组件定义明确的 prop 是推荐的传参方式,组件的作者却并不总能预见到组件被使用的场景.所以,组件可以接收任意传 ...

  6. PAT B1011 A+B 和 C (15)

    AC代码 #include <cstdio> int main() { int T, tcase = 1; scanf("%d", &T); for(int i ...

  7. 区间DP(入门)括号匹配

    https://www.nitacm.com/problem_show.php?pid=8314 思路:类似于https://blog.csdn.net/MIKASA3/article/details ...

  8. springboot2.0整合freemarker快速入门

    目录 1. 快速入门 1.1 创建工程pom.xml文件如下 1.2 编辑application.yml 1.3 创建模型类 1.4 创建模板 1.5 创建controller 1.6 测试 2. F ...

  9. one:arguments对象伪数组

    这是我的第一个博客 <script> //计算N个数字的和 //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传入了几个参数,没办法计算, // 但是如果在函数中知道了参数的 ...

  10. 代理、反射、注解、hook

    代理 通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,扩展目标对象的功能. 代理对象拦截真实对象的方法调用,在真实对象调用前/后实现自己的逻辑调用 这里使用到编程中的一个思想:不 ...