<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    /* [v-cloak] {

       display: none;

    }*/

  </style>

</head>

<!-- 1. 如何定义一个基本的Vue代码结构 -->

<!-- 2. 插值表达式 和  v-text   -->

<!-- 3. v-cloak -->

<!-- 4. v-html -->

<!-- 5. v-bind   Vue提供的属性绑定机制   缩写是 : -->

<!-- 6. v-on     Vue提供的事件绑定机制   缩写是 @ -->

<body>

  <div id="app">

    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->

    <p v-cloak> {{ msg }} ----------</p>

    <h4 v-text="msg">==================</h4>

    <!-- 默认 v-text 是没有闪烁问题的 -->

    <div>{{ msg2 }}</div>

    <div v-text="msg2"></div>

    <!-- v-text会覆盖元素中原本的内容，且不会把内容当成HTML模式去解析

      但是v-cloak插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空 -->

    <!-- v-html 清空元素的内容 并且会把内容当成HTML标签去解析 -->

    <div id='Hdmi' v-html="msg2">1212112</div>

    <input type="button" value="Bing按钮" v-bind:title="mytitle">

    <input type="button" :value="mytitle1" v-bind:title="mytitle1">

    <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->

    <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->

    <!-- v-bind 中，可以写合法的JS表达式 -->

    <input type="button" value="按钮" @click="show">

    <input type="button" :value="'点击自增'+sz" @click="add" :title="sz">

    <!-- Vue 中提供了 v-on: 事件绑定机制 -->

    <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->

    <!-- 注意：v-on：指令可以被简写成 @click -->

    <!-- 注意：v-on：指令可以支持绑定多个事件 -->

  </div>

  <script src="./lib/vue-2.4.0.js"></script>

  <script>

    var vm = new Vue({

      el: '#app',

      data: {

        msg: '123',

        msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',

        mytitle: '这是一个按键是自己定义的title',

        mytitle1: '这是一个按键的名称是自己写的',

        sz: 1

      },

      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法

        show: function () {

          alert('Hello')

        },

        add: function () {

          this.sz += 1

        }

      }

    })

  </script>

</body>

</html>

Vue 属性绑定v-bing 事件绑定v-on的更多相关文章

  1. vue使用svg，animate事件绑定无效问题及解决方法

    由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...

  2. vue重温之mint-ui------------点击事件绑定

    第一次接触mint-ui,在使用它的tabbar时,为了达到点击切换页面的效果,采用了点击事件的方式,然后就碰到了这么个问题: 是的,点击事件是不起作用的. 然后刚好一个朋友也在做这块,而且有一段时间 ...

  3. Vue知识整理12：事件绑定

    采用v-on命令进行事件的绑定操作,通过单击按钮,实现按钮文字上数值的增加 带参数的事件过程 可以添加$event事件,实现事件信息的获取

  4. VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用

    <body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button ...

  5. angularjs之事件绑定、解除事件绑定

    今天在开发时,遇到一个坑,花了一下午时间也没找到原因,无奈小菜鸟只能寻求公司里大牛的帮助,果然,大牛就是大牛,对比了几个输出结果,就看出问题所在.所以小菜鸟当然不会错过这个分享的时机啦~废话不多说进入 ...

  6. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  7. MVVM设计模式和在WPF中的实现（四） 事件绑定

    系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中的实现(三)命令绑定 MVVM模式解析和在WPF中的 ...

  8. MVVM设计模式的事件绑定

    为什么要事件绑定 这个问题其实是很好理解的,因为事件是丰富多样的,单纯的命令绑定远不能覆盖所有的事件.例如Button的命令绑定能够解决Click事件的需求,但Button的MouseEnter.窗体 ...

  9. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

随机推荐

  1. 如何用最暴力的方法改写Liferay的原生portlet

    最近在论坛上看到有人问如何改写Liferay原有的calendar portlet. 然后研究了一下,直接从portal中把calendar portlet的源码拷贝出来,然后修改再部署上去,但是这个 ...

  2. linux下的OpenCV安装＆学习笔记

    http://www.linuxdiyf.com/viewarticle.php?id=20731 (本想在fedora下安装编译的,但目前opencv官网.sourceforge等网站都无法访问下载 ...

  3. 如何在 KiCad Eeschema 原理图中高亮网络

    如何在 KiCad Eeschema 原理图中高亮网络 在 KiCad Pcbnew 中高度某个网络很方便,按着 Ctrl + 单击可以高度网络. 以为 Eeschema 也是一样的,按着 Ctrl ...

  4. LayUI+Echart实现图表

    1.首先 定义一个容器存放图表  需要指定这个容器的大小 <div class="layui-card"> <div class="layui-card ...

  5. ActiveX控件的消息处理函数

    首先切换到类视图 然后鼠标单击选中类(如果你要给ClockCtrl类添加事件,你就选中ClockCtrl类) PS:顺便多说一句,如果不用这种方法,而是手动添加,即使你的代码跟MFC添加的一模一样,那 ...

  6. 反射技术的入口 获取类的Class信息

    package com.sxt.reflect; import com.sxt.reflect.entity.Student; /* * 获取类的Class信息 */ public class Tes ...

  7. C++之MD5加密（签名）

    md5.h : #include <stdio.h> #include <stdlib.h>#include <time.h> #include <strin ...

  8. thinkphp5.0 空模块、空控制器、空方法

    空模块 'exception_handle' => function(Exception $e){ // 参数验证错误 if ($e instanceof \think\exception\Va ...

  9. Java练习 SDUT-3268_飞花的糖果

    飞花的糖果 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 一日,飞花壕大手一挥,买了N个的两两不相同糖果,他想要拿出M ...

  10. Effective C++: 02构造、析构、赋值运算

    05:了解C++默默编写并调用哪些函数 1:一个空类,如果你自己没声明,编译器就会为它声明(编译器版本的)一个copy构造函数.一个copy assignment操作符和一个析构函数.此外如果你没有声 ...