本教程详细讲解Vue.js的基础使用，涵盖从官网下载Vue文件、在HTML中引入，到创建第一个Vue实例的完整流程。重点解析Vue构造函数的核心配置项：通过data实现数据动态渲染，利用template定义视图模板，以及el/$mount完成DOM挂载。适合希望快速上手Vue开发的初学者阅读。
一、Vue程序初体验
对于初学者而言，深入探究Vue框架的历史背景、技术特性或开发者背景并非首要任务，这些内容对立即编写Vue代码帮助有限。且初期了解特性也难以形成深刻理解，因此建议采取“先上手、后理论”的学习策略：先通过实际编码熟悉Vue，待积累一定经验后再回头系统学习框架原理与特性。目前只需明确一点：Vue是一个基于JavaScript（JS）构建的框架。要使用它，首先需获取Vue的JS文件。
1.1 下载并安装vue.js
第一步：访问Vue2官方网站，点击页面中所示的“起步”链接：
第二步：在后续页面中，继续点击所示的“安装”选项：
第三步：在“安装”页面中向下滚动，直至看到如下所示的位置：
第四步：点击“开发版本”进行下载，具体操作如下图所示：
第五步：完成Vue的安装配置：
通过script标签引入vue.js文件，示例代码如下：<script src=”xx/vue.js”></script>
1.2 第一个Vue程序
建议使用VSCode作为集成开发环境，若未安装，请先完成安装。
以下是第一个Vue程序的完整代码：
<!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">
<title>第一个Vue程序</title>
<!-- 安装vue.js -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
// 第一步：创建Vue实例
const vm = new Vue({
template : '<h1>Hello Vue!</h1>'
})
// 第二步：将Vue实例挂载到指定位置
vm.$mount('#app')
</script>
</body>
</html>
运行该程序后的效果如下：
对第一个程序进行详细解释说明：
当使用script标签引入vue.js后，Vue会被注册为全局变量，这与引入jQuery后jQuery成为全局变量的机制类似。必须通过new关键字创建一个Vue实例，因为从源码层面看，Vue内部使用了this关键字。
Vue的构造函数接收一个options配置对象作为参数。该对象包含大量Vue预定义的配置项，每个配置项均呈key:value结构，即一个key:value对应一个Vue配置项。template配置项：其value为模板字符串，在此处编写符合Vue语法规则的代码（Vue拥有独立的语法规则）。该字符串会被Vue编译器编译，转换为浏览器可识别的HTML代码。template被称为模板。Vue实例的$mount方法：该方法用于执行挂载操作，将Vue实例绑定到指定位置，即将Vue编译后的HTML代码渲染至页面的指定区域。注意：挂载位置的原有元素会被替换。‘#app’的语法类似于CSS中的id选择器，表示将Vue实例挂载到id为’app’的元素上。若使用原生JS也可实现：vm.$mount(document.getElementById(‘app’))。‘#app’作为id选择器，也可使用其他选择器如类选择器’.app’。类选择器可匹配多个元素（位置），此时Vue仅选择从上到下的第一个位置进行挂载。
1.3 Vue的data配置项
观察第一个Vue程序，会发现实现此类功能完全无需使用Vue，直接在body标签中编写以下HTML代码即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没必要使用Vue呀</title>
</head>
<body>
<h1>Hello Vue!</h1>
</body>
</html> 在Vue中，data配置项可用于动态渲染页面，代码如下：
<!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">
<title>Vue选项data</title>
<!-- 安装vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue代码 -->
<script>
new Vue({
data : {
message : 'Hello Vue!'
},
template : '<h1>{{message}}</h1>'
}).$mount('#app')
</script>
</body>
</html> 运行结果如下所示：
对以上程序进行解释说明：
1. data是Vue实例的数据对象，且该对象必须是纯粹的对象（包含零个或多个key/value对）。
2. {{message}}是Vue框架特有的语法，称为插值语法（或胡子语法），它可从data中根据key获取value，并将value插入到对应位置。
3. data可以是以下几种情况，但不限于此：
data : {
name : '老杜',
age : 18
}
//取值：
{{name}}
{{age}}
data : {
user : {
name : '老杜',
age : 18
}
}
//取值：
{{user.name}}
{{user.age}}
data : {
colors : ['红色', '黄色', '蓝色']
}
//取值：
{{colors[0]}}
{{colors[1]}}
{{colors[2]}} 4. 以上程序的执行原理：Vue编译器对template进行编译，遇到{{}}时从data中取值，并将取到的数据插入到对应位置，生成HTML代码，最终将HTML渲染至挂载位置并呈现。
5. 当data发生改变时，template模板会被重新编译并重新渲染。
1.4 Vue的template配置项
template只能包含一个根元素。请看如下代码：
<!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">
<title>Vue选项template</title>
<!-- 安装vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
new Vue({
template : '<h1>{{message}}</h1><h1>{{name}}</h1>',
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
</script>
</body>
</html> 执行结果
控制台报错信息：组件模板应该只能包括一个根元素。因此，若使用template，根元素必须唯一。修改代码后如下：
new Vue({
template : '<div><h1>{{message}}</h1><h1>{{name}}</h1></div>',
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')运行结果
template编译并渲染时，会替换挂载位置的原有元素。
若template中的代码需要换行，建议将代码写入反引号（``）符号中，不建议使用+进行字符串拼接。修改后的代码如下：
new Vue({
template : `
<div>
<h1>{{message}}</h1>
<h1>{{name}}</h1>
</div>
`,
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')运行结果
template配置项可省略，直接将其编写到HTML代码中。代码如下：
<!-- 指定挂载位置 -->
<div id="app">
<div>
<h1>{{message}}</h1>
<h1>{{name}}</h1>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
</script> 运行结果
需注意两点：第一，这种方式不会产生如template那样的元素替换现象。第二，虽然直接编写在HTML中，但以上程序第3~6行已非纯HTML代码，而是具有Vue语法特色的模板语句。该内容在data改变后仍需重新编译。
挂载Vue实例时，也可不使用$mount方法，而使用Vue的el配置项。代码如下：
<!-- 指定挂载位置 -->
<div id="app">
<div>
<h1>{{message}}</h1>
<h1>{{name}}</h1>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
},
el : '#app'
})
</script> 执行结果
el是element单词的缩写，意为“元素”。el配置项主要用于指定Vue实例关联的容器，即确定Vue所管理的容器范围。
到此这篇关于Vue基础知识快速入门教程的文章就介绍到这了,更多相关Vue基础知识内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！