Vue学习（二）

最新推荐文章于 2021-03-06 12:07:29 发布

Siyucat

最新推荐文章于 2021-03-06 12:07:29 发布

阅读量112

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42475953/article/details/80896122

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
	<link rel="stylesheet"  href="style.css">
</head>
<body>
	<!--vue-app是根容器-->
	<div id="vue-app">
	<h1> Events </h1>
	<button v-on:click="age++">加一岁</button>
	<button v-on:click="age--" >减一岁</button>
	<p>My age is {{ age }}</p>
	</div>
   <script  src="app.js"></script>

</body>
</html>

将事件具体内容写入js文件中

修改如下：

	<button v-on:click="add">加一岁</button>
	<button v-on:click="subtract">减一岁</button>

app.js

new Vue({
     el:"#vue-app",
     data:{
       age:18
     },
     methods:{
     	add:function() {
     		this.age++;

     	},
     	subtract:function() {
     		this.age--;
     	}

     }
	});

实现获取x，y轴的值：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
	<link rel="stylesheet"  href="style.css">
</head>
<body>
	<!--vue-app是根容器-->
	<div id="vue-app">
	<h1> Events </h1>
	<button @click="add(1)">加一岁</button>
	<button @click="subtract(1)">减一岁</button>


	<button v-on:dblclick="add(1)">加一岁</button>
	<button v-on:dblclick="subtract(1)">减一岁</button>


	<button v-on:dblclick="add(10)">加十岁</button>
	<button v-on:dblclick="subtract(10)">减十岁</button>


	<p>My age is {{ age }}</p>
    
    <div id="canvas" v-on:mousemove="updateXY">{{ x }},{{ y }}</div>


	</div>
   <script  src="app.js"></script>


</body>
</html>

app.js

new Vue({
     el:"#vue-app",
     data:{
       age:18,
       x:0,
       y:0
     },
     methods:{
     	add:function(inc) {
     		this.age+=inc;

     	},
     	subtract:function(dec) {
     		this.age-=dec;
     	},

     	updateXY:function(event) {
         //console.log(event);
         this.x=event.offsetX;
         this.y=event.offsetY;
     	}

     }
	});

style.css

#canvas{
	width:600px;
	padding: 200px 20px;
	text-align: center;
	border: 1px solid #333;
}

Siyucat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（二）

vue事件：点击事件、双击事件、鼠标事件
复制链接

扫一扫

专栏目录