Vue 是一个基于 JavaScrip（t JS） 实现的框架。要使用它就需要先拿到 Vue 的 js 文件。从 Vue 官网（https://v2.cn.vuejs.org/）下载 vue.js 文件
1. 下载并安装 vue.js
- 第一步：打开 Vue2 官网，点击下图所示的“起步”：
- 第二步：继续点击下图所示的“安装”
- 第三步：在“安装”页面向下滚动，直到看到下图所示位置
- 第四步：点击开发版本，并下载，如下图所示
- 第五步：安装 Vue , 使用 script 标签引入 vue.js 文件。
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>
<!-- 安装vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 指定挂在位置 -->
<div id="app"></div>
<script>
// 第一步 ： 创建Vue实例
const vm = new Vue({
template: "<h1>Hello Vue</h1>",
});
// 第二步 ： 将Vue实例挂在到指定位置
vm.$mount("#app");
</script>
</body>
</html>
第一步： 创建 Vue 实例
-
为什么要 new Vue()，直接调用 Vue()函数不行吗？
不行，因为直接调用 Vue()函数，不创建实例的话，会出现以下错误：
Vue is a constructor and should be called with the <span data-type="code">new</span> keyword -
关于 Vue 构造函数的参数：options？
option 翻译为选项:
options 翻译为多个选项
Vue 框架要求这个 options 参数必须是一个纯粹的 JS 对象：{}
在{}对象中可以编写大量的 key:value 对。
一个 key:value 对就是一个配置项。
主要是通过 options 这个参数来给 Vue 实例指定多个配置项。new Vue({ template : ' <h1>Hello Vue</h1> ' }) -
关于 template 配置项：
template 翻译为：模板。
template 配置项用来指定什么？用来指定模板语句，模板语句是一个字符串形式的。 -
什么是模板语句？
Vue 框架自己制定了一些具有特殊含义的特殊符号。
Vue 的模板语句是 Vue 框架自己搞的一套语法规则。
我们写 Vue 模板语句的时候，不能乱写，要遵守 Vue 框架的模板语法规则。
模板语句可以是一个纯粹的 HTML 代码，也可以是 Vue 中的特殊规则。也可以是 HTML 代码 + Vue 的特殊规则。
template 后面的模板语句会被 Vue 框架的编译器进行编译，转换成浏览器能够识别的 HTML 代码。
第二步 ： 将 Vue 实例挂在到**id = 'app'**的元素位置
-
Vue 实例都有一个
$mount() 方法 ， 这个方法的作用是什么？- 将 Vue 实例挂在到指定位置
-
#app 显然是 Id 选择器 ， 这个语法借鉴了 CSS
3. Vue 的 data 配置项
data 配置项，它可以帮助我们动态的渲染页面
模板语句的数据来源：
-
谁可以给模板语句提供数据支持呢？
- data 选项。
-
data 选项的类型是什么？
- Object | Function （对象或者函数）
-
data 配置项的专业叫法：Vue 实例的数据对象.（data 实际上是给整个 Vue 实例提供数据来源的。）
-
如果 data 是对象的话，对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
-
data 数据如何插入到模板语句当中？
-
{{}} 这是 Vue 框架自己搞的一套语法，别的框架看不懂的，浏览器也是不能够识别的。
-
Vue 框架自己是能够看懂的。这种语法在 Vue 框架中被称为：模板语法中的插值语法。（有的人把他叫做胡子语法。）
-
怎么用？ ——>
{{data的key}} -
插值语法的小细节：
- {这里不能有其它字符包括空格{
- }这里不能有其它字符包括空格}
-
当 data 发生改变时，template 模板会被重新编译，重新渲染。
代码示例 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="js/vue.js"></script>
<title>模板语句的数据来源</title>
</head>
<body>
<div id="app"></div>
<script>
const myVue = new Vue({
template:
"<h1>{{name}}是由{{author}}编写的一部{{Description}}<br>主角为 : {{character[0].name}} , 年龄：{{character[0].age}}<br>{{lead.name}} , {{lead.age}}</h1>",
data: {
name: "《剑来》",
author: "烽火戏诸侯",
Description: "网络小说",
// 数组 ， 要使用索引
character: [
{
name: "陈平安",
age: 19,
},
],
lead: {
name: "宁姚",
age: 18,
},
},
});
myVue.$mount("#app");
</script>
</body>
</html>
4. Vue 的 template 配置项
关于 template 配置项：
- template 后面指定的是模板语句，但是模板语句中只能有一个根节点。
- 只要 data 中的数据发生变化，模板语句一定会重新编译。（只要 data 变，template 就会重新编译，重新渲染）
- 如果使用 template 配置项的话，指定挂载位置的元素会被替换。
- 好消息：目前可以不使用 template 来编写模板语句。这些模板语句可以直接写到 html 标签中。Vue 框架能够找到并编译，然后渲染。
- 如果直接将模板语句编写到 HTML 标签中，指定的挂载位置就不会被替换了。
关于$mount('#app')？
- 也可以不使用$mount('#app')的方式进行挂载了。
- 在 Vue 中有一个配置项：el
- el 配置项和$mount()可以达到同样的效果。
- el 配置项的作用？
- 告诉 Vue 实例去接管哪个容器。
- el : '#app'，表示让 Vue 实例去接管 id='app'的容器。
- el 其实是 element 的缩写。被翻译为元素。
语法展示为 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="js/vue.js"></script>
<title>template配置项详解</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{age}}</div>
</div>
<script>
const myVue = new Vue({
// template : '<div><div>',
data: {
msg: "陈平安",
age: 19,
},
el: "#app", //el : document.getElementById('app')
}); //}).$mount('#app')
</script>
</body>
</html>
5. 解决控制台上的提示信息和错误信息
- Vue.config 是 Vue 的全局配置对象。
- productionTip 属性可以设置是否生成生产提示信息。
- 默认值：true。如果是 false 则表示阻止生成提示信息。
- Vue.config.productionTip = false
彻底解决的方案：
- 进入源码 ， 找到
productionTip: true - 将其改为 false
6. Vue 开发者工具初体验
7. Vue 实例和容器的一夫一妻制
一个 Vue 实例可以接管多个容器吗？
- 不能。一个 Vue 实例只能接管一个容器。一旦接管到容器之后，
即使后面有相同的容器，Vue也是不管的。因为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 -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备容器 -->
<div class="app">
<h1>{{msg}}</h1>
</div>
<div class="app">
<h1>{{msg}}</h1>
</div>
<!-- 准备容器 -->
<div id="app2">
<h1>{{name}}</h1>
</div>
<!-- vue程序 -->
<script>
/*
验证：一个Vue实例可以接管多个容器吗？
不能。一个Vue实例只能接管一个容器。一旦接管到容器之后，即使后面有相同的容器，Vue也是不管的。因为Vue实例已经“娶到媳妇”了。
*/
new Vue({
el: ".app",
data: {
msg: "Hello Vue!",
},
});
new Vue({
el: "#app2",
data: {
name: "zhangsan",
},
}); // 这个Vue实例想去接管 id='app2'的容器，但是这个容器已经被上面那个Vue接管了。他只能“打光棍”了。
new Vue({
el: "#app2",
data: {
name: "jackson",
},
});
</script>
</body>
</html>