01-Vue基础-初识Vue

简介

Vue是一个简单小巧的核心，是一套用于构建用户界面的渐进式框架。
简单小巧是指Vue.js压缩后大小仅有17KB。渐进式是指可以一步步、有阶段性地使用Vue。
学习Vue.js需要掌握一定的前端技术，比如HTML、CSS、JavaScript。

1. 特点

使用Vue.js可以让Web开发变得简单，同时提供一些现代开发的高级特性：

解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM

2. MVVM 模式

MVVM即Model-View-View-Model模式，相信学过Java或Python语言的开发人员不会陌生，只不过，这里需要变通一下。
当View（视图层）变化时，会自动更新ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向数据绑定建立联系，即视图可以绑定模型，模型反过来也可以绑定视图，数据变化时是双向的。

3. 第一个 Vue 实例

通过CDN加载javascript标签的方式就可以很方便的引入Vue.js，前期我们就使用这种在HTML加载javascript标签来引入Vue的库。
很多开发教程都是从Hello World开始的，那么我们就先使用Vue编写我们的第一个Hello World实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个 Vue 实例</title>
    <!--引入 Vue.js -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{ message }}</h3>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "Hello World"
            }
        });
    </script>
</body>
</html>

在浏览器中打开它，我们就可以看到如下图所示的令人惊喜的Hello World：

是不是很有趣呢，下面我们详细分析一下，这段代码都用了什么技术。

首先加载Vue实例库，通过官方给出的CDN引入方式：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

既然是开发学习，我们直接使用开发环境版本。

创建Vue根实例并绑定数据
创建根实例就是创建Vue全局对象，例如：

var vm = new Vue({
    // 实例对象属性
});

vm变量就代表了这个Vue实例，然后我们通过el属性将我们的实例绑定到一个DOM元素上，比如上面实例的div标签。
DOM元素可以是HTMLElement，也可以是CSS选择器。比如：

<div id="app"></div>
<script>
var vm = new Vue({
    el: document.getElementById("app")  // 或者是"#app"
});
</script>

挂载之后我们可以通过vm.$el来访问该元素。同时，Vue提供了很多常用的实例属性与方法，都是以$开头的，比如$ref。
{{ }}是数据绑定最基本的形式文本插值的表达方式，这种语法叫Mustache语法。data选项中的message字段就是我们绑定的数据字段，这里建议将业务用到的字段都定义到数据属性内，便于业务代码维护。

Vue本身也代理了data对象里的所有属性，可以这样访问：

<script>
var vm = new Vue({
    el: "#app",
    data: {
        message: "Hello"
    }
});
comsole.log(vm.message); // Hello
</script>

小结

本章节我们初步认识了Vue.js，然后我们写了第一个Vue实例，通过简单的实例，我们了解了Vue的一些语法特性，可以发现，这个例子很好理解，后面我们慢慢的引入和学习Vue的知识，正如Vue它本身的特性，渐进式框架，千里之行，始于足下。

当你发现你的才华撑不起你的野心，那就努力学习吧！

posted on 2020-01-18 21:36 cculin 阅读(110) 评论(0) 收藏举报