前言：有時候我們開發一個簡單的活動頁面，或者一個輔助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")