Vue 入门——基本认识

最新推荐文章于 2019-07-10 20:45:28 发布

SachinLee

最新推荐文章于 2019-07-10 20:45:28 发布

阅读量446

点赞数 1

分类专栏： vue 文章标签： vue vue入门

本文链接：https://blog.csdn.net/Mystic_Lee/article/details/94405631

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue 入门——基本认识

Vue 基本认识

Vue 基本认识

本文写作初衷，最近给同事分享了一下 Vue 的入门教程，但是，感觉在分享过程中，讲得比较乱，没有达到预期的效果；另外，在翻看官方文档中，发现有很多知识原来自己没有注意的地方，因此，通过本系列文章巩固一下自己的学习。

个人觉得 vue 官方文档已经讲解的非常好了，更详细内容请查看：https://cn.vuejs.org/

1 Vue 是什么

Vue 是一个渐进式 JavaScript 框架，渐进式是指，Vue 主要包含核心库和其他功能的插件，核心库体积比较小，可以实现基本功能。然后，配合其他的相关插件能够实现更多其他的功能，例如：使用 Vue-router 实现路由跳转，VueX 实现状态管理等等。

官网地址：https://cn.vuejs.org/

2 Vue 特点

编码简洁，体积小
本身只关注 UI，可以轻松引入 Vue 插件和其他组件进行开发
遵循 MVVM 模式

MVVM 的本质是通过数据绑定链接 View 和 Model，让数据的变化自动映射为视图的更新 (也就是我们常说的双向绑定)。Vue.js 在数据绑定的 API 设计上借鉴了 Angular 的指令机制：用户可以通过具有特殊前缀的 HTML 属性来实现数据绑定，也可以使用常见的花括号模板插值，或是在表单元素上使用双向绑定。

与 Angular 不同的是，Vue.js 的 API 里并没有繁杂的 module、controller、scope、factory、service 等概念，一切都是以 “ViewModel 实例” 为基本单位：
```

<div id="app">
    {{msg}}
</div>
```
```
// 原生对象即数据
var data = {
    msg: 'hello!'
}
// 创建一个 ViewModel 实例
var vm = new Vue({
    // 选择目标元素
    el: '#app',
    // 提供初始数据
    data: data
})
```

3 Vue 扩展插件

vue-cli: 脚手架
vue-router: 路由管理
vuex: 状态管理
element-ui: 基于 vue 的 UI 组件库 (PC 端)
mint-ui: 基于 vue 的 UI 组件库(移动端)
vue-resource: ajax请求（不常用，主要使用axios）

4. 简单 demo

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--view -->
    <div id="app">
        <input v-model="message">
        <br>
        {{message}}
    </div>
    <script>
        // vm  实例
        const vm = new Vue({
            el : '#app', // element
            data : { // model
                message : 'Hello world',
            }
        })
    </script>
</body>
</html>