原生JS转Vue格式的思路

最近用Vue 转写原生js 的代码遇到很多坑，但是只要转变思路，很多问题就能迎刃而解。

高堂明镜悲白发

6012人浏览 · 2021-12-05 10:00:32

高堂明镜悲白发 · 2021-12-05 10:00:32 发布

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

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

将这个思路带入Vue中，就是这样的做法：

在data区声明需要多次用到的对象；
mounted区中初始化这些对象；
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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^