Vue介绍&使用

最新推荐文章于 2024-08-16 19:41:03 发布
最新推荐文章于 2024-08-16 19:41:03 发布
阅读量721 收藏 24
点赞数 20
分类专栏： JavaWeb 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rch041126/article/details/136969847
版权

文章目录

Vue概念

在这里插入图片描述
在这里插入图片描述

一、Vue快速入门

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <input v-model="username">
    <!--插值表达式-->
    {{username}}

</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });

</script>


</body>
</html>

二、Vue常用指令

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

   <a v-bind:href="url">点击一下</a>

    <a :href="url">点击一下</a>


    <input v-model="url">

</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });

</script>


</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">



    <input type="button" value="一个按钮" v-on:click="show()"><br>
    <input type="button" value="一个按钮" @click="show()">

</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });

</script>


</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count == 3">div v-show</div>
    <br>

    <input v-model="count">


</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:3
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });

</script>


</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:3,
                addrs:["北京","上海","西安"]
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });

</script>


</body>
</html>

三、Vue生命周期

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:3,
                addrs:["北京","上海","西安"]
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        },
        /*mounted:function () {

        }*/
        mounted(){
            alert("加载完成...")
        }
    });

</script>


</body>
</html>

四、案例

1、查询所有

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>

        <!--
            使用v-for遍历tr
        -->

        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>

        <!--<tr align="center">
            <td>2</td>
            <td>优衣库</td>
            <td>优衣库</td>
            <td>10</td>
            <td>优衣库，服适人生</td>
            <td>禁用</td>

            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>

        <tr align="center">
            <td>3</td>
            <td>小米</td>
            <td>小米科技有限公司</td>
            <td>1000</td>
            <td>为发烧而生</td>
            <td>启用</td>

            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>-->
    </table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>

<script>

    new Vue({
        el: "#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            // 页面加载完成后，发送异步请求，查询数据
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        }
    })


    /*//1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            //获取数据
            let brands = resp.data;
            let tableData = " <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";

            for (let i = 0; i < brands.length ; i++) {
                let brand = brands[i];

                tableData += "\n" +
                    "    <tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }*/


</script>


</body>
</html>

2、新增品牌

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>
<script src="js/axios-0.18.0.js"></script>

<script src="js/vue.js"></script>

<script>

    new Vue({
        el: "#app",
        data(){
            return {
                brand:{}
            }
        },
        methods:{
            submitForm(){
                // 发送ajax请求，添加
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo/addServlet",
                    data:_this.brand
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if(resp.data == "success"){
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })

            }
        }
    })


    /*//1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
        // 将表单数据转为json
        var formData = {
            brandName:"",
            companyName:"",
            ordered:"",
            description:"",
            status:"",
        };
        // 获取表单数据
        let brandName = document.getElementById("brandName").value;
        // 设置数据
        formData.brandName = brandName;

        // 获取表单数据
        let companyName = document.getElementById("companyName").value;
        // 设置数据
        formData.companyName = companyName;

        // 获取表单数据
        let ordered = document.getElementById("ordered").value;
        // 设置数据
        formData.ordered = ordered;

        // 获取表单数据
        let description = document.getElementById("description").value;
        // 设置数据
        formData.description = description;

        let status = document.getElementsByName("status");
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
                //
                formData.status = status[i].value ;
            }
        }

        console.log(formData);
        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:formData
        }).then(function (resp) {
            // 判断响应数据是否为 success
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html";
            }
        })
    }

*/

