我有一个旧项目，我想使用Vue来显示或隐藏其中一个表单的一些字段，我正在从CDN导入Vue并初始化一个新的Vue应用程序，我尝试为项目的主体设置一个id，但它不起作用，然后我在主体部分创建了一个div，包装所有现有代码，但结果是所有内容都不见了，并给出了一个空白页面。如果我用表单id初始化Vue，那么现在表单为空。
我已经检查了Vue是在创建的生命周期中添加console.log导入的，它是有效的，问题是当我用Vue初始化中指定的id包装页面时，页面的旧内容丢失了。
这是我的代码：
const vueApp = new Vue({
el: '#my-form',
data() {
return {
selectedProductType: "Producto 3x2 o 2x1",
}
},
created() {
console.log("+++++++++++++++++++++++++++++++++++++++++ CREATED");
},
})<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body class="fixed-layout skin-blue-dark p-0" id="page-top" oncopy="return false" oncut="return false" oncontextmenu="return false">
<p>A LOT OF CONTENT HERE</p>
<form action="" method="POST" class="form" id="my-form" data-action="create">
<p>A LOT OF CONTENT HERE</p>
<label for="name">Tipo de producto</label>
<select class="form-control" name="product_type" id="product-type" v-model="selectedProductType" required>
<option value="" disabled selected>Selecciona...</option>
<option value="Producto con descuento">Producto con descuento</option>
<option value="Producto 3x2 o 2x1">Producto 3x2 o 2x1</option>
<option value="Producto en combo">Producto en combo</option>
<option value="Producto no promocional">Producto no promocional</option>
</select>
<br>
{{ selectedProductType }}
</form>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
</html>我尝试过用不同的div ID包装部分代码，但它始终不起作用。我想知道是否有可能在我的用例中使用Vue，以及如何实现它。
谢谢。
编辑1:我已经在当前的代码段中添加了一些代码，但我不知道为什么它在代码段中有效，而在我的工作代码中无效。
它缺少Vue组件的创建，以及带有初始化元素id和Vue-components标记的div。Vue的初始化部分对我来说很好，只是确保在定义组件后进行。
<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body class="fixed-layout skin-blue-dark p-0" id="page-top" oncopy="return false" oncut="return false" oncontextmenu="return false">
<p>A LOT OF CONTENT HERE</p>
<div id="my-form">
<my-form></my-form>
</div>
<script>
Vue.component('my-form', {
template:`
<form action="" method="POST" class="form" id="my-form" data-action="create">
<p>A LOT OF CONTENT HERE</p>
<label for="name">Tipo de producto</label>
<select class="form-control" name="product_type" id="product-type" v-model="selectedProductType" required>
<option value="" disabled selected>Selecciona...</option>
<option value="Producto con descuento">Producto con descuento</option>
<option value="Producto 3x2 o 2x1">Producto 3x2 o 2x1</option>
<option value="Producto en combo">Producto en combo</option>
<option value="Producto no promocional">Producto no promocional</option>
</select>
<br>
{{ selectedProductType }}
</form>`,
data() {
return {
selectedProductType: "Producto 3x2 o 2x1",
}
}
})
const vueApp = new Vue({
el: '#my-form',
created(){
console.log("+++++++++++++++++++++++++++++++++++++++++ CREATED");
}
})
</script>
</body>
</html>
这应该行得通！
创建Vue.component时需要data(){return{}}，如果是new Vue，则需要data:{}
尝试data:{}而不是data(){return{}}，如下所示：
const vueApp = new Vue({
el: '#my-form',
data: {
selectedProductType: "Producto 3x2 o 2x1"
}
})
看起来我只需要在head部分设置Vue，而不是在body标签的末尾，我从CDN添加了Vue:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
然后，在所有组件都加载到body标签的底部后，我初始化了它。