最近用Vue 转写原生js 的代码遇到很多坑,但是只要转变思路,很多问题就能迎刃而解。这里不妨借鉴C++中类的概念:

  1. 在类结构中声明公共变量和公共对象;
  2. 在类的构造函数中初始化这些变量和对象;
  3. 类中的各种函数可以供自身其他函数调用,但是主要是供外部调用。

将这个思路带入Vue中,就是这样的做法:

  1. 在data区声明需要多次用到的对象;
  2. mounted区中初始化这些对象;
  3. methods区中的各种方法可以被其他方法调用,但主要供HTML元素触发使用。

实例

HTML代码

首先来看这段代码,通过两个按钮触发改变div颜色的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				height: 300px;
				width: 300px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div id='box1'></div>
		<hr >
		<button type="button" onclick="fillGreen()">填充绿色</button>
		<button type="button" onclick="fillBlue()">填充蓝色</button>
		
		<script type="text/javascript">
			boxStyle=document.getElementById('box1').style
			
			function fillGreen(){
				boxStyle.backgroundColor='green'
			}
			
			function fillBlue(){
				boxStyle.backgroundColor='blue'
			}
			
		</script>
		
	</body>
</html>

在这里插入图片描述

代码分析

这段代码实现了两个功能,即分别将box的颜色设置为蓝色或绿色。在这两个方法中,都用到了对象boxStyle。boxStyle这个对象在程序运行即被初始化。

转写成Vue组件
<template>
  <div id="box1"></div>
  <hr />
  <button type="button" @click="fillGreen()">填充绿色</button>
  <button type="button" @click="fillBlue()">填充蓝色</button>
</template>
<style scoped>
#box1 {
  height: 300px;
  width: 300px;
  background-color: aquamarine;
}
</style>
<script>
export default {
  data() {
    return {
      boxStyle: {},
    };
  },
  mounted() {
    this.boxStyle = document.getElementById("box1").style;
  },
  methods: {
    fillGreen() {
      this.boxStyle.backgroundColor = "green";
    },
    fillBlue() {
      this.boxStyle.backgroundColor = "blue";
    },
  },
};
</script>
Logo

前往低代码交流专区

更多推荐