</script>
</body>
</html>
仁人众
关注
  • 20
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-electron框架使用介绍
xiaxia0705的博客
09-05 4282
vue-electron框架搭建、与后端对接配置、打包配置，开发打包过程中遇到的问题分享
Vue filter介绍及其使用详解
10-19
本文将深入探讨Vue filter的介绍及其使用方法。 ### Vue Filter的基本概念 Vue过滤器主要用于数据的格式化，它们可以被用在插值表达式（mustache语法）或v-model指令中。Vue提供了几个内置的过滤器，包括`...
Vue介绍
吃蛋糕的居居
07-27 3万+
一、vue介绍 1.Vue.js是用于构建交互式的 Web 界面的库。 2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。 3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架, Vue.js 更容易上手。 4.Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。 5.内核生成：Es6和---.
Vue.use使用介绍
m0_68702564的博客
06-12 3218
使用 Vue.use 注册一个全局组件。
Vue详细介绍及使用
小仙儿
01-28 4万+
Vue详细介绍及使用 一、Vue定义及简介 1、Vue定义 关于Vue简介，百度百科给出的解释是：Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 ...
vue-echarts基本使用
03-18 6万+
1，安装vue-echarts cnpm i -S vue-echarts 2,main.js中全局注册组件 import ECharts from 'vue-echarts/components/ECharts' Vue.component('v-chart', ECharts) 3，修改echarts 在项目的node-modules文件夹中根据路径：vue-echarts/co...
Vue 3 介绍
csdn727232616的博客
06-21 7万+
vue3基础
【vue】websocket封装&使用
一位前行者的博客
02-21 7284
本文章向大家介绍使用websocket，主要包括使用websocket使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。 创建一个websocket.js（@/utils/websockets） // websocket实例 let wsObj = null // ws连接地址 let wsUrl = null // let userId = null; // 是否执行重连 true/不执行 ； false/执行 let lockReconnect = false
vue框架介绍
前端小白
10-26 7371
vue简单介绍
vue中使用vuex(超详细)
热门推荐
一只前端小菜鸟
07-15 17万+
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。 那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步） 一、适合初学者使用，保存数据以及...
vue3 vue-router使用详解
蓑笠翁
06-17 1万+
vue3引入router详解，vue3+typescript使用Vue-Router包详解。
VUE&Element&综合案例1
08-03
本文档将详细介绍 VUE 框架的基础知识，包括 VUE 概述、快速入门、条件判断指令等内容。同时，文章还将介绍 VUE 中的双向绑定思想、MVVM 模式、插值表达式、指令作用等重要概念。 VUE 概述 -------- VUE 是一款...
vue使用 bpmn.js
04-06
接下来，我们需要在Vue的`src`目录下创建一个组件，例如名为`BpmnViewer.vue`，在这个组件中引入并使用bpmn.js。在`<script>`标签中导入bpmn-js模块，然后在`mounted()`生命周期钩子中实例化BPMN viewer，并加载流程...
Vue项目结构介绍
01-27
Vue项目结构介绍主要涵盖以下几个核心知识点： 1. **Vue CLI**：Vue CLI 是一个用于快速构建 Vue.js 项目的脚手架工具，它提供了自动化配置、快速创建项目模板、热更新和构建优化等功能，大大简化了 Vue 项目的初始...
AirportGrab:AirportGrab-Vue && Node.js
04-09
机场抢劫 项目介绍 客户从机场接机或在机场下车的应用程序。...前端-由Vue使用CSS，JS构建 后端-由Node.js和MongoDB构建 项目形象 编译和热重装前端 npm run serve 后端编译和热重载 node app.js 自定义配置 请参阅。
详细介绍 Vue3 的 watch 和 watchEffect
weixin_52648900的博客
08-15 962
非常详细介绍了vue3的watch和watchEffect区别和联系
Element-04.组件-Dialog对话框
最新发布
程小白的博客
08-16 273
【代码】Element-04.组件-Dialog对话框。
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 437
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
Vue 生命周期详解含demo、面试常问问题案例
qq_34419312的博客
08-16 1106
Vue 生命周期详解、面试常问问题案例 含 demo
Vue&React项目中ESLint安装与使用教程
"本文将详细介绍Vue和React开发中常用的代码质量检查工具ESLint的安装与使用方法，帮助开发者提升代码规范性和可维护性。" 在前端开发中，代码质量和规范性至关重要，它们影响着项目的可读性、可维护性和团队协作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值