vue1.html

 <!DOCTYPE html>

 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"

       xmlns:v-on="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Vue Demo</title>

     <!--自选版本-->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <!-- 生产环境版本，优化了尺寸和速度 -->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

     <link href="style.css" rel="stylesheet">

 </head>

 <body>

 <div id="app">

     <!--变量和方法调用-->

     <h1>{{ greet("night") }}</h1>

     <p>{{ message }}</p>

     <hr>

     <p>

         <!--数据绑定-->

         <a v-bind:href="website">百度</a>

     </p>

     <p v-html="websiteTag"></p>

     <hr>

     <div>

         <div>

             <!--事件绑定-->

             <button v-on:click="add(1)">单击加一岁</button>

             <button @click="sub(1)">单击减一岁</button>

             <!--双击操作-->

             <button v-on:dblclick="add(10)">双击加十岁</button>

             <button @dblclick="sub(10)">双击减十岁</button>

         </div>

         <p>我的年龄是{{age}}</p>

         <hr>

         <div id="canvas" v-on:mousemove="updateXY">

             {{x}} ,{{y}}

         </div>

     </div>

 </div>

 <script src="app.js"></script>

 <hr>

 <div id="app-2">

   <span v-bind:title="message">

     鼠标悬停几秒钟查看此处动态绑定的提示信息！

   </span>

 </div>

 <script src="app2.js"></script>

 </body>

 </html>

app.js

 var app = new Vue({

     el: '#app',

     data: {

         name: "Tom",

         message: 'Hello Vue!',

         website: "http://www.baidu.com",

         websiteTag: "<a href='http://www.baidu.com'>百度Tag</a>",

         age: 30,

         x: 0,

         y: 0,

     },

     methods: {

         greet: function (time) {

             return 'Good ' + time + '！' + this.name;

         },

         // 事件绑定

         add: function (n) {

             this.age += n;

         },

         sub: function (n) {

             this.age -= n;

         },

         updateXY: function (event) {

             // console.log(event);

             this.x = event.offsetX;

             this.y = event.offsetY;

         }

     },

 })

app2.js

 var app2 = new Vue({

     el: '#app-2',

     data: {

         message: '页面加载于 ' + new Date().toLocaleString()

     }

 })

style.css

 #canvas {

     width: 600px;

     padding: 200px 20px;

     text-align: center;

     border: 1px solid;

 }

截图：

Vue之变量、数据绑定、事件绑定使用举例的更多相关文章

  1. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  2. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  3. vue.js的一些事件绑定和表单数据双向绑定

    知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...

  4. vue学习(四) v-on:事件绑定

    //html <div id="app"> <input type="button" value="ok" v-bind: ...

  5. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  6. 【Angular 5】数据绑定、事件绑定和双向绑定

    本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...

  7. vuejs学习笔记（1）--属性，事件绑定，ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  8. vuejs学习笔记（2）--属性，事件绑定，ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  9. Vue 入门之数据绑定

    什么是双向绑定? Vue 框架很核心的功能就是双向的数据绑定. 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的.通俗点说就是,Vue 对象的改变会直接影响到 HTML 的 ...

随机推荐

  1. 在JS中调用CS里的方法(PageMethods)

    在JS中调用CS里的方法(PageMethods) 2014年04月28日 11:18:18 被动 阅读数:2998   最近一直在看别人写好的一个项目的源代码,感觉好多东西都是之前没有接触过的.今天 ...

  2. python 的__init__ 和__new__ 区别

    在此介绍一下  __init__ 和  __new__ 先后调用的区别 代码如下: # __init__ 和 __new__的区别 # 通常在编代码时,__init__ 较为常见,但是__new__却 ...

  3. EntityFramework Core并发导致显式插入主键问题

    前言 之前讨论过EntityFramework Core中并发问题,按照官网所给并发冲突解决方案以为没有什么问题,但是在做单元测试时发现too young,too simple,下面我们一起来看看. ...

  4. 【教程】switch上的Human Fall Flat如何设置本地双人？

    1. 保证两个手柄已插入主机上 2. 进入游戏至游戏开始界面 3. 将主机插入拓展坞,等待电视显示 4. 稍等数秒,电视上会提示使用手柄方式 5. 此时按照多人游戏的手柄操作方法即可

  5. Webpack+Typescript 简易配置

    教程:https://www.cnblogs.com/yasepix/p/9294499.html http://developer.egret.com/cn/github/egret-docs/ex ...

  6. MyBatis + MySQL返回插入成功后的主键id

    这是最近在实现perfect-ssm中的一个功能时碰到的一个小问题,觉得需要记录一下,向MySQL数据库中插入一条记录后,需要获取此条记录的id值,以生成对应的key值存入到redis中,id为自增i ...

  7. 微软Ignite2018——微软宣布新的学习平台：Microsoft Learn

    Ignite 2018 首日感受 头一次参加美国的微软 Ignite 大会,确实规模比国内的大不少.23日是 MVP & RD 的 Pre Day(MVP即Most Valuable Prof ...

  8. CodeForces 719A. Vitya in the Countryside

    链接:[http://codeforces.com/group/1EzrFFyOc0/contest/719/problem/A] 题意: 给你一个数列(0, 1, 2, 3, 4, 5, 6, 7, ...

  9. Mike and gcd problem CodeForces - 798C （贪心思维+数论）

    题目链接 比较棒的一道题, 题意: 给你一个N个数的数组,让你用尽量少的操作使整个数组的gcd大于1,即gcd(a1 ,a2,,,,an) > 1 如果可以输出YES和最小的次数,否则输出NO ...

  10. 个人博客作业-week5-敏捷开发方法读后感

    满篇英文对一个非单词狂魔来说真的是很吃力啊… 敏捷软件开发方法是一种从1990年代开始逐渐引起广发关注的一些新型软件开发方法,是一种应对快速变化的需求的一种软件开发能力,他们的具体名称.理念.过程.术 ...