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. java 生成txt文件

    FileWriter fileWriter = new FileWriter("C:/Users/li/Desktop/a.txt"); fileWriter.write(“aaa ...

  2. UITextFieldDelegate 说明

    - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField  // 返回YES,允许进行编辑 - (void)textFieldDidBe ...

  3. Git-命令行-使用 Tag 标记你的代码

    前言 正文开始之前,我想我们需要弄明白几个问题: 1.tag 是什么? 2.使用tag 的好处? 3.tag 和 branch 的区别以及使用场景? tag 是什么? tag , 翻译过来是标签的意思 ...

  4. 串行FLASH文件系统FatFs---转自野火论坛

    为了支持长文件名,需要用到FATFS源码中的cc936.c的两个函数ff_convert,ff_wtoupper:这里面直接用了两个大数组(127KB)来做unicode转gbk(OEM)的对照表,这 ...

  5. 调整代码生成工具Database2Sharp的Winform界面生成，使其易于列表工具栏的使用。

    在Winform界面开发的时候,有时候我们客户喜欢把功能放在列表界面的顶部,这样界面和功能整齐放置,也是一种比较美观的方式,基于这种方式的考虑,改造了代码生成工具的Winform界面生成规则,把增删改 ...

  6. Java多线程编程核心技术(二)对象及变量的并发访问

    本文主要介绍Java多线程中的同步,也就是如何在Java语言中写出线程安全的程序,如何在Java语言中解决非线程安全的相关问题.阅读本文应该着重掌握如下技术点: synchronized对象监视器为O ...

  7. Charles 抓包工具安装和采坑记录

    Charles 抓包工具安装和采坑记录 网络抓包是解决网络问题的第一步,也是网络分析的基础.网络出现问题,第一步肯定是通过抓包工具进行路径分析,看哪一步出现异常.做网络爬虫,第一步就是通过抓包工具对目 ...

  8. 实验楼----PHP大法

    地址:http://www.shiyanbar.com/ctf/2008 题目:http://ctf5.shiyanbar.com/DUTCTF/index.php

  9. Mixing x86 with x64 code (混合编写x86和x64代码)

    几个月前我小小的研究了在WOW64下的32位进程中运行native x64代码. 第二个设想是在64位进程下运行x86代码.它们都是可以的,如我google的一样, 已经有人在使用这两种方法了: ht ...

  10. vue 使用sass 和less

    npm i sass-loader --save -dev(-D)