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. 8.oop-多态

    一.继承1.定义:子类继承父类,会继承父类的属性和方法2.语法:extends关键字 子类 extends 父类3.特点:java中的继承是单一继承,子类只能继承一个父类,但是父类可以有多个子类4.用 ...

  2. pytorch visdom可视化工具学习—1—安装和使用

    1.安装 安装命令: (deeplearning) userdeMBP:~ user$ pip install visdomCollecting visdom  Downloading https:/ ...

  3. Linux 使用nexus搭建maven私服

    系统:LINUX           JDK:已安装           Maven:已安装           Nexus Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维 ...

  4. 机器学习三剑客之Pandas中DataFrame基本操作

    Pandas 是基于Numpy 的一种工具,是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具.Pandas提供了大量能使我们快速便捷 ...

  5. Java IO（二）——RandomAccessFile

    一.RandomAccessFile RandomAccessFile类可以说是Java语言中功能最为丰富的文件访问类,它提供了众多的文件访问方法.RandomAccessFile类支持"随 ...

  6. 蓝牙BLE设备主机重启回连流程分析

    如果一个BLE设备已经与蓝牙中心设备连接上,那么当中心设备的断电重启,其依然会和配对过的BLE设备连接上,而不需要重新走配对的流程,这个过程叫做回连. 这篇文章就分析一下当中心设备断电重启之后,其与B ...

  7. Angular下载文件

    public Down(path: string) { return this.http.get(path, { responseType: "blob" }).subscribe ...

  8. Windows Community Toolkit 3.0 - UniformGrid

    概述 UniformGrid 控件是一个响应式的布局控件,允许把 items 排列在一组均匀分布的行或列中,以填充整体的可用显示空间,形成均匀的多个网格.默认情况下,网格中的每个单元格大小相同. 这是 ...

  9. 微服务之:从零搭建ocelot网关和consul集群

    介绍 微服务中有关键的几项技术,其中网关和服务服务发现,服务注册相辅相成. 首先解释几个本次教程中需要的术语 网关 Gateway(API GW / API 网关),顾名思义,是企业 IT 在系统边界 ...

  10. position fixed 相对于父级定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...