1. vue2的应用：vue的简单使用

范家的小女儿
152 阅读3分钟

前言

上一篇，我们针对vue2的应用层面，抛出了3个问题：

  1. vue是什么？
  2. 怎么使用vue？
  3. vue都有哪些API，它们是如何使用的？ 这一篇，让我们逐个去解决上面的问题。

Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

以上引用官方解释，我们来了解一下什么是渐进式框架？简单来说，不会强制你引用或使用所有的东西，你需要什么就引入或使用什么，这就是为什么说便于与既有项目整合。

怎么使用vue

简单来说就2步：

  1. 引用vue
  2. 创建vue实例，根据需要传不同的option。 来，到这一步，发现了什么？这个vue本质上就是一个类啊，不管多复杂，记住了，它就是一个类，既然是类，我们new一个对象，这个对象，或者说vue实例就是一个应用，怎么样，这样理解是不是很简单。接下来让我们用上面的步骤举个例子：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何使用vue</title>
    <!-- 1. 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        {{title}}
    </div>
</body>
<script>
    // 2. 创建vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            title: '让我们来学习如何使用vue'
        }
    })
</script>

</html>

上面是一个非常简单的html文件，运行结果如下：

image.png

我们来看一下，它是如何跟我们的html产生影响的,答案是在创建vue实例时传入了el选项，而el的值正是我们div标签的id，不信的话你不传这个选项，看上面的代码还能不能起作用。当然，你不传el选项，就需要通过手动调用vm.$mount('#root')，这是后话了。这里我们也可以看出，vue是options API，怎么理解，我们在创建vue实例时，会传入一个对象（options），这个对象有指定key的属性，可以理解为选项，比如上面的例子这个对象的选项是el, data，如果需要，我们还可以传入methods等，那我们可以传入哪些选项呢？这些选项又有什么作用？继续往下看。

vue API

通过上面一个简单的例子我们已经学会了怎么去使用vue。接下来让我们去简单使用vue API, 打开官网可以总结vue的API分为： VUE API.png

其实就是八大模块：

  1. 全局相关
  2. 创建实例时传入的选项
  3. 实例的方法和属性
  4. 内置指令
  5. 内置组件
  6. 几个特性
  7. VNode 接口
  8. SSR 是不是一目了然了，下面就让我们来逐个了解它们的应用，受于篇幅影响，会将vue API分篇章来写。
avatar
文章
阅读
粉丝