05-Vue

山荷枝2026-08-14 8:49

1.Vue框架

渐进式的JS框架,作者尤雨溪

必须要引用的一段代码：

复制代码 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.Vue插值语法

{{ }}是vue的插值语法，可以获取data的数据，同时支持简单的逻辑运算和js函数

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <h1>{{name}}:{{age}}</h1>
    </div>
</body>
</html>
<script>
    //插值语法本质上是一种获取值的用法，通过{{}}的写法获取相应的data中的内容
    new Vue({
        el:'#app',//id为app
        data:{
            name:'张三',
            age:30
        }
    });
</script>

3.Vue指令

ES6

1.导入vue.js文件

2.vue实例对象只有一个，并且需要挂载到页面中的某个元素，一般是div元素

3.data：vue实例中用于存储数据的属性

3.1 v-text、v-html

v-text用来获取data中数据将数据以文本的形式渲染到指定标签内部
v-html用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <h1>{{text}} </h1>
    <h1 v-text="text"> </h1>
    <h1 v-html="html"> </h1>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
         data:{
            text:"<a href=''>我是v-text显示的内容</a>",
            html:"<a href=''>我是v-html显示的内容</a>"
        }
    });
</script>

代码中data的text虽然用了a href的语法，但是在<h1 v-text="text"> </h1>显示的依旧是文本格式

3.2 v-on

v-on的案例：通过两个按钮控制页面数字增加和减少

v-on中较为重要的是v-on:click以及@click，一般情况下，可以直接只用@click来引用方法

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="increase">+</button>
        <span>{{count}}</span>
        <button @click="decrease">-</button>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
         data:{
            count:1
        },
        methods:{
            increase(){
                this.count++;
            },
            decrease(){
                this.count--;
            }
        }
    });
</script>

3.3 v-if

v-if：用来控制页面元素是否展示

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <span style="color: red" v-if="nameFlag">admin</span>
    <a href="#" v-if="loginFlag" @click="login">登录</a>
    <a href="#" v-if="logOutFlag" @click="logOut">退出</a>
</body>
</html>
<script>
    new Vue({
        el:'#app',
         data:{
            //上方的v-if="nameFlag"以及其他两个v-if，都是控制页面内容是否展示，
            // v-if="nameFlag"，nameFlag:false则表示admin这个内容最开始不展示出来
            nameFlag:false,
            loginFlag:true,
            logOutFlag:false
        },
        methods:{
            //@click="login"是v-on的写法，将上方的登录与login（）方法绑定
            login(){
                this.reverse();
            },
            logOut(){
                this.reverse();
            },
            reverse(){
            //登录和退出时的ture和false情况刚好相反，因此写了reverse方法，login和logOut直接调用reverse方法即可
                this.nameFlag=!this.nameFlag;
                this.loginFlag=!this.loginFlag;
                this.logOutFlag=!this.logOutFlag;
            }
        }
    });
</script>

3.4 v-for

v-for：用来对对象进行遍历，包括数组

主要内容：v-for="(item,index) in users"代码中item和index都是自己可以随意命名的内容，只不过item部分刚好是users数组里面的具体内容，index是索引的作用

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="(item,index) in users">
            {{item.name}}:{{item.age}}//插值引用
        </p>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            users:[
                {
                    name:'张三',
                    age:20
                },
                {
                    name:'李四',
                    age:30
                }
            ]
        }
    });
</script>

3.5 v-model

绑定输入框数据，能够实现页面数据和vue实例数据进行双向绑定

第一种写法：

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
</html>
<body>
    <div id="app">
        <input type="number" v-model="result.num"/><br>
        <span>总价：{{result.num*price}}</span>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            result:{
                num:0
            },
            price:10
        }
    });
</script>

num：0 或者 **num：' '**的写法都成立

第二种方法

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
</html>
<body>
    <div id="app">
        <input type="number" v-model="num"/><br>
        <span>总价：{{num*price}}</span>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            num:0,
            price:10
        }
    });
