在5种环境中编写点击元素改变内容和颜色的JavaScript程序

本文适合初学者。为了让初学者能融会贯通JavaScript、jQuery、Vue.js、微信小程序、React这5种JavaScript框架程序的编写，作者在这5种环境中编写了点击元素改变内容和颜色的JavaScript程序，请读者仔细体会在这5种环境中实现程序功能的异同点。

JavaScript

html 复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>第一个JavaScript程序</title>

<script>

window.onload= function(){ //表示在网页载入完毕后执行函数

var demo = document.getElementById("demo");

demo.onclick=msg; } //调用函数，函数名不能加括号

function msg() {

alert ("Hello, the WEB world!");

this.innerHTML="你点击了我";

this.style.border="3px solid red";}

</script>

</head>

<body>

<p id="demo">Click Here</p> <!--通过事件调用函数 -->

</body>

</html>

jQuery写法

html 复制代码

<html>

<body>

<script src="jquery.min.js"></script> <!--引入jQuery环境-->

<script>

$(document).ready(function() {

$("#demo").click(function(){ //页面载入后执行

$(this).html("你点击了我");

$("#demo").css("color","red");

$("#demo").css("textDecoration","underline");

});

});

</script>

<p id="demo">Click Here</p> <!--通过事件调用函数 -->

</body>

</html>

jQuery中的html()函数相当于JavaScript中的innerHTML函数，事件处理函数中的 $("#demo")都可以改写成$ (this)

Vue的写法 index.vue

javascript 复制代码

<template>

<p id="demo" @click="msg" :style="{color:tip}">{{title}}</p>

</template>

<script>

export default {

data() {

return {

title: '这是我的第一个项目',

tip: 'black'

}

},

methods: {

msg: function() {

//alert("Hello, the WEB world!");

this.title = "你点击了我一次";

this.tip = this.tip === 'black' ? 'red' : 'black';

}

}

}

</script>

本例中的Vue采用的是Vue构建方式写法，如果采用引入vue.js方式，将export default替换成const { createApp } = Vue;

createApp(

即可。

微信小程序写法

index.wxml中

html 复制代码

<view bindtap="handle" style="color:{{color}}">

{{title}}

<image wx:if="{{flag}}" src="../images/haibao/62.jpg" data-flag="true"/>

<view>{{person.age}}</view>

</view>

index.js中

javascript 复制代码

Page({

data:{

id:1, title: '王船山简介', flag:true,color:'black',

person:{ name:"王船山", age:"1619年10月-1692年2月" }

},

handle: function(e){

wx.showToast({ title: '你点击了我', })

this.setData({

title:'王夫之故居',color:'red',flag:!e.target.dataset.flag})

}

})

总结：JavaScript涉及到DOM操作，获取DOM元素（网页元素），Vue不涉及获取DOM元素，Vue的插值表达式{{...}}只能用来绑定元素内容，绑定属性名要用:属性名形式。而微信小程序中的插值表达式{{...}}既能绑定元素内容又能绑定元素属性值。

React

使用构建方式创建项目，在App.js文件中写如下代码：

javascript 复制代码

import {useState} from "react";

function App() {

const [data,setData]=useState({css:{color:'black'},title:"会变的图片"})

function handle(e){

setData({css:{color:'red'},title:"看到变化了吗"})

console.log('点击了',e)

}

return (

<>

<h2 id="tit" onClick={handle} style={data.css}>{data.title}</h2>

</>

);

}

export default App;

React中的插值表达式为{...}，插值表达式既能绑定元素内容又能绑定元素属性值。绑定属性值时，注意{}外面不要写引号。CSS属性值要写成JSON对象的形式，不能写成字符串。