Vue2入门(安装/创建Vue，安装devtools)

1.下载并安装Vue

（1）Vue是一个基于JavaScript（JS）实现的框架。要使用它就需要先拿到Vue的js文件，可以从官网(https://v2.cn.vuejs.org/)下载vue.js文件
（2）下载：开发生产版本更小，上线后使用。开发版本更详细，写代码的时候用。
在这里插入图片描述
（3）当使用script进行Vue安装以后，上下文中就注册了一个全局变量：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>// 安装Vue<script src="../js/vue.js"></script>
</head>

2.使用Vue

2.1 创建Vue以及挂载Vue

<body>// 指定Vue实例的挂载位置<div id="app"></div><script>// 创建vue实例const myVue = new Vue({template : '<h1>hello vue!</h1>'})/** 将Vue实例挂载到id='app'的元素位置，Vue实例都有一个$mount()方法，这个方法的作用是将Vue实例挂载到指定位置**/myVue.$mount('#app')</script>
</body>

（1）为什么要new Vue()，直接调用Vue()函数不行吗？
不行，Vue.js的源码中直接调用Vue()函数会报错：Vue is a constructor and should be called with the ‘new’ keyword
（2）Vue构造函数的参数：options，
①options翻译为选项，Vue框架要求整个options参数必须是一个纯粹的JS对象：即使用{}来表示
②在{} 对象中可以编写大量的key:value，一个key:value就是一个配置项
（3）关于template配置项，template翻译为模板。Vue的模板语句是Vue框架自己搞的一套语法规则，写的时候要遵守Vue框架的模板语法规则。模板语句可以是一个纯碎的HTML代码，也可以是Vue中的特殊规则，还可以是HTML代码+Vue的特殊规则

2.2 模板语句的数据来源：data

（1）data选项可以可以给模板语句提供数据支持，data配置项的专业叫法是：Vue实例的数据对象
（2）data选项的类型是Object | Function（对象或函数），是对象的话必须是纯粹的对象(含有零个或多个的key/value对)
（3）使用{{data的key}}来插入到模板语句中，{{}}是Vue框架自己搞的一套语法，其他框架看不懂，浏览器也不能识别；只有Vue框架自己能看懂，这种语法在Vue框架中被称为：模板语法中的插值语法

2.3 template配置项详解

（1）template后面指定的是模板语句，模板语句中只能有一个根节点
①错误例子：

template: '<h1>hello {{name}} !</h1><h1>hello!</h1>',

②正确例子：

 template: `<div><h1>hello {{name}} !</h1><h1>hello!</h1>'</div>`,

（2）只要data中的数据发生变化，模板语句一定会重新编译
（3）如果使用template配置项的话，指定挂载位置元素的内容会被替换
（4）我们可以不使用template来编写模板语句，这些模板语句可以直接写到html标签中，Vue框架能够找到并编译，然后渲染。如果直接将模板语句编写到HTML标签中，指定的挂载位置就不会被替换了。

<body><div id="app"><div>{{name}}</div><div>{{age}}</div></div><script>const myVue = new Vue({data: {name: '狂飙',age: 28}})myVue.$mount('#app')</script>
</body>

（5）也可以不使用$mount('#app')的方式进行挂载，在Vue中有一个配置项：el可以和$mount达到同样的效果

<body><div id="app"><div>{{name}}</div><div>{{age}}</div></div><script>const myVue = new Vue({data: {name: '狂飙',age: 28},el: '#app'})</script>
</body>