Vue框架入门教程

遇见~未来

已于 2025-02-27 15:53:45 修改

阅读量1k

点赞数 23

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

于 2025-02-27 15:42:36 首次发布

本文链接：https://blog.csdn.net/2301_76428778/article/details/145906027

版权

84 篇文章

订阅专栏

引入Vue.js文件
使用<script>标签引入下载的Vue.js文件，例如：
```
<script src="path/to/vue.js"></script>
```
引入后，Vue会成为全局变量。
指定挂载位置
在HTML的<body>标签中创建一个用于挂载Vue实例的元素，例如：
```
<div id="app"></div>
```
该元素是Vue实例渲染内容的目标容器。
创建并挂载Vue实例
在<script>标签内，通过new Vue()创建Vue实例。例如：
```
new Vue({
    template: '<h1>Hello, Vue!</h1>'
}).$mount('#app');
```

Vue实例创建机制
必须通过new关键字创建Vue实例，创建过程涉及原型链和构造函数相关操作，让实例能够使用构造函数prototype上的方法，并设置自身属性和方法。
配置对象与template
Vue构造函数的参数是一个options配置对象，template是其中一个配置项。其值为模板字符串，包含符合Vue语法规则的代码，会被Vue编译器编译成浏览器可识别的HTML代码。
$mount方法作用
$mount方法负责将Vue实例挂载到指定位置，它会把编译后的HTML代码渲染到目标元素上。目标元素会被替换。如果使用选择器指定位置，匹配到多个元素时，Vue只会选择第一个进行挂载。

data配置项用于为Vue实例提供数据，实现动态渲染页面。它的值有两种写法：
- 对象形式：
```
data: { name: "李四", age: 18 }
```
- 函数形式（推荐）：
```
data() {
    return { name: "章三", age: 28 };
}
```
在模板中，通过{{}}插值语法（也叫胡子语法）获取data中的数据，例如：
```
<h1>我叫{{name}}, 我今年{{age}}岁了</h1>
```
data支持多级数据结构，可逐级获取。

data是Vue实例的数据对象。Vue编译器编译template时，遇到{{}}语法会从data中获取对应数据并插入到相应位置，生成HTML代码并渲染。当data中的数据发生改变时，template会重新编译并重新渲染页面，实现数据驱动视图更新。

template配置项定义的模板内容只能有一个根元素。若代码需要换行，建议使用反引号（`）包裹，避免使用+进行字符串拼接。
template编译后渲染时会替换挂载位置的元素。此外，template配置项可以省略，若省略，直接在HTML代码中编写相关内容，指定挂载的位置就不会被替换。