当前位置：首页 > news >正文

初始 Vue

news 2025/4/28 22:01:03

2025/4/19

向全栈工程师迈进！

一、第一个Vue程序

1.1 下载并安装Vue

首先需要下载Vue.js的框架，下载地址为安装 — Vue.js

点击下载这两个版本

开发版本体积大，生产版本体积小。

通过<script>标签就可以将Vue.js引入进来，当Vue.js被引入后，就会自动的下载并用<script>标签引入，Vue会被自动的注册为一个全局变量。

然后将该页面在浏览器中打开，显示如下，可以看出来，Vue对象已被创建

至此Vue.js安装成功。

1.2 第一个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><script src="D:/tets_html/Vue/vue.js"></script>
</head>
<body><div id="app"></div><script>const myVue = Vue({template : '<h1>Hello Vue!</h1>'})myVue.$mount('#app')</script>
</body>
</html>

显示的效果如下

可以看见其效果就是，通过Vue，可以将template中的内容渲染到页面当中。

第一部分：

const myVue = Vue({template : '<h1>Hello Vue!</h1>'
})

Vue构造函数的参数是options

  function Vue(options) {if (!(this instanceof Vue)) {warn$2('Vue is a constructor and should be called with the `new` keyword');}this._init(options);}

Vue框架要求这个options参数必须是一个纯的JS对象:{}；在们对象中可以编写大量的key:value对。一个key:value对就是一个配置项。主要是通过options这个参数来给Vue实例指定多个配置项。关于template配置项:

template翻译为:模板。
template配置项用来指定什么?用来指定模板语句，模板语句是一个字符串形式的。

什么是模板语句?vue框架自己制定了一些具有特殊含义的特殊符号。vue的模板语句是Vue框架自己搞的一套语法规则。我们写vue模板语句的时候，不能乱写，要遵守Vue框架的模板语法规则。
模板语句可以是一个纯粹的HTML代码，也可以是Vue中的特殊规则。也可以是HTML代码 + Vue的特殊规则。同时这些模版语句会被Vue框架的编译器编译转化为html代码，等待被挂载到指定位置。

第二部分：

myVue.$mount('#app')

就是将Vue实例挂载到id='app'的元素位置。每一个Vue实例都有一个$mount()方法，这个方法的作用是将vue实例挂载到指定位置。#app 显然是ID选择器。这个语法借鉴了csS。

二、模板语句的数据来源

在上面的第一个Vue实例当中，如果完全是为了达到上面的那种效果，我们完全可以这么做，如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue</title><!-- <script src="D:/tets_html/Vue/vue.js"></script> -->
</head>
<body><h1>Hello Vue!</h1><!-- <div id="app"></div><script>const myVue = new Vue({template : '<h1>Hello Vue!</h1>'})myVue.$mount('#app')</script> -->
</body>
</html>

根本没必要使用到Vue框架。但是如我想实现动态的显示Hello Vue!的话，那我们就需要使用到Vue模板了。

在Vue中，给整个Vue提供数据来源的叫做Vue的实例的数据对象——date。他是为整个Vue实例提供数据来源

如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue</title><script src="D:/tets_html/Vue/vue.js"></script>
</head>
<body><div id="app"></div><script>new Vue({template : '<h1>Hello {{name}}!,你将出生在{{birth}}</h1>',data : {name : 'cce',birth : '2003年15月11日'}}).$mount('#app')</script>
</body>
</html>

将data数据通过{{ }}将值动态的插入到了模版语句当中，{{ }}是只用Vue框架才能看懂的，其他的框架是看不懂的，这种语法在Vue中也被称之为插值语法。

其最后的显示效果如下。