Vue-小demo小效果合集（更新中...）

Posted 2020-10-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-小demo小效果合集（更新中...）相关的知识，希望对你有一定的参考价值。

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

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

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

技术分享图片

html：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="author" content="xing.org1^-^">
 6     <title>敲烂灭火器</title>
 7     <link rel="stylesheet" href="style.css">
 8     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 9 </head>
10 <body>
11     <div id="app">
12         <div class="img-box" v-bind:class="{imgburst:ended}"></div>
13         <div v-show="!ended">生命值剩余：{{health}} %</div>
14         <div v-show="ended">你赢了！</div>
15         <div class="progress">
16             <div class="progress-child" v-bind:style="{width: health + ‘%‘}"></div>
17         </div>
18         <div class="button-box">
19             <button class="btn1" v-on:click="blow" v-bind:class="{disabled: ended}" >使劲敲</button>
20             <button v-on:click="restart">重新开始</button>
21         </div>
22     </div>
23     <script src="vueJson.js"></script>
24 </body>
25 </html>

html

总结：
v-bind:class的后边，是一个对象，返回布尔值！！！
并且，绑定的class样式名，不能有中横线链接符，比如：img-brust,这种会导致vue解析错误

css:

 1 /*京东初始化*/
 2 * {
 3     margin: 0;
 4     padding: 0;
 5     font-family: "微软雅黑"
 6 }
 7 em,i {
 8     font-style: normal
 9 }
10 li {
11     list-style: none
12 }
13 img {
14     border: 0;
15     vertical-align: middle
16 }
17 button {
18     cursor: pointer
19 }
20 a {
21     color: #666;
22     text-decoration: none
23 }
24 a:hover {
25     color: #c81623
26 }
27 div{
28     text-align: center;
29     margin-bottom: 5px;
30 }
31 .img-box{
32     width: 200px;
33     height: 539px;
34     margin: 0 auto;
35     background: url("img/bag.png") no-repeat;
36 }
37 .imgburst{
38     background: url("img/bag-burst.png") no-repeat;
39 }
40 .progress{
41     width: 200px;
42     height: 20px;
43     margin: 0 auto;
44     overflow: hidden;
45     background: #fff;
46     border-radius: 5px;
47     border: 2px solid red;
48 }
49 .progress-child{
50     width: 100px;
51     height: 20px;
52     background: red;
53 }
54 .button-box{
55     width: 213px;
56     margin: 20px auto;
57     overflow: hidden;
58 }
59 button{
60     padding: 10px 20px;
61     margin-left: 10px;
62     border-radius: 5px;
63     border: 1px solid #999;
64     background: #e5ffc9;
65 }
66 button:hover,button:focus{
67     outline: none;}
68 button:hover{
69     background: #4488ff;
70     border-color: #4488ff;
71     color: #fff;
72 }
73 .btn1:hover{
74     background: red;
75     border-color: red;
76 }
77 button.disabled{
78     cursor: not-allowed;
79     background: #999
80 }

css

Vue.js:

 1 new Vue({
 2     el: "#app",
 3     data: {
 4         health: 100,
 5         ended: false
 6     },
 7     methods: {
 8         blow: function(){
 9             this.health -= 10;
10             if(this.health <= 0){
11                 this.ended = true;
12                 this.health = 0
13             }
14             // console.log(this.health,this.ended)
15         },
16         restart: function(){
17             this.health = 100;
18             this.ended = false;
19             // console.log(this.health,this.ended)
20         }
21     }
22 })

Vue实例

注意：
console.log打印很有帮助

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

技术分享图片

html:

1 <div id="canvas" @mousemove="mouseMove">x: {{mouseX}}, y: {{mouseY}}
2                         <em class="em" @mousemove.stop="">在我的区域内停止更新，都是阻止事件（冒泡）修饰符的功劳</em>
3                     </div>

html Code

css:

 1 #canvas{
 2     width: 680px;
 3     padding: 150px 0;
 4     text-align: center;
 5     background: #dedede;
 6 }
 7 .em{
 8     display: block;
 9     padding: 10px 5px;
10         background: #f5c9c9;
11     font-style: normal;
12     color: #333;
13 }

css

Vue.js

 1 new Vue({
 2     el: "#vue-app",
 3     data: {
 4         mouseX: 0,
 5         mouseY: 0,
 6     },
 7     methods:{
 8         mouseMove: function(event){
 9             console.log("5、我是mouseMove函数");
10             // console.log(event);
11             this.mouseX = event.offsetX;
12             this.mouseY = event.offsetY;
13         }
14     }
15 })

Vue.js

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

以上是关于Vue-小demo小效果合集（更新中...）的主要内容，如果未能解决你的问题，请参考以下文章

VS Code中小程序与Vue常用插件合集（前端合集）

一个基于ES6+webpack的vue小demo

一周一个小demo — vue.js实现备忘录功能

[前端练习小Demo]分别用jquery和vue实现轮播图

微信小程序特殊效果合集第一期

Vue小实例

Vue-小demo小效果 合集（更新中...）

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

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

Vue-小demo小效果合集（更新中...）