后端小伙伴学习Vue常用命令和快速入门

最新推荐文章于 2024-05-06 08:21:32 发布
最新推荐文章于 2024-05-06 08:21:32 发布
阅读量251 收藏
点赞数 1
分类专栏： JavaWeb 文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45332753/article/details/112716898
版权

Vue 常用命令和快速入门

目录：

  1. vue的入门
  2. vue绑定事件
  3. vue绑定标签体内容
  4. vue绑定标签的属性
  5. vue绑定表单项的value
  6. vue数据遍历
  7. vue绑定标签的显示与隐藏
  8. vue的生命周期
  9. axios发送异步请求

因为主要不是学前端的，这里整理的是作为后端人员，该掌握的Vue的常用知识，仅仅入门使用，想要细致了解Vue的功能，可以去浏览官方文档

地址：https://cn.vuejs.org/v2/guide/

1.案例-Vue快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的入门</title>
    <!--可以本地引入，也可通过网络配置-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
    <!--
        vue的使用步骤:
        1. 准备一个vue的容器(div),并且指定id，我们需要使用vue的所有标签都放在这个div中
        2. 在vue的容器外面(下面)编写script标签，script标签里面就编写vue的代码
        3. vue的具体代码如下
    -->
    <div id="app">
        <!--使用插值表达式进行数据的绑定-->
        <div id="msg">{{message}}</div>
    </div>

    <script>
        const vue = new Vue({
            // 绑定id
            el:"#app",
            //这里面就是所有的数据模型
            data:{
                message:"Hello, Vue!!"
            }，
            //定义方法
            methods:{
            	function(){
            		console.log("这是一个方法")
           }
        }
        });
    </script>
</body>
</html>

页面效果：

image-20210116153332905

​ 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值表达式，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新.

2.vue绑定事件

v-on就相当于@

掌握常用的事件：

  • @click ：鼠标点击
  • @keydown：键盘按下
  • @mouseover：鼠标进入
  • @blur：失去焦点

2.1 @click

【需求】：点击按钮事件，改变message的值

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue绑定事件</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <div id="msg">{{content}}</div>

        <!--vue的方式绑定点击事件,当change事件没有参数时，可以加()也可以不加-->
        <input type="button" value="改变" @click="change">
    </div>
    <script>
        var vue = new Vue({
           el:"#app",
           data:{
               content:"你好世界"
           },
           methods:{
               change(){
                   this.content = "hello world"
               }
           }
        });
    </script>
</body>
</html>

2.2 @mouseover

【需求】：给指定区域大小的div中添加样式，鼠标移到div中，弹出窗口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouseover事件</title>
    <style>
        .box {
            width: 300px;
            height: 400px;
            border: 1px solid red;
        }

    </style>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <div class="box" @mouseover="fn1()">
            div
        </div>
    </div>
    <script>
        var vue = new Vue({
            el:"#app",
            methods:{
                fn1(){
                    alert("鼠标移入了.....")
                }
            }
        });
    </script>
</body>
</html>

3.vue绑定标签体内容

v-text与v-html(重点)

v-text与v-html的使用,它的效果和插值表达式的效果是差不多的

区别：

v-text：输出文本内容，不会解析html元素

v-html：输出文本内容，会解析html元素

用在标签的属性里面

【需求】：分别使用v-text, v-html 赋值 <h1>hello world<h1> ，查看页面输出内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue绑定标签体的内容</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--使用v-text可以绑定标签体中文本内容-->
        <div v-text="msg1"></div>

        <!--使用v-html可以绑定标签体中的所有内容-->
        <div v-html="msg2"></div>
    </div>
    <script>
        var vue = new Vue({
           el:"#app",
           data:{
               msg1:"这是消息1",
               msg2:"<h1>这是消息2</h1>"
           }
        });
    </script>
</body>
</html>

演示结果：

image-20210116155028089

4.vue绑定标签的属性

v-bind可以使用 ：替代

插值语法不能作用在HTML 属性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue绑定属性</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--
            绑定a标签的href属性
        -->
        <a v-bind:href="url">跳转百度</a><br>
        <font v-bind:color="color">你好世界</font>
    </div>
    <script>
        var vue = new Vue({
           el:"#app",
           data:{
               url:"http://www.baidu.com",
               color:"red"
           }
        });
    </script>
