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. Linux 任务计划 crontab 配置概要与常见问题

    Linux 可以利用 crontab 来实现定时任务,自动化操作.本文对此进行简要说明. crontab 操作示例 列出定时任务   crontab -l #列出所有的定时任务,如果没有定时任务,返回 ...

  2. XSS简介

    xss又叫css,为了与前端的css区别,所以叫xss,即跨站脚本攻击. XSS原理解析 XSS攻击是在网页中嵌入客户端恶意脚本代码,恶意代码一般都是javascript编写的.想要深入研究XSS,必 ...

  3. 20175330 实验二《Java面向对象程序设计》实验报告

    一.前期准备:unit的安装与使用:打开idea,Preferences中点击Plugins,在market中搜索junit,如图点选JUnitGenerator V2.0进行安装,安装后会显示ins ...

  4. sendmail简单配置

    yum -y install sendmail sendmail-cfservice sendmail startservice saslauthd statusif [ $? -ne 0 ];the ...

  5. Ubuntu18.04安装英伟达显卡驱动

    前几天买了一张RTX2060显卡,想自学一下人工智能,跑一些图形计算,安装Ubuntu18.04后发现英伟达显卡驱动安装还是有点小麻烦,所以这里记录一下安装过程,以供参考: 1.卸载系统里低版本的英伟 ...

  6. BZOJ 5306 [HAOI2018] 染色

    BZOJ 5306 [HAOI2018] 染色 首先,求出$N$个位置,出现次数恰好为$S$的颜色至少有$K$种. 方案数显然为$a_i=\frac{n!\times (m-i)^{m-i\times ...

  7. Java获取文件Content-Type的四种方法

    HTTP Content-Type在线工具 有时候我们需要获取本地文件的Content-Type,已知 Jdk 自带了三种方式来获取文件类型. 另外还有第三方包 Magic 也提供了API.Magic ...

  8. Item 20: 使用std::weak_ptr替换会造成指针悬挂的类std::shared_ptr指针

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 矛盾的是,我们很容易就能创造出一个和std::shared_ptr ...

  9. 朱晔的互联网架构实践心得S1E7：三十种架构设计模式（上）

    朱晔的互联网架构实践心得S1E7:三十种架构设计模式(上) [下载本文PDF进行阅读] 设计模式是前人通过大量的实践总结出来的一些经验总结和最佳实践.在经过多年的软件开发实践之后,回过头来去看23种设 ...

  10. 六、Xadmin忘记密码

    1.如果用的是django自带的User模块,忘记了超级用户的密码,可以通过以下方法找回密码: 终端进入项目根目录,然后输入如下命令: python manage.py shell 然后在python ...