Vue-vue.js概述，vue的安装及创建vue实例

vue.js 是什么

• 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
• Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
• 另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性比较大，项目如果需要跟换框架则需要重新架构整个项目。
• 库：提供某一个小功能；对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

vue 的安装

• 通过安装命令

  npm i vue
  

• 将核心 vue 文件通过标签引入文件中

  <script src="./node_modules/vue/dist/vue.js"></script>
  

创建 vue 实例

准备 HTML 模板:

<!-- vue 实例会控制这个元素中的所有内容，这个就是 MVVM 中的 V -->
<div id="app">
    <!-- data 属性值里的所有成员在这里可以直接使用，不需要通过 “.” 的方式 -->
    <h1>{{ msg }}</h1>
</div>

创建 vue 实例：

const vm = new Vue({
    el: '#app',
    data: {
        key: value
    },
    methods: {
        functionName: functionBody
    }
    // ... 等
})

• key 属性名（键名）
• value 设置对应的值
• functionName 函数名
• functionBody 函数体

说明：

• {{}} 插值表达式（小胡子语法），在双标签中使用；通过该语法可以直接读取 data 中的数据，插值表达式内可以使用表达式但不能使用语句，例如：if、for、while 等。

• new Vue() 创建 vue 实例，这个就是 MVVM 中的 VM 调度者。

• el 的属性值为 vue 管理模板的入口节点，该节点下的所有子节点都将被 vue 所管理，可以通过 vue 提供的指令语法来渲染数据（不要作用到 body 和 html 节点上）。

• data 属性存储的是 el 控制的元素中要用到的数据，这个就是 MVVM 中的 M ，专门用来来保存页面中的数据，data 中的数据为 响应式数据。

  • 响应式数据：数据驱动视图，数据发生改变时，所有绑定该数据的 DOM 都会随之发生改变。

• methods 该属性定义了当前 vue 实例中所用可用的方法。

  • 使用 ES5 函数时，可以省略 function 简写为：

    functionName() {}
    

  • 声明组件内函数，在 export default 这个对象的根属性加上 methods 属性，其是一个对象

    • key 是函数名 值是函数体

  • 在 export default 这个对象的根属性加上 data 属性，其是一个函数，返回一个对象

    • 对象的属性是我们初始化的变量的名称

  • 凡是在 template 中使用变量或者函数，不需要加 this