Hello Vue_牛客博客

Vue简介

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

以上是Vue官网给出的简介。我们只需要具备基本的HTML、CSS、JavaScript基础，就可以快速上手Vue，以在Web开发中提高生产力。

我们都知道Web前端有三大框架：Angular、React、Vue。其中Angular的开发团队被Google收购了，React源于FaceBook的内部项目最初用于架设Instagram网站后来才进行开源。Vue与前俩者的不同之处是，它并不是出自于互联网巨头公司，而是作者尤雨溪以一人之力开发而成。

今天先来写一个简单的实例吧（挂羊头卖狗肉，咱们不写Hello Vue，理解下面这段代码后Hello Vue很简单写大家可以去尝试一下）查看演示页面

①首先引入vue.js库

    <script src="https://unpkg.com/vue"></script>

②创建vue实例

<script type="text/javascript">
    var v = new Vue({
        el: '#hello_vue',
        data: {
            site: "麦芽雪冷萃",
            url: "https://tanyaodan.com",
            intro: "冷的咖啡 我清醒着 已在续杯"
        },
        methods:{
            details: function() {
                return this.site + "——" + this.intro;
            },
        }
    })
</script>

可以看到在 Vue 构造器中有一个el参数，它是 DOM 元素中的 id。接下来我们看看如何定义数据对象：
data 用于定义属性，实例中有三个属性分别为：site、url、intro。
methods 用于定义函数方法，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

③html导入

在上面实例中 id 为 hello_vue，在该 div 元素中有：

<div id = "hello_vue">
    <h1>site: {{site}}</h1>
    <h1>url: <a v-bind:href="url">{{url}}</a></h1>
    <h2>{{details()}}</h2>
</div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

④完整的html代码

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>Hello Vue</title>
</head>
<body>
    <div id = "hello_vue">
        <h1>site: {{site}}</h1>
        <h1>url: <a v-bind:href="url">{{url}}</a></h1>
        <h2>{{details()}}</h2>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            el: '#hello_vue',
            data: {
                site: "麦芽雪冷萃",
                url: "https://tanyaodan.com",
                intro: "冷的咖啡 我清醒着 已在续杯"
            },
            methods:{
                details: function() {
                    return this.site + "——" + this.intro;
                },
            }
        })
    </script>
</body>
</html>