后端程序员的 VUE 入门上手笔记

最新推荐文章于 2024-01-10 22:02:50 发布

码农UP2U

最新推荐文章于 2024-01-10 22:02:50 发布

阅读量578

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： vue.js javascript node.js

本文链接：https://blog.youkuaiyun.com/easysec/article/details/120256188

八、axios 和 vue-resource 库

九、总结

现在的各种开源项目中使用 Vue 的越来越多了，作为一个后端程序员不会点 Vue 也都玩不转了。所以抽空学习了一下 Vue 的简单用法，整理成笔记，方便有需要的同学一起学习。

Vue 是一个前端的框架，被称作是渐进式 JavaScript 框架。在进入 Vue 的官网时即可看到，上面图的就是从 Vue 官网复制的。

什么是渐进式框架，这里我们引用官网的原文来看，原文如下：

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

https://cn.vuejs.org/v2/guide/

Vue 可以作为整个前端开发的一部分，也可以作为一个整体。也就是说，可以使用 Vue 的部分功能来构建前端，也可以完全使用 Vue 来构建前端。大概就是这样的意思。

一、Vue 的开始

Vue 的开始还是很方便的，只需要引入一个库文件 —— vue.js 即可开始。我们可以去 Vue 的官网下载，也可以通过 CDN 来直接引入 vue 都可以。这里我下载了 vue.min.js 文件。

创建一个 HTML 文件，然后引入 vue.min.js 文件，接着实现一个简单的 Hello Vue 的程序。代码如下：

<body>
    <div id="app">
        <!-- 插值表达式，绑定vue中的data -->
        {
  
  {message}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        // 创建一个vue对象
        new Vue({
            el:'#app',  // 绑定vue作用的范围
            data: {     // 定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
</script>
</body>

在上面的代码中，通过 <script src="vue.min.js"> 引入了 vue 的库文件，然后通过 new Vue 来创建一个 Vue 的对象。其中 el 是 DOM 的 id，表示该 Vue 对象是针对该 DOM 中。在 data 中定义了值 “Hello Vue” 为 message 变量，然后在 id 为 app 的 div 标签中通过插值表达式（使用 { {}} 插入的变量）来输出 message 变量的值。

Vue 中的 el 和 data 是固定的写法，el 和一个标签进行关联，表示该 Vue 对象只和该标签关联，data 是用来定义变量使用的。

这样就构建了一个简单的 Vue 的 HTML 页面。Vue 内部完成了 DOM 的绑定操作，无需像 jQuery 那样获取 DOM 的操作。

二、单向绑定

单向绑定的指令是 v-bind，它用在标签属性上面，通过它可以获取 data 中定义的变量的值。代码如下：

<body>
    <div id="app">
        <!-- v-bind 在标签的属性中，取到vue在data中定义的变量的值 -->
        <div v-bind:style="msg">单向绑定</div>
        <div :style="msg">单向绑定</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'color: blue;'
            }
        })
</scri