全栈之路Vue.js系列（一）之初识Vue.js

本文链接：https://blog.youkuaiyun.com/QStack/article/details/109291535

前言

这是我们全栈之路Vue.js系列文章的开篇之作，这一系列文章和Vue.js都是建立在JavaScript的基础之上的，如果没有JavaScript的基础可以参考我之前的全栈之路JavaScript的系列文章。在正式的介绍Vue.js之前，我想先分享一下学习一些新技术或知识的一些心得体会，所谓的工欲善其事，必先利其器。在我们学习的过程中不能只是一味的被动接受，要勤于思考，学而不思则罔。在我每次学习新技术的时候，我都会问自己三个问题，what，why和how，就是它是什么？我们为什么要学它？最后才是如何去使用？这三个问题看似简单，背后却有千丝万缕的关系，当我们能自己回答这三个问题，并且能够捋清背后的关系，我们也就真正的能说我们掌握了它。现在就让我们循着这条思路走进 Vue.js的世界吧。

Vue.js是什么？

我们先来看看官方的介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

从这个介绍我们可以得出Vue.js是一个前端框架，帮助我们构建前端页面。

为什么要学Vue.js?

作为现在最火的前端框架Vue具有更加平滑的学习曲线，更加易于上手，Vue的生态也越来越完善，像elementUI这样优秀的组件库，可以帮助我们更快的构建优质的前端界面，最近跨平台框架Taro最新版本也开始支持Vue，从这也可以看出Vue还是处于上升轨道，值得一学。

引入Vue.js

作为新手，推荐直接使用cdn引入，直接在html文件中增加以下链接就可以使用。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Hello Vue.js

不知道我们从什么时候开始，可能是C语言，我们总喜欢以“Hello 某某”来开始一段新的学习之旅，好像已成成立程序猿的某种仪式，现在就让我们遵循传统，怀着对这些计算机大神无比的崇敬，继承这个光荣的传统，也由此开始我们的Vue.js之旅吧。

<!DOCTYPE html>
<html lang="en">
<head>
<!--    引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue.js"}
        }
    );
</script>
</html>

如上述代码所看到的，我们需要类似先new一个Vue的对象，Vue里面是它的一些属性。Vue强调组件化，一个Vue的实例就是一个组件，里面的属性就是一些配置。其中el是一个挂载点，确定只一个组件挂载组件树的位置。data就是需要用到的数据。

Vue简单语法

双向绑定

Vue.js 的核心是一个允许采用尽可能简洁的模板语法来声明式地将数据渲染进 DOM 的系统，如我们之前所提到的Hello Vue.js，在我们看到的简单语法之下其实Vue为我们做了很多的工作，这时数据与视图已经双向绑定，我们可以通过改变message进而改变视图。打开控制改变messgae效果如下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-paEa5dXx-1603698811964)(https://raw.githubusercontent.com/Qi-Ming/picture/main/2020-10-26/1603695868380-image.png)]

控制与循环

Vue可以轻易控制控件显示与否，其中指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，我们可以通过v-if来实现控件的显示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
<!--    引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-if="seen">
    <p v-if="seen"> {{message}}</p>
</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue.js",
            seen:true
        }
        }
    );
</script>
</html>

当我们通过控制台将seen改为false就会消失。

我们还可以通过v-for循环实现列表。

<!DOCTYPE html>
<html lang="en">
<head>
<!--    引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="todo in todos">{{todo.text}}</li>
    </ol>

</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
        }
    );
</script>
</html>

处理用户输入

处理用户的点击事件，是我们经常遇到的问题，Vue的处理也很简单。

<!DOCTYPE html>
<html lang="en">
<head>
<!--    引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
    <button v-on:click="changeMessage">点击</button>

</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message: "未点击"
        },
        methods :{
            changeMessage: function () {
                this.message = "已点击"
            }
        }
        }
    );
</script>
</html>