<!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. 微服务Eureka使用详解

    Eureka是spring cloud中的一个负责服务注册与发现的组件.遵循着CAP理论中的A(可用性)P(分区容错性). 一个Eureka中分为eureka server和eureka client ...

  2. JSP Web第七章整理复习 Servlet基础知识

    P206-208 Servlet项目的创建,web.xml的配置及标签含义,相关程序 创建:new 一个Servlet类,继承自javax.servlet.http.HttpServlet; 写doG ...

  3. Leetcode872.Leaf-Similar Trees叶子相似的树

    请考虑一颗二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一颗叶值序列为 (6, 7, 4, 9, 8) 的树. 如果有两颗二叉树的叶值序列是相同 ...

  4. COOKIE与SESSION的详解

    cookie与session的小例子: 包含cookie记住登录名,session防止用户非法登录2个例子: 问我拿吧,这个下载连接挂了 描述 cookie过程描述 网站为了辨别用户身份.进行 ses ...

  5. 二.使用JDBC对数据库CRUD

    一.statement对象介绍 Jdbc中的statement对象用于向数据库发送SQL语句,想完成对数据库的增删改查,只需要通过这个对象向数据库发送增删改查语句即可. Statement对象的exe ...

  6. oracle编写分页过程

    有了上面的基础,相信大家可以完成分页存储过程了,要求,请大家编写一个存储过程,要求可以输入表名.每页显示记录数.当前页.排序字段(deptno降序).返回总记录数,总页数和返回结果集. 把一个字符串, ...

  7. acm一路走来的体验和想法

    2017年参加天梯赛 作为大一萌新去参加人生第一场正规的比赛,学校拿钱砸的.我呢,是十分激动的,是时候检验下自己的编程水平了,也有一丝慌张,怕给团队抹黑. 然后呢,晒一下自己成绩. 我本来觉得我和他们 ...

  8. Linux下的python安装

    centos7安装python3 以及tab补全功能   1.安装python3 1.1下载python源码包 网址:https://www.python.org/downloads/release/ ...

  9. MyEclipse2014，java文件无法编译，run as上是none applicable，不是文件本身的问题

    1.配置一下JDK目录 2.window -> Preferences -> java -> Installed JREs -> Add

  10. [CS]C#操作word 2016-04-17 18:30 1506人阅读 评论(35) 收藏

    最近在做的项目已经改了好几版,最近这一版用到了word,当然不是直接使用word,而是使用第三方的ActiveX控件:dsoframer.ocx,此控件的使用和其他控件的使用流程没有任何区别,接下来介 ...