foreword
This is just looking at these things recently, because looking at other places is directly using scaffolding.
I want to use this project directly on html.
So I tried how to use vue3 syntax on html. What
I have figured out so far is that it can be used.
Record it for reference, if there is a bad place, follow-up improvement
renderings
Here is a simple test to see if the array loop of variables can be rendered
and the use of elementul-plus components, including data updates.
There is also the use of monitoring and life cycle. The simplest template is recorded first.
the code
The main one here is that return is to expose variables and methods so that the page can be called.
I directly group variables and methods into groups, which is more convenient.
Here, elementul-plus must be registered in the bottom sentence of createApp, otherwise it cannot be used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue3语法模板</title>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<script src="https://unpkg.com/element-plus"></script>
</head>
<style>
</style>
<body>
<div style="width:100%;" id="app">
<div>{
{
exp_id}}</div>
<div>{
{
fullNum}}</div>
<div v-for="item in dateTime" :key="item">{
{
item}}</div>
<el-button type="primary" @click="upload('更新')">更新</el-button>
<el-button type="success" @click="sets('恢复')">恢复</el-button>
<el-button type="warning" @click="dialog">打开弹框</el-button>
<div>
<el-select v-model="value" class="m-2" placeholder="Select" size="large">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<el-dialog v-model="dialogVisible" title="Tips" width="30%">
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</span>
</template>
</el-dialog>
</div>
</body>
</html>
<script>
Object.assign(window, Vue);
const vue3Composition = {
setup() {
// 变量部分
const data = reactive({
exp_id: '虚拟实验id',
dateTime: [1, 2, 3, 4, 5],
value: '',
dialogVisible: false,
options: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}
]
});
// toRef: 复制 reactive 里的单个属性并转成 ref
// toRefs: 复制 reactive 里的所有属性并转成 ref
const dataRef = toRefs(data)
// 监听
watch(dataRef.exp_id, (newName, oldName) => {
console.log("新数据", newName);
console.log("老数据", oldName);
})
// 计算属性
dataRef.fullNum = computed(() => {
return dataRef.value
});
// 生命周期 mounted
onMounted(() => {
console.log(`我是Mounted生命周期`)
})
// 函数部分
const methods = reactive({
upload(e) {
dataRef.exp_id.value = '修改'
dataRef.dateTime.value = [8, 9, 10, 11, 12]
//this.dialog() //调用其他方法加this可以调用到
},
sets(e) {
dataRef.exp_id.value = '虚拟实验id'
dataRef.dateTime.value = [1, 2, 3, 4, 5]
},
dialog() {
dataRef.dialogVisible.value = true
}
})
return {
...dataRef,
...methods
}
},
}
const app = createApp(vue3Composition).use(ElementPlus).mount("#app");//初始化
</script>