初识Vue
如果阅读有疑问的话，欢迎评论或私信！！
本人会很热心的阐述自己的想法！谢谢！！！
文章目录
- 起步vue
- 前言
- 创建一个应用
- DOM 中的根组件模板
起步vue
前言
我选择根据vue.js官网提供的文档开始学习，文档相对于教学视频更加简洁，就是可能会难以理解，但是慢慢来就是最快的！
创建一个应用
根据官方文档我们先将vue中的createApp方法通过import语句引用到我们的js文件，vue中createApp方法接受一个参数，参数是一个以.vue为后缀的文件（即组件）。如下所示：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App)
我们将组件引入之后，可以通过createApp的方法mount挂载在我们页面中的任意一个地方，mount中的参数可以是一个选择器（id、class等），就像jquery中的选择器一样。也可以是一个DOM元素，也就是document.getElementById等方法获得到的DOM元素。如下所示：
createApp(App).mount("#app");
DOM 中的根组件模板
在官方文档DOM中的根组件模板中，讲了根组件的模板通常是组件本身的一部分，但也可以直接通过在挂载容器内编写模板来单独提供：也就是可以不引用vue文件（不引用带有template的vue文件），直接在html页面中提供；其中注明通常用于无构建步骤的vue应用程序：通过CDN引入的vue程序。如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.staticfile.net/vue/3.3.4/vue.global.min.js"></script>
//下面的文本插值
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello Vue!",
};
}
}).mount("#app");
</script>
</body>
</html>
原文地址：https://blog.csdn.net/jcz222917/article/details/136456661
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！