</script>

3.6购物车例题

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
    <style>
        table{
            text-align: center;
            width: 500px;
            height: 300px;
        }
        input{
            width: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1px" align="center">
            <caption>
                <h3>购物车</h3>
            </caption>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(good,index) in goods">
                <td>{{good.id}}</td>
                <td>{{good.name}}</td>
                <td>{{good.price}}</td>
                <td>
                    <button @click="increase(good)">+</button>
                    <input type="number" v-model="good.num" />
                    <button @click="decrease(good)">-</button>
                </td>
                <td>
                    <a href="#" @click="del(index)">删除</a>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <a href="#" @click="clear">清空购物车</a>
                    <span>商品总价:{{total}}</span>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            goods:[
                {id:1,name:'红米note50',price:2000,num:0},
                {id:2,name:'辣条10袋',price:3000,num:0},
                {id:4,name:'迷你电动车',price:5000,num:0},
                {id:5,name:'小米电视机',price:2000,num:0},
            ],
            total:0
        },
        methods:{
            increase(good){
               good.num++;
               this.caculate();
            },
            decrease(good){
                if(good.num > 0){
                    good.num--;
                }
                this.caculate();
            },
            del(index){
                this.goods.splice(index,1);
            },
            clear(){
                this.goods = null;
            },
            caculate(){
                let money = 0;
                for(let good of this.goods){
                    money += good.price * good.num;
                }
                this.total = money;
            }
        }
    });
</script>

4.Axios

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js 中，其中必须要用到的代码是：

复制代码 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

Axios请求后端数据：异步请求

复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <style>
        table{
            text-align: center;
            width: 500px;
            height: 300px;
        }
        
    </style>
</head>

<body>
    <div id="app">
        <button @click="queryAll">查询数据</button>
        <table v-if="show" border="1px" align="center">
            <caption>
                <h3>工作历史</h3>
            </caption>
            <tr>
                <th>用户编号</th>
                <th>公司名称</th>
                <th>工作年限</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            <tr v-for="(jobHistory,index) in jobHistories">
                <td>{{jobHistory.user_id}}</td>
                <td>{{jobHistory.comp_name}}</td>
                <td>{{jobHistory.years}}</td>
                <td>{{jobHistory.title}}</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data: {
            show:false,
            jobHistories:[]
        },
        methods: {
            queryAll() {
                this.show = true;
               // let _this = this;
                
                axios.get('http://localhost:8080/user/list')
                .then(response=>{
                    this.jobHistories = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    });
</script>
相关推荐
breeze jiang3 小时前
Next.js App Router 全栈实战：从 SPA 的 SEO 痛点到服务端组件与 Hydration 水合机制
开发语言·javascript·ecmascript
可爱的秋秋啊3 小时前
vue调用腾讯人脸组件封装+接口请求后端调用
前端·javascript·vue.js
程序员爱钓鱼3 小时前
Rust 生命周期常见错误详解：看懂编译器报错并正确修复
前端·后端·rust
zhanghaha13143 小时前
Python进阶教程：5_XML 解析 —— 新手完全指南
java·前端·数据库
绝世唐门三哥3 小时前
CSS 虚线下划线用法指南：text-decoration 完整解析
前端·javascript·css
程序员爱钓鱼3 小时前
Go if 判断详解
前端·后端·go
程序员黑豆3 小时前
Java字符串拼接全解析：6种方式性能对比与实战指南
java·前端·ai编程
苏灿烤鱼4 小时前
14MB 模型，凭什么跟 270M 对打？
javascript·python·agent
万少8 小时前
DeepSeek 昨晚刚开源了 Harness：附万少的2 万字保姆级教程
前端·后端·架构
热门推荐
01GitHub 镜像站点02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03VSCode+CodeX扩展，无法启动042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费08历年考研数学一、数学二、数学三真题试卷及答案PDF09如何新建文件夹？ 电脑新建文件夹的4种方法102026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片