初识Vue

程序员小井

已于 2024-03-05 17:53:02 修改

阅读量514

点赞数 9

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-03-04 16:51:24 首次发布

本文链接：https://blog.csdn.net/jcz222917/article/details/136456661

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

如果阅读有疑问的话，欢迎评论或私信！！
本人会很热心的阐述自己的想法！谢谢！！！

文章目录

起步vue

起步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>