（腾讯课堂学习小demo：https://ke.qq.com/course/256052）

一、简单的指令应用 ——打击灭火器

图片素材点击腾讯课堂的链接获取

     

html：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="author" content="xing.org1^-^">

     <title>敲烂灭火器</title>

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

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

 </head>

 <body>

     <div id="app">

         <div class="img-box" v-bind:class="{imgburst:ended}"></div>

         <div v-show="!ended">生命值剩余：{{health}} %</div>

         <div v-show="ended">你赢了！</div>

         <div class="progress">

             <div class="progress-child" v-bind:style="{width: health + '%'}"></div>

         </div>

         <div class="button-box">

             <button class="btn1" v-on:click="blow" v-bind:class="{disabled: ended}" >使劲敲</button>

             <button v-on:click="restart">重新开始</button>

         </div>

     </div>

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

 </body>

 </html>

html

总结：

v-bind:class的后边，是一个对象，返回布尔值！！！

并且，绑定的class样式名，不能有中横线链接符，比如：img-brust,这种会导致vue解析错误

css:

 /*京东初始化*/

 * {

     margin:;

     padding:;

     font-family: "微软雅黑"

 }

 em,i {

     font-style: normal

 }

 li {

     list-style: none

 }

 img {

     border:;

     vertical-align: middle

 }

 button {

     cursor: pointer

 }

 a {

     color: #666;

     text-decoration: none

 }

 a:hover {

     color: #c81623

 }

 div{

     text-align: center;

     margin-bottom: 5px;

 }

 .img-box{

     width: 200px;

     height: 539px;

     margin: 0 auto;

     background: url("img/bag.png") no-repeat;

 }

 .imgburst{

     background: url("img/bag-burst.png") no-repeat;

 }

 .progress{

     width: 200px;

     height: 20px;

     margin: 0 auto;

     overflow: hidden;

     background: #fff;

     border-radius: 5px;

     border: 2px solid red;

 }

 .progress-child{

     width: 100px;

     height: 20px;

     background: red;

 }

 .button-box{

     width: 213px;

     margin: 20px auto;

     overflow: hidden;

 }

 button{

     padding: 10px 20px;

     margin-left: 10px;

     border-radius: 5px;

     border: 1px solid #999;

     background: #e5ffc9;

 }

 button:hover,button:focus{

     outline: none;}

 button:hover{

     background: #4488ff;

     border-color: #4488ff;

     color: #fff;

 }

 .btn1:hover{

     background: red;

     border-color: red;

 }

 button.disabled{

     cursor: not-allowed;

     background: #999

 }

css

Vue.js:

 new Vue({

     el: "#app",

     data: {

         health: 100,

         ended: false

     },

     methods: {

         blow: function(){

             this.health -= 10;

             if(this.health <= 0){

                 this.ended = true;

                 this.health = 0

             }

             // console.log(this.health,this.ended)

         },

         restart: function(){

             this.health = 100;

             this.ended = false;

             // console.log(this.health,this.ended)

         }

     }

 })

Vue实例

注意：

console.log打印很有帮助

　　

二、v-on鼠标移动事件 —— 时刻显示鼠标地理位置

 html:

 <div id="canvas" @mousemove="mouseMove">x: {{mouseX}}, y: {{mouseY}}

                         <em class="em" @mousemove.stop="">在我的区域内停止更新，都是阻止事件（冒泡）修饰符的功劳</em>

                     </div>

html Code

css:

 #canvas{

     width: 680px;

     padding: 150px 0;

     text-align: center;

     background: #dedede;

 }

 .em{

     display: block;

     padding: 10px 5px;

         background: #f5c9c9;

     font-style: normal;

     color: #333;

 }

css

Vue.js

 new Vue({

     el: "#vue-app",

     data: {

         mouseX: 0,

         mouseY: 0,

     },

     methods:{

         mouseMove: function(event){

             console.log("5、我是mouseMove函数");

             // console.log(event);

             this.mouseX = event.offsetX;

             this.mouseY = event.offsetY;

         }

     }

 })

