专栏首页码农UP2U后端程序员的 VUE 超简单入门笔记

后端程序员的 VUE 超简单入门笔记

现在的各种开源项目中使用 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;'
            }
        })
</script>
</body>

单向绑定可以时 v-bind 也可以省略 v-bind,但是注意,冒号不能省略。上面的代码中相当于给 style 设置了 color:blue 属性,运行效果如下图:

三、双向绑定

双向绑定通过指令 v-model 来完成,下面的代码中,data 中的 keyword 会影响 div 中的两个 input 框,第二个 input 框使用的 v-model 指令,那么当改变第二个 input 框中的值时,同样会改变 data 中 keyword 的值;又由于改变了 data 中 keyword 的值,从而第一个 input 框的值也会随之改变。

<body>
    <div id="app">
        {{keyword}}<br>
        <!-- 单向绑定 -->
        <input type="text" :value="keyword"><br>
        <!-- 双向绑定 -->
        <input type="text" v-model="keyword"><br>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: 'test'
            }
        })
</script>
</body>

运行如下图所示:

改变第二个 input 的值,如下图所示:

可以看到,通过修改第二个 input 框的值,上面的值也跟着发生了改变。

四、事件绑定

事件绑定是对事件的监听,可以通过 v-on 或 @ 指令来完成,代码如下:

<body>
    <div id="app">
        <button v-on:click="show()">事件绑定1</button>
        <button @click="show()">事件绑定2</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: 'test'
            },
            methods: {
                show() {
                    console.log("show....")
                }
            }
        })
</script>
</body>

上面的代码中,通过 v-on 和 @ 将 Button 和 show() 方法进行绑定,输出如下图所示:

上面的代码中,在 Vue 对象中增加了 methods,在 methods 中可以用来定义方法。

五、条件指令

条件指令使用 v-if 和 v-else 来完成,看如下代码:

<body>
    <div id="app">
        <input type="checkbox" v-model="ok">
        <span v-if="ok">选中了</span>
        <span v-else>没有选中</span>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false
            }
        })
</script>
</body>

上面的代码中,通过 v-model 和 ok 来进行双向绑定,然后当改变 checkbox 的选中状态时,v-if 和 v-else 会自动改变文字描述。

六、循环指令

循环指令使用 v-for,它可以用来遍历数组从而渲染一个列表,看如下代码:

<body>
    <div id="app">
        <div v-for="(user, index) in userList">
            {{index+1}} -- {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    {"name":"张三", "age":20},
                    {"name":"李斯", "age":30},
                ]
            }
        })
</script>
</body>

上面的代码中 index 是一个循环的计数从 0 开始,然后循环 userList Json 数组,输出如下图:

七、Vue 生命周期

Vue 的生命周期,就是创建、销毁 Vue 对象时会自动执行的几个函数,Vue 的官网提供了一个生命周期图,该图的地址如下:

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

我这里从官网复制过来,如下图。

在上图中可以看到,不同的生命周期有不同的方法会被执行,比如 created、updated、destroyed 等。

这里写代码进行测试:

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            // 在页面渲染之前执行
            created() {
                debugger
                console.log('created...')
            },
            // 在页面渲染之后执行
            mounted() {
                debugger
                console.log('mounted...')
            }
        })
</script>
</body>

在代码的 created 和 mounted 两处放入了 debugger 命令,打开 F12 的调试窗口时,当执行到 debugger 位置处时,会自动触发断点从而断下,首先断在 created 方法中,如下图:

从上图可以看出,此时的插值表达式并没有进行实际的替换,按 F8 让页面继续渲染,会断在 mounted 方法中,如下图:

此时可以看到,插值表达式已经变成了 hello。这样可以清楚的看到不同的生命周期会触发不同的方法。

八、axios 和 vue-resource 库

axios 是基于 Promise 的 Ajax 的库,在 Vue 中有一个 vue-resource 库用于实现异步加载的库。在 Vue.js 2.0 中推荐使用 axios 来完成 Ajax 的请求。这里给出演示的代码,代码如下:

<body>
    <div id="app">
        <table>
            <tr v-for="(user, index) in userList">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
        <table>
            <tr v-for="(it, index) in itList">
                <td>{{index + 1}}</td>
                <td>{{it.name}}</td>
                <td>{{it.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList : [],
                itList: []
            },
            // 在页面渲染之前执行
            created() {
                // 调用方法,得到返回json数据
                this.getUserList(),
                this.getLanguageList()
            },
            methods: {
                getUserList() {
                    // 使用 axios 方式 ajax 请求
                    // 请求的接口路径
                    axios.get("user.json")
                        // 请求成功
                        .then(response =>{
                            console.log(response)
                            this.userList = response.data.data.items
                        })
                        // 请求失败
                        .catch(error => {
                            console.log(error)
                        })
                },
                getLanguageList(){
                    //发送get请求
                    this.$http.get('language.json').then(function(response){
                        console.log(response.body);
                        this.itList = response.body.data.items
                    },function(){
                        console.log('请求失败处理');
                    });
                }
            }
        })
