本次介绍的Demo是比较基础的,因为它涉及Vue的基础部分而已,它叫敲击瓶子(利用换图片假装敲到碎了)
效果
最基础的知识点
- vue基本指令使用:如v-model、v-show
- 绑定css属性的方式
- 事件处理(按钮点击事件)
首先我们需要写好样式和引入vue.js,还需要有两张图片
先完成初始静态页面,这里直接是官网下载vue.js引入本地使用,还有自己写的样式文件konck.css
html文件代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="knock.css">
</head>
<body>
<div id="app">
<!--图片-->
<div class="bag"></div>
<!--状态信息-->
<div class="progress">
<div class="pro-bar"></div>
</