Vue.js 这两个非常基本的vue应用程序之间有什么区别？
我一直在学习Vue.js，我试图让根实例不删除我放在里面的html内容。我的想法是，我可以有一个普通的html页面和Vue“监视”主包装器，如果它运行到Vue组件中，它将由Vue呈现。我在导入vue的CDN时成功地做到了这一点，但在某种程度上没有使用vue cli。我不明白有什么区别 我让这个代码笔通过cdn加载vue.js，它可以毫无问题地呈现Vue.js 这两个非常基本的vue应用程序之间有什么区别？,vue.js,Vue.js,我一直在学习Vue.js，我试图让根实例不删除我放在里面的html内容。我的想法是，我可以有一个普通的html页面和Vue“监视”主包装器，如果它运行到Vue组件中，它将由Vue呈现。我在导入vue的CDN时成功地做到了这一点，但在某种程度上没有使用vue cli。我不明白有什么区别 我让这个代码笔通过cdn加载vue.js，它可以毫无问题地呈现 <div id="app"> <h1>My Vue.js App</h1> <p>{{
<div id="app">
<h1>My Vue.js App</h1>
<p>{{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello world'
}
});
我的Vue.js应用程序
{{message}}
新Vue({
el:“#应用程序”，
数据：{
信息：“你好，世界”
}
});
但在使用vue cli的codesandbox中，什么都不呈现，根元素的内容会闪烁，然后从dom中消失。无论我在主div中输入了什么，它都会在应用程序挂载后立即擦除 我认为问题与CodeSandbox加载Vue应用程序并触发初始渲染的方式有关。如果添加App.vue文件并将main.js文件更改为
import Vue from "vue";
import App from "./App.vue";
// Vue.config.productionTip = false;
new Vue({
el: "#app",
render: h => h(App)
});
<!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" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>codesandbox</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
代码沙盒
这样对我很有效。这是工作版本-在沙箱中，您提供了一个安装点，但不是vue实例要使用的模板。谢谢Steven，但是为什么在沙盒中index.html文件中的内容不使用默认模板呢？因为codesandbox使用的是vuejs运行时，而不是编译器，所以它不能像那样在dom模板中编译。哦，我知道了，我不知道有多个版本。我得读一下，谢谢！谢谢你，迈克。是的，这就是CodeSandbox如何为你的项目提供一个品牌。但我正试图弄明白为什么我必须把我的模板放在第一个应用程序组件中。为什么当我使用CDN（如codepen示例中）时，我可以使用index.html中的html作为根组件的某种默认模板。