<!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. V8引擎实现标准ECMA-262（三）

    推荐英文原址ECMA-262 3.构造函数 构造函数除了通过指定的模式创建对象以外,还有另外一个好处--它能够自动设置新创建对象的原型对象,这个原型对象存储在构造函数的Prototype属性中. 例如 ...

  2. 【JZOJ4809】【NOIP2016提高A组五校联考1】挖金矿

    题目描述 输入 输出 样例输入 4 3 4 3 3 5 1 6 2 6 1 3 2 9 样例输出 4.4286 数据范围 样例解释 解法 二分答案. 对于答案ans,如果每一列的最大贡献之和大于0,则 ...

  3. 【JZOJ4782】【NOIP2016提高A组模拟9.15】Math

    题目描述 输入 输出 样例输入 3 5 样例输出 -1 数据范围 解法 观察式子,可以得知整个式子与d(i*j)的奇偶性有关. d(n)为奇数当且仅当n是完全平方数. 对于一个i,如果d(i*j) ( ...

  4. 手机端 echarts使用 svg渲染器

    // 使用 Canvas 渲染器(默认) var chart = echarts.init(containerDom, null, {renderer: 'canvas'}); // 等价于: var ...

  5. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十一章：环境光遮蔽（AMBIENT OCCLUSION）

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十一章:环境光遮蔽(AMBIENT OCCLUSION) 学习目标 ...

  6. Leetcode783.Minimum Distance Between BST Nodes二叉搜索树结点最小距离

    给定一个二叉搜索树的根结点 root, 返回树中任意两节点的差的最小值. 示例: 输入: root = [4,2,6,1,3,null,null] 输出: 1 解释: 注意,root是树结点对象(Tr ...

  7. jQuery之父：坚持每天都要写代码

    关于作者:John Resig, jQuery之父,同时也是Pro Javascript Techniques和Secrets of the JavaScript Ninja的作者.他目前主持 Kha ...

  8. QT QSettings读写配置文件

    QT QSettings读写配置文件 需要用一个配置文件来保存程序的初始值,同时也需要做保存修改后的值. 那么借助于QSetting 就可以达到目的. 注意,生成的是 ini 文件! //1.创建和读 ...

  9. iOS学习系列 - 扩展机制category与associative

    iOS学习系列 - 扩展机制category与associative category与associative作为objective-c的扩展机制的两个特性,category即类型,可以通过它来扩展方 ...

  10. 2016中国银行Top100榜单发布 工行排首位

    2016中国银行Top100榜单发布 工行排首位 2016-07-09 15:13:19 第一财经   2016年7月8日,中国银行业协会在京召开“<中国银行业发展报告(2016)>发布会 ...