你的第一个Vue程序（Vue2）

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.{{}}是插值语法，{{}}中可以放的东西如下：