</body>
</html>

5.vue绑定表单项的value

用于数据的双向绑定，数据变化了，视图就变化，视图变化了 数据就变化

【需求】：使用vue赋值json(对象)数据，并显示到页面的输入框中（表单回显）. 点击获取数据，在控制台输出表单中的数据；点击回显数据，设置表单的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model绑定表单项的value</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <form>
        用户名：<input type="text" name="username" v-model="user.username"><br>
        密码：<input type="text" name="password" v-model="user.password"><br>
        地址：<input type="text" name="address" v-model="user.address"><br>
        email：<input type="text" name="email" v-model="user.email"><br>
        <input type="button" value="获取表单数据" @click="getFormData"><br>
        <input type="button" value="回显表单数据" @click="setFormData"><br>
    </form>
</div>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            user:{}
        },
        methods: {
            getFormData(){
                console.log("获取数据为"+this.user.username)
            },
            setFormData(){
                const userInfo = {
                    username:"hq",
                    password:"1234",
                    address:"江苏省徐州市",
                    email:"hq@qq.com"
                }
                this.user = userInfo
            }
        }
    });
</script>
</body>
</html>

演示结果：

默认：image-20210116160139086

点击回显：image-20210116160208368

点击获取：
image-20210116160236385

6.vue数据遍历

v-for

用于操作array/集合，遍历，元素是值，index是数字下标。元素的变量名随便取，索引的变量名随便取

语法: v-for="(元素,index) in 数组/集合"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用v-for进行遍历绑定数据</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <table width="600px" border="1" cellspacing="0" align="center">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>address</th>
            <th>email</th>
        </tr>
        <tr v-for="(linkMan,index) in linkManList">
            <th v-text="linkMan.id"></th>
            <th v-text="linkMan.name"></th>
            <th v-text="linkMan.address"></th>
            <th v-text="linkMan.email"></th>
        </tr>
    </table>
</div>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            cityList:["北京","上海","广州","深圳"],
            linkManList:[
                {
                    id:1,
                    name:"com.wangningbo",
                    address:"江苏省徐州市",
                    email:"wnb@qq.com"
                },
                {
                    id:2,
                    name:"hq",
                    address:"江苏省徐州市",
                    email:"hq@qq.com"
                },
                {
                    id:3,
                    name:"1314",
                    address:"江苏省徐州市",
                    email:"1314@qq.com"
                },
            ]
        },
        methods: {
        }
    });
</script>
</body>
</html>

演示结果：image-20210116164016968

7.vue绑定标签的显示与隐藏

v-if 和 v-show

v-if是根据表达式的值来决定是否渲染元素(标签都没有了)

v-show是根据表达式的值来切换元素的display css属性(标签还在)。

通过按钮来显示图片和隐藏图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue绑定标签的显示和隐藏</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--
   给img标签绑定v-if，如果值为true就显示，值为false就隐藏; v-if是通过直接删除标签来隐藏标签的
  给img标签绑定v-show，如果值为true就显示，值为false就隐藏;v-show是通过设置display为none来隐藏标签的
        -->
        <!--<img v-show="isShow" src="../img/mm.jpg" width="400px" height="400px">-->
        <input type="button" value="切换显示和隐藏" @click="toggleImg()">
    </div>
    <script>
        var vue = new Vue({
           el:"#app",
           data:{
               isShow:true
           },
            methods:{
               toggleImg(){
                    this.isShow = !this.isShow
               }
            }
        });
    </script>
</body>
</html>

演示结果：image-20210116164453066

点击按钮：image-20210116164538346

再点击：image-20210116164453066

8.Vue生命周期

vue实例从创建到销毁的过程.

​ 每个 Vue 实例在被创建到销毁都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

  • beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

  • created：数据已经绑定到了对象实例，但是还没有挂载对象（使用ajax可在此方法中查询数据，调用函数）

  • beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的

    el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创
    建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

  • mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们
    就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并
    进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法

  • beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还
    没有发生改变

  • updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到
    dom上面，完成更新

  • beforeDestroy,destroyed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据与view的绑定，即数据驱动

