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. QT socket网络通信

    https://blog.csdn.net/u013007900/article/details/50411796 里主要讲解如何实现TCP和UDP的简单通信. socket简介在LINUX下进行网络 ...

  2. 变量的值与判断的结果有关，使用Set Variable If

    1.有时候变量的值在赋值时,会依据情况来赋值.这个时候就要用到:Set Variable If ${result} BuiltIn.Set Variable 10 ${my_result}= Buil ...

  3. nova系列一：虚拟化介绍

    一 什么是虚拟化 虚拟化说白了就是本来是一个完整的资源,切分或者说虚拟成多份,让这多份资源都使用起来,物尽其用,减少了浪费,提高了利用率,省了钱. 虚拟化(Virtualization)技术最早出现在 ...

  4. [Flume]使用 Flume 来传递web log 到 hdfs 的例子

    [Flume]使用 Flume 来传递web log 到 hdfs 的例子: 在 hdfs 上创建存储 log 的目录: $ hdfs dfs -mkdir -p /test001/weblogsfl ...

  5. Winform开发框架之字段权限控制

    在我的很多Winform开发项目中(包括混合框架的项目),统一采用了权限管理模块来进行各种权限的控制,包括常规的功能权限(按钮.菜单权限).数据权限(记录的权限),另外还可以进行字段级别的字段权限控制 ...

  6. 小L的试卷

    题目描述 小L期末考试结束,高高兴兴放假回家了,可是那么多试卷,老师还要加班批改,有n份试卷由k个老师批改,n份试卷进行了密封编号,由于试卷上的做题情况和书写的规范程序不一样,批改不同的试卷用时也可能 ...

  7. POJ - 3264 线段树模板题 询问区间最大最小值

    这是线段树的一个模板题,给出一串数字,然后询问区间的最大最小值. 这个其实很好办,只需把线段树的节点给出两个权值,一个是区间的最小值,一个是区间的最大值,初始化为负无穷和正无穷,然后通过不断地输入节点 ...

  8. Consecutive Subsequence CodeForces - 977F （map优化DP）·

    You are given an integer array of length nn. You have to choose some subsequence of this array of ma ...

  9. python中filter(),reduce()函数

    filter()函数 是 Python 内置的另一个有用的高阶函数,filter()函数接收一个函数 和一个list,这个函数的作用是对每个元素进行判断,返回 True或 False,filter() ...

  10. DelegatingFilterProxy作用浅析

    <filter> <filter-name>secondDomainFilter</filter-name> <filter-class>org.spr ...