<!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中的事件的更多相关文章

  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. java中单例模式的优缺点

    一.什么叫单例 对单例类实例化后拿到的都是堆里面的同一个实例对象,通俗一点就是所有的这个单例的实例化引用都指向堆内存中的一个实例对象(有且仅有一个) 使用场景:对象需要频繁的实例化和销毁,此时考虑使用 ...

  2. beam search 和 greedy search

    贪心搜索(greedy search): 贪心搜索最为简单,直接选择每个输出的最大概率,直到出现终结符或最大句子长度. 集束搜索(beam search): 集束搜索可以认为是维特比算法的贪心形式,在 ...

  3. superset使用

    部署完成后,就可以登陆superset的web页面: http://192.168.56.105:8088  #默认是8080,在配置文件中可以修改 点database可以选择连接不同的数据源,如My ...

  4. MySQL慢查询—开启慢查询

    ###一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. ###二.参数说明 slow_query_log 慢查询开启状态 ...

  5. Select 多个表并且相关联转置

    已知一个表的结构为: ------------------- 姓名 科目 成绩 张三 语文 20 张三 数学 30 张三 英语 50 李四 语文 70 李四 数学 60 李四 英语 90   怎样通过 ...

  6. Atomic long 和long的区别

    Atomic long 和long: 前者是一个对象,包含对象头(object header)以用来保存hashcode.lock等信息,32位系统占用8个字节,64位系统占16个字节,所以在64位系 ...

  7. matplotlib库之直方图

    例题:假设你获取了250部电影的时长(列表a中),希望统计出这些电影时长的分布状态(比如时长为100分钟到120分钟电影的数量,出现的频率)等信息,你应该如何呈现这些数据? 一些概念及问题: 把数据分 ...

  8. 对CSRF（跨站请求伪造）的理解

    一.什么是CSRF? CSRF是Cross Site Request Forgery的缩写,翻译过来就是跨站请求伪造.那么什么是跨站请求伪造呢?让我一个词一个词的解释: 1.跨站:顾名思义,就是从一个 ...

  9. HTML DOM focus() 方法

    目录 HTML DOM focus() 方法 实例 定义和使用 浏览器支持 语法 参数 技术描述 更多实例 实例 实例 HTML DOM focus() 方法 实例 为 <a> 元素设置焦 ...

  10. X86逆向5：破解程序的自效验

    在软件的破解过程中,经常会遇到程序的自效验问题,什么是自效验?当文件大小发生变化,或者MD5特征变化的时候就会触发自效验暗装,有些暗装是直接退出,而有些则是格盘蓝屏等,所以在调试这样的程序的时候尽量在 ...