目前：我基本上也记不住，记住下面两个关键点就好

  1. created()钩子函数中，数据模型就可以赋值了，那么我们可以在这个钩子函数中发送异步请求，获取响应数据然后赋值给数据模型(重点)
  2. mounted()钩子函数中，视图上就已经绑定了数据模型，那么我们就可以获取视图的内容

9.发送异步请求

axios：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

注: Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

中文说明: https://www.kancloud.cn/yunye/axios/234845

语法：

引入，也可下载下来本地引入

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
  • get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?id=12').then(response=>{
    console.log(response);
  }).catch(error=>{
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      id: 12
    }
  }).then(response=>{
    console.log(response);
  }).catch(error=>{
    console.log(error);
  });
  • post请求
axios.post('/user', {
    id: 12,
    username:"jay"
  }).then(response=>{
    console.log(response);
  }).catch((error=>{
    console.log(error);
  })
axios的使用：

需求:使用axios发送异步请求给ServletDemo01,并在页面上输出内容

步骤:

  1. 创建ServletDemo01
  2. 把axios和vue导入项目 引入到页面
  3. 使用get(), post() 请求
  • html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用axios发送异步请求</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--
            目标:当页面加载的时候，发送异步请求给ServletDemo01，
            获取响应数据，展示到id为msg的div中
        -->
        <div id="msg" v-text="message"></div>
    </div>
    <script>
        var vue = new Vue({
           el:"#app",
           data:{
               message:""
           },
            created(){
                //使用axios发送异步请求,异步的get请求可以通过url地址携带数据
                axios.get("/demo01?id=12&username=jay").then(response =>{
                    //response就是服务器端的响应, response.data才是我们想要获取的响应体的数据
                    console.log(response.data)
                    this.message = response.data
                })

                //异步的get请求，还能通过json格式携带数据
                axios.get("/demo01",{
                    params:{
                        id:12,
                        username:"jay"
                    }
                }).then(response=>{
                    //拿到响应体的数据赋值给message
                    this.message = response.data
                })

                //axios发送异步的post请求，并且携带请求参数,post方式也可在url后面携带请求参数
                axios.post("/demo01?id=13&username=aobama").then(response=>{
                    //拿到响应体的数据赋值给message
                    this.message = response.data
                })

                //axios发送异步的post请求，使用json格式携带请求参数
                axios.post("/demo01",{id:14,username:"jay"}).then(response=>{
                    //拿到响应体的数据赋值给message
                    this.message = response.data
                })
            }
        });
    </script>
</body>
</html>
  • ServletDemo01的代码
@WebServlet("/demo01")
public class ServletDemo01 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request, response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //获取"name=value&name=value"类型的参数，用于测试前三种请求
        /*String id = request.getParameter("id");
        String username = request.getParameter("username");*/

        //获取json类型的请求参数，测试第四种请求
        Map user = JsonUtils.parseJSON2Object(request, Map.class);
        //防止响应中文乱码
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("你好世界:"+user.get("id")+","+user.get("username"));
    }
}

服务器要通过解析json获取参数的工具类，需要引入alibaba的fastjson：

package com.wangningbo.utils;

import com.alibaba.fastjson.JSON;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class JsonUtils {

    /**
     * 响应结果
     * @param response
     * @param obj
     * @throws IOException
     */
    public static void printResult(HttpServletResponse response, Object obj) throws IOException {
        response.setContentType("application/json;charset=utf-8");
        JSON.writeJSONString(response.getWriter(),obj);
    }

    /**
     * 把json转成对象
     * @param request
     * @param tClass
     * @param <T>
     * @return
     * @throws IOException
     */
    public static <T> T parseJSON2Object(HttpServletRequest request, Class<T> tClass) throws IOException{
        // 把表单数据之间转对象
        return JSON.parseObject(request.getInputStream(),tClass);
    }
}
  1. get方式携带请求参数，以及post方式通过url携带请求参数，实际上携带给服务器的参数的格式是"name=value&name=value&name=value", 服务器接收到这种格式的请求参数的时候，可以使用request的getParameter(name)或者getParameterValues(name)或者getParameterMap()方法获取请求参数
  2. post方式通过json格式携带请求参数，那么提交给服务器的参数的格式是{name:value,name:value},服务器就无法通过以前的getParameter(name)等方法获取请求参数。那么服务器要通过解析json获取，我们直接使用工具类就行了

小结

