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

谁践踏了优雅 2021-12-01 15:02 387阅读 0赞

#### vue.js 是什么 ####

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

#### 框架和库的区别 ####

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

#### vue 的安装 ####

*  通过安装命令
    
        npm i vue
 *  将核心 vue 文件通过标签引入文件中
    
        <script src="./node_modules/vue/dist/vue.js"></script>

#### 创建 vue 实例 ####

准备 `HTML` 模板:

<div id="app">
        
        <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

[Link 1]: http://link.zhihu.com/?target=http%3A//cn.vuejs.org/v2/guide/single-file-components.html
[Vue]: http://link.zhihu.com/?target=http%3A//github.com/vuejs/awesome-vue%23libraries--plugins