<!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. Gatling初次体验

    主要步骤: 1. 利用springboot编写了一个简单的服务jdktest 2.将jdktest利用docker在虚拟机中启动 3.创建一个scala工程,利用gatling提供的DSL编写性能脚本 ...

  2. 基于jQuery，bootstrap的bootstrapValidator的学习（一)

    bootstrap:能够增加兼容性的强大框架. 因为移动端项目需要数据验证,就开始学习了bootstrapValidator . 1.需要引用的文件: css: bootstrap.min.css b ...

  3. Leetcode804.Unique Morse Code Words唯一摩尔斯密码词

    国际摩尔斯密码定义一种标准编码方式,将每个字母对应于一个由一系列点和短线组成的字符串, 比如: "a" 对应 ".-", "b" 对应 &q ...

  4. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  5. 草地排水 改了又改（DCOJ6013）

    题目描述 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水．这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间．因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...

  6. day4_python之三元表达式、列表推导式、生成器表达式

    一.三元表达式 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' print(res) 二.列表解析 l = [] for ...

  7. python 使用异常代替返回状态码

  8. Android7.0 添加快速设定Quick Settings Tile

    Android7.0新推出了一个非常实用的功能--添加快速设定(或者翻译成快速设置),但是感觉社区里关注的人比较少,可能目前为止国内还没有Android7.0的手机,但是越早接触越好,甚至可以告诉产品 ...

  9. hdu 1003 hdu 1231 最大连续子序列【dp】

    HDU1003 HDU1231 题意自明.可能是真的进步了点,记得刚开始研究这个问题时还想了好长时间,hdu 1231还手推了很长时间,今天重新写干净利落就AC了. #include<iostr ...

  10. java代码简单实现队列

    1. 基于链表简单实现 import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; / ...