大体上常用的Vue知识点就是这些，下面一篇文章会根据上面的知识点，做一个联系人增删改查，分页的案例

暴龙战士wnb
关注
专栏目录
【前端开发---Vue2】史上最详细的Vue入门教程(一)
共同学习，共同成长
05-04 3661
欢迎大家持续关注【史上最详细的Vue2入门教程】系列文章，后面会持续更新！第一篇我们先来学习vue的基本概念、插值表达式、开发者工具安装、vue响应式、常用指令等等。
Java后端开发工程师学习笔记【狂神说Java笔记】
emgexgb_sef的博客
08-01 350
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦。...
web标签的介绍
weixin_69474694的博客
07-10 605
路径分类：绝对路径，相对路径绝对路径是指文件在硬盘上真正存在的路径，例如“bg.jpg”图片在硬盘的E:\book\代码\bg.jpg那绝对路径就是E:\book\代码\bg.jpg注意：绝对路径世界开发很少使用，上传到web服务器浏览可能不会显示，绝对路径可以使用“\”或“/”作为目录的分隔字符相对路径，就是相对于自己的目标文件位置。./现文件夹路径，../上级文件夹，../../上上级文件夹1）当当前文件与目标文件在同一目录下，直接写目标文件的文件名+拓展名； <img src="pic
web标签
dalingzi_的博客
05-31 1492
Python web入门基础知识 标签
WEB标签的用法
weixin_40029679的博客
01-22 244
image 的标签 拉伸的使用 属性 是 alt=“Flowers” 河流
WEB标签用法
2301_80107601的博客
01-11 434
标签：用于创建无序列表。语法为：<ul><li>列表项1</li><li>列表项2</li></ul>。<ol>和<li>标签：用于创建有序列表。语法为：<ol><li>列表项1</li><li>列表项2链接文本段落内容
web标签的使用
iteye_11381的博客
01-02 135
:D 简单的web标签
后端小白的Vue3新特性学习笔记
5akura's Blog
06-19 1540
文章目录Vue3写在前面一、Vite初体验二、Composition(组合式) API入门2.0、关于2.1、setup2.2、ref2.3、生命周期钩子2.4、watch监视2.5、独立的computed属性2.6、小结三、响应性3.1、什么是响应性3.2、Vue中如何实现（难）3.2.1、Vue如何跟踪数据变化Proxy（前置内容）Proxy初步认识基础示例handler.get()/set()实现数据跟踪3.3、响应性基础3.3.1、声明响应式状态3.3.2、创建独立的响应式值ref解包访问响应式对象
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找
最新发布
2401_84092832的博客
05-06 811
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
web常用标签
disnijxjs的博客
09-18 758
常用标签
直播代码，iOS 原生富文本显示图文
云豹网络科技
12-03 317
直播代码，iOS 原生富文本显示图文相关的代码 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.view.backgroundColor= [UIColor blackColor]; UILabel *label = [[UILabel alloc]initWith
web中常用的标签
qq_41335316的博客
04-25 3114
（一）web中常用的标签： 1、加粗：或者是 2、倾斜： 或者是 3、删除线:或者是 4、下划线：或者是 5、超链接标签：文本或图像 ​ target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式 （二）相对路径与绝对路径 1、相对路径：图片相对于HTML页面的位置 ​ eg:上一级路径 …/表示 2、绝对路径：通常都是以盘符开头的 （三）css文本属性 ​ 1、text-align属性用于设置元素内文本内容的水平对齐方式（left-左对齐
web前端常用标签（html）
智商不在服务区的博客
03-17 1823
<dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
web html的基本标签的使用
廷益_飞鸟的博客
10-19 192
1.网页基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <p title="移上后的效果" style="text-align:center"> hello world! &l.
WEB标签大全
lihaimin的专栏
05-12 316
http://www.web-tag.net
有关web中html各标签的含义
微风拂岸的专栏
04-27 1670
本文来自:http://bbs.blueidea.com/thread-2922186-1-2.html贴后面的回复.感觉很不错.转帖在这里,以为自用,可同用之.  初学DIV+CSS应该理解HTML标签的语义 如今Web标准都被通俗的叫做“div+css”或者“层布局”。我不反对这种便宜行
Web基本标签
m0_69435261的博客
06-24 340
Web标签使用方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值