prefacio
Esto es solo mirar estas cosas recientemente, porque mirar otros lugares es usar andamios directamente.
Quiero usar este proyecto directamente en html.
Así que probé cómo usar la sintaxis de vue3 en html. Lo que
he descubierto hasta ahora es que se puede usar.
Regístrelo como referencia, si hay un mal lugar, seguimiento de mejora
representaciones
Aquí hay una prueba simple para ver si el bucle de matriz de variables se puede representar
y el uso de componentes elementul-plus, incluidas las actualizaciones de datos.
También existe el uso de monitoreo y ciclo de vida.La plantilla más simple se registra primero.
el código
El principal aquí es que return es exponer variables y métodos para que se pueda llamar a la página.
Agrupo directamente las variables y los métodos en grupos, lo que es más conveniente.
Aquí, elementul-plus debe registrarse en la última oración de createApp, de lo contrario no se puede usar.
<!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>