Vue.js

注意：

console.log把event事件输出后，寻找到offsetX和Y属性的

　　

声明：

请尊重博客园原创精神，转载或使用图片请注明：

博主：xing.org1^

出处：http://www.cnblogs.com/padding1015/

来源：腾讯课堂 https://ke.qq.com/course/256052#term_id=100301895

Vue-小demo、小效果 合集（更新中...）的更多相关文章

  1. C# 调用windows api 操作鼠标、键盘、窗体合集...更新中

    鼠标操作window窗体合集...更新中 1.根据句柄查找窗体 引自http://www.2cto.com/kf/201410/343342.html 使用SPY++工具获取窗体   首先打开spy+ ...

  2. 某宝的微信小程序源码合集

    这是我在某宝买的小程序源码合集.能用的我用不到.. 我用的到的有的有没后端.仅供个人参考,严禁侵权或商业用途! 下载地址:https://pan.baidu.com/s/1cQEQ17LdN-7hxD ...

  3. iOS酷炫动画效果合集

    iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...

  4. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  5. 14个HTML5实现的效果合集

    HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品. Form Follows Function就 ...

  6. [转]VUE优秀UI组件库合集

    原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...

  7. CSS3 动画效果合集

    @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * License ...

  8. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  9. iOS动画效果合集、飞吧企鹅游戏、换肤方案、画板、文字效果等源码

    iOS精选源码 动画知识运用及常见动画效果收集 3D卡片拖拽卡片叠加卡片 iFIERO - FLYING PENGUIN 飞吧企鹅SpriteKit游戏(源码) Swift封装的空数据提醒界面Empt ...

随机推荐

  1. Go语言极速入门手册

    Github: https://github.com/coderzh/CodeTips /* gotips_test.go: Golang速学速查速用代码手册 Source: github.com/c ...

  2. 给Linux系统/网络管理员的nmap的29个实用例子

    Nmap亦称为Network Mapper(网络映射)是一个开源并且通用的用于Linux系统/网络管理员的工具.nmap用于探查网络.执行安全扫描.网络核查并且在远程机器上找出开放端口.它可以扫描在线 ...

  3. 4、flask之分页插件的使用、添加后保留原url搜索条件、单例模式

    本篇导航: flask实现分页 添加后保留原url搜索条件 单例模式 一.flask实现分页 1.django项目中写过的分页组件 from urllib.parse import urlencode ...

  4. jq实现数字增加或者减少的动画

    效果图: 1.HTML: <div class="up"></div> <br> <div class="down"& ...

  5. django新手第一课

    django是基于python的一个web框架,大致结构如下: 在pycharm,python2.7,django1.8,mysql都装好的情况下,现在开始django的初试: 一.基础启动djang ...

  6. filter-api文档

    git地址:https://github.com/jiqianqin/filters 不断优化中,欢迎加入讨论- filter-tags 效果图: 参数 说明 格式 备注 data 展示的数据 [{ ...

  7. scrapy回调函数传递参数

    scrapy.Request 的callback传参的两种方式 1.使用 lambda方式传递参数 def parse(self, response): for sel in response.xpa ...

  8. nodejs之socket.io模块——实现了websocket协议

    Nodejs实现websocket的4种方式:socket.io.WebSocket-Node.faye-websocket-node.node-websocket-server,主要使用的是sock ...

  9. jqeury显示前几个，隐藏后几个，点击后隐藏前几个显示后几个

    <script type="text/javascript"> $(".ul li").each(function(){ if($(this).in ...

  10. 关于 frame的一些基本知识

    关于 frame的一些基本知识只是摘抄了一部分,供初学者参考. b.帧速率: 帧速率是每秒显示的图像数.标准影片(NTSC) 是29.97 帧第秒 (fps),电影是每秒24 帧fps.欧洲标准是(P ...