Vue2, Vue3 开发单一html页面区别
前言：有时候我们开发一个简单的活动页面，或者一个辅助app的协议页面，并不能直接写一个vue-cli项目，所以，这时候我们就需要使用jquery开发，Vue提供给我们可以使用CDN引入的方式开发页面，带给我们很大的便利，下面是Vue2,Vue3不同的写法写的html页面，给大家参考！ 精通react开发也可以尝试在网站中添加 React
Vue2 使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue 开发单一页面</title>
</head>
<body>
<div id="wrapper" style="display: block;">
<div>{{ message }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var mainDiv = new Vue({
el: '#wrapper',
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
},
created() {
console.log(this)
},
mounted() {
document.getElementById('wrapper').style.display = 'block';
}
})
</script>
</body>
</html>
Vue3 使用方法
vue3支持script单独引入js的形式书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue 开发单一页面 并引入element-plus</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
</head>
<body>
<div id="wrapper" style="display:none;">
<div>{{ state.message }}</div>
<div>{{ state.count }}</div>
<div>{{ page }}</div>
<el-button @click="handleIncrease">add</el-button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
index.js
我用vue2的写法简单写了几个功能没有问题，也可以使用vue3 setup函数写
const App = {
// data() {
// return {
// message: 'You loaded this page on ' + new Date().toLocaleString()
// }
// },
// created() {
// console.log(this)
// },
// mounted() {
// document.getElementById('wrapper').style.display = 'block'
// console.log('mounted')
// },
setup() {
const page = Vue.ref(0) // {value: 0}
const state = Vue.reactive({
count: 0,
message: 'You loaded this page on ' + new Date().toLocaleString()
})
const handleIncrease = () => {
state.count++
page.value++
}
// 异步请求 引入axios
const getUsers = async () => {
try {
const json = await axios(url);
console.log(json)
} catch (e) {
}
};
Vue.onMounted(() => {
document.getElementById('wrapper').style.display = 'block'
console.log('onMounted')
getUsers()
})
return {
page,
state,
handleIncrease
}
}
}
const app = Vue.createApp(App)
app.use(ElementPlus).mount("#wrapper")
