1.下载并且引入Vue文件
从Vue官网上下载vue文件，分别为vue.js、vue.min.js。前者开发使用后者应用发布使用。
2.引入vue.js文件
<!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="../js/vue.js" ></script>
</head>
<body>
</body>
</html>
3.创建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="../js/vue.js" ></script>
</head>
<body>
<div id="app"></div>
<script>
//创建实例
const myvue = new Vue({
template:'<h1>hello my frist vue</h1>'
})
</script>
</body>
</html>
4.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="../js/vue.js" ></script>
</head>
<body>
<div id="app"></div>
<script>
//创建实例
const myvue = new Vue({
template:'<h1>hello my frist vue</h1>'
})
//挂载
myvue.$mount('#app')
</script>
</body>
</html>
代码解释：
- Vue和Jquery一样，当你引入Vue时，就意味着注册了一个全局变量Vue。
- vue的构造方法参数是一个option配置对象，对象中含有大量的vue预定义设置，每一个都是key:value的形式，常见的一些选项有：
- el: (Element or string) 定义 Vue 实例将挂载到哪个 DOM 元素上。
- data: (Object) 包含初始数据，这些数据可以被 Vue 实例在模板中使用。
- computed: (Object) 定义计算属性，这些属性基于其他数据动态计算得出。
- methods: (Object) 包含可复用的方法，这些方法可以在 Vue 实例中调用。
- watch: (Object) 监听数据的变化并执行相应的回调。
- template: (string or function) 定义组件的 HTML 模板。
- components: (Object) 注册局部组件，这些组件只在当前 Vue 实例中可用。
- props: (Array or Object) 定义接收父组件传递过来的数据的属性。
- created(): (Function) 当 Vue 实例创建完成，数据观测及事件配置已经完成时调用。
- mounted(): (Function) 当 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 只会选择第一个位置进行挂载（从上到下第一个）
7.{{}}是插值语法，{{}}中可以放的东西如下：
- 1.在data中声明的变量、函数
- 2.常量都可以
- 3.合法的javascript表达式
- 4.能访问全局变量白名单 ，如Date和Math这些