</script>
</body>

上面的代码中,同时演示了 axios 和 vue-resource 两个库。代码中直接请求了两个 json 文件,并没有去进行实际的接口请求。

九、总结

Vue 的内容不只有这么些,具体可以参考 Vue 的官网(https://cn.vuejs.org/v2/guide/)进行学习和了解。这里只是列出了可能使用较为频繁的部分。不对之初请予指正。

本文分享自微信公众号 - 码农UP2U(gh_3c91b47a82e0),作者:码农UP2U

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-09-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 后端程序员的 ES6 超简单入门笔记

    在早期的 Web 项目当中,后端的语言和前端的语言混合在一起,比如在 jsp 和 php 的代码中能看到大篇幅的 HTML 代码。后来逐步的发展...

    码农UP2U
  • TensorFlow学习笔记:2、TensorFlow超简单入门程序

    TensorFlow学习笔记:2、TensorFlow超简单入门程序 2.1 HelloWorld代码说明 import tensorflow as tf ...

    程裕强
  • 一个后端狗的 Vue 笔记【入门级】

    最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字...

    BWH_Steven
  • 后端小白的 Vue 入门笔记 —— 进阶篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11325489.html

    IT技术小咖
  • 后端小白的 Vue 入门笔记 —— 基础篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11303521.html

    IT技术小咖
  • 小白前端入门笔记(18),form表单的简单用法

    几乎所有用户数据的提交和上传都是通过表单来进行的,比如用户注册的时候,我们填写的账号、密码、邮箱等信息,最后点击提交的时候提交的内容其实就是一个表单。

    TechFlow-承志
  • 微服务[学成在线] day02:CMS前端开发

    由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重...

    LCyee
  • 【微服务】156:前台门户系统

    它就是只有一个html文件,其它的都是以vue组件的形式拼接,从而实现了页面切换。

    刘小爱
  • 2019 前端秋季社招面试经历总结(二年多经验)

    推荐阅读:前端硬核面试专题[6],内容包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTT...

    夜尽天明
  • 【码云周刊第 11 期】追踪代码大仓库? Git 的拿手好戏!

    每周为您推送最有价值的开源技术内参! 一周热门资讯回顾 ActFramework 1.0 正式发布, Java MVC 框架 TIOBE 3 月编程语言排行榜...

    码云Gitee
  • 史上最全的前端资源大汇总

    Tanyboye
  • 后端程序员也能看懂的微信小程序开发入门

    小程序时至今日已经非常火爆了,作为软件体系中的一员,越来越多的公司与个人都在发展自己的小程序,而且小程序不再是单一的微信小程序了,还有百度小程序、支付宝小程序、...

    蒋老湿
  • 前端资源分享——只为更好前端

    一、团队组织 网站说明腾讯 AlloyTeam 团队腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究ISUX腾讯社交用户体验设计,简称ISUX,腾...

    wangxl
  • GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

    JeecgBoot 是一款基于代码生成器的低代码开发平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,My...

    程序员追风
  • 前端资源分享-只为更好前端

    阅读更多 本文在GitHub的地址GitHub Front-end-resources

    WEBING
  • 推荐几个坚持原创的前端大佬,真的很优秀!

    天天,掘金Lv6作者,笔名: TianTianUp,曾输出多篇千赞好文!专注于前端性能优化方向。用心经营公众号,每日分享精选好文,欢迎关注,一起早日进阶~

    苏南
  • 头条前端offer

    我也忘记什么时候投的了,正规校招流程,3次笔试5题中最好成绩都是a了80%,应该和笔试关系不大。我平时看掘金,看见有那些招人的邮箱都会投一下,虽然投了很多,不过...

    牛客网
  • 前端工作N年,你被年轻一届取代是有原因的

    最近我司由于业务扩张,需要招一些即战力的coder,来为年后的项目做准备。作为面试官,一开始我让HR筛选简历的时候,优先选一些有3-5年工作经验的老鸟,毕竟需要...

    闰土大叔
  • vue学习笔记router传参

    这是刚入门vue的第五天,刷视频整整刷了100多p,过程是艰辛的。但收获了很多东西,

    kirin

扫码关注云+社区

领取腾讯云代金券