Vue快速入门教程

news2024/11/17 21:19:28

什么是Vue？

1，vue是一套前端框架，免除原生JavaScrip中dom操作，简化书写。
2，给予MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上
官网： https://v2.cn.vuejs.org

Model数据模型，数据和数据的处理方法

View 视图层，就是dom，最后展示在前端上的。

关键的是viewmodel

在这里插入图片描述

Vue快速入门

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 快速入门</title>
    <!-- 引入vue.js -->
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
        
    </div>

     
   
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",  //vue接管的区域
        data:{
            message: "Hello Vue"
        }
        // data定义的数据模型
    })

</script>



</html>

实现

双向数据绑定
在这里插入图片描述

数据模型的数据会展示到视图层中。视图层中的数据变化会导致数据模型的数据变化。数据模型的数据变化也会导致视图层的数据变化。这就是双向绑定相互影响。

Vue常用指令

v-bind和v-model

在这里插入图片描述

v-bind和v-model都是绑定元素。v-bind绑定属性，v-model绑定表单。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 动态绑定 -->
        <a v-bind:href="url">链接1</a>

        <!-- 简略写法 -->
        <a :href="url">链接2</a>


        <input type="text" name="" id="" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            url: "https://www.baidu.com"
           
        }
    })
</script>
</html>

实现

在这里插入图片描述

由于双向绑定，修改输入框的内容也会导致v-bind url 的内容发生改变
在这里插入图片描述

v-on

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">


        <!-- v-on 绑定 clink事件，绑定到handle函数中 -->

        <input type="button" value="点我一下" v-on:click="handle()" >

        <!-- 省略的写法@click -->
        <input type="button" value="点我一下" @click="handle" >

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下....");        
            }
            
        }
    })
</script>
</html>

实现

定义函数要放到methods中
在这里插入图片描述

vue条件判断

常用的判断和循环指令
在这里插入图片描述

v-if 和 v-show


v-if通过逻辑判断选择渲染，v-show是用过display浏览器选择渲染实际上数据前端都有

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age>35 && age<=60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age>35 && age<=60">中年人(35-60)</span>
        <span v-show="age>60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

实现

在这里插入图片描述


v-for

在这里插入图片描述

代码

遍历数组addrs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="addr in addrs">{{addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{{index+1}} {{addr}}</div>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳", "杭州"]
        },
        methods: {
            
        }
    })
</script>
</html>

实现

在这里插入图片描述

Vue小案例

目标

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user, index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score < 85 && user.score >=60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

实现

在这里插入图片描述

vue生命周期

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

案例（mounted）

挂载钩子，然后执行一个alert函数

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

实现

在这里插入图片描述

参考文章

参考文章：https://www.bilibili.com/video/BV1m84y1w7Tb

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1303146.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

jvs智能bi新增：数据集添加sql自定义节点、添加websocket任务进度动态展示等等

jvs智能bi新增：数据集添加sql自定义节点、添加websocket任务进度动态展示等等

智能bi更新功能 新增: 1.数据集添加sql自定义输入节点&#xff0c;支持mysql Oracle数据源&#xff1b; 用户可以从这些数据源中获取数据&#xff0c;并通过SQL语句对数据进行自定义处理和分析。可以帮助用户更加灵活地处理和分析数据&#xff0c;满足各种个性化的需求。 2.…
阅读更多...
Hive的metastore服务的两种运行模式

Hive的metastore服务的两种运行模式

Hive的metastore服务的作用是为Hive CLI或者Hiveserver2提供元数据访问接口 1.metastore运行模式 metastore有两种运行模式&#xff0c;分别为嵌入式模式和独立服务模式。下面分别对两种模式进行说明&#xff1a; &#xff08;1&#xff09;嵌入式模式 &#xff08;2&#x…
阅读更多...
基于ssm网上医院预约挂号系统+jsp论文

基于ssm网上医院预约挂号系统+jsp论文

摘 要 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;因此传统管理方式就不适合。为了让医院预约挂号信息的管理模式进行升级&#xff0c;也为了更好的维护医院预约挂号信息&#xff0c;网上医院预约挂号系统的开发运用就显得很有…
阅读更多...
基于SpringBoot+Vue社区医院服务系统（Java毕业设计）

基于SpringBoot+Vue社区医院服务系统（Java毕业设计）

点击咨询源码 大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的…
阅读更多...
代码随想录算法训练营第三十八天|理论基础、509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯

代码随想录算法训练营第三十八天|理论基础、509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯

代码随想录 (programmercarl.com) 理论基础 一、题目类型&#xff1a; 动规基础、背包问题、打家劫舍、股票买卖、子序列问题 二、解题思路&#xff1a; 动态规划五部曲&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始…
阅读更多...
yolov8安装过程中问题总结

yolov8安装过程中问题总结

1、ImportError: DLL load failed while importing _imaging: 找不到指定的模块。 解决办法&#xff1a; 卸载当前pillow版本&#xff0c;安装6.2.1版本 pip uninstall pillowpip install pillow6.2.1 -i https://pypi.tuna.tsinghua.edu.cn/simple/2、No module named“req…
阅读更多...
[面试篇～Spring] 必问基础知识

[面试篇～Spring] 必问基础知识

文章目录 1. 什么是 Spring2. Spring 框架有哪些主要的模块&#xff1f;3. 使用 Spring 框架能带来哪些好处&#xff1f;4. 什么是控制反转5. 什么是依赖注入6. 为什么使用依赖注入7. 在 Java 中依赖注入有哪几种方式8. 请解释下 Spring 框架中的 IoC&#xff1f;9. BeanFactor…
阅读更多...
大数据讲课笔记1.4 进程管理

大数据讲课笔记1.4 进程管理

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;进程概述1、基本概念2、三维度看待进程3、引入多道编程模型&#xff08;1&#xff09;CPU利用率与进程数关系&#xff08;2&#xff09;从三个视角看多进程 4、进程的产生和消亡&#xff08;1&#xf…
阅读更多...
go 编译apk

go 编译apk

首先进行安装go 安装 wget https://studygolang.com/dl/golang/go1.21.5.linux-amd64.tar.gz tar zxvf go1.21.5.linux-amd64.tar.gz mv go /usr/local/ vim /etc/profile # 进行配置环境变量&#xff1a; export GOROOT/usr/local/go export PATH$PATH:$GOROOT/bin # 保存退…
阅读更多...
算法Day28 二进制差异序列（格雷码）

算法Day28 二进制差异序列（格雷码）

二进制差异序列&#xff08;格雷码&#xff09; Description n 位二进制差异序列是一个由2^n个整数组成的序列&#xff0c;其中&#xff1a; 每个整数都在范围[0, 2^n - 1]内&#xff08;含0和2^n - 1&#xff09; 第一个整数是0 一个整数在序列中出现不超过一次 每对相邻整数…
阅读更多...
LeetCode-1008. 前序遍历构造二叉搜索树【栈 树 二叉搜索树 数组 二叉树 单调栈】

LeetCode-1008. 前序遍历构造二叉搜索树【栈 树 二叉搜索树 数组 二叉树 单调栈】

LeetCode-1008. 前序遍历构造二叉搜索树【栈 树 二叉搜索树 数组 二叉树 单调栈】 题目描述&#xff1a;解题思路一&#xff1a;题目大致意思就是给定一个二叉树的前序遍历&#xff0c;求对应的二叉搜索树。一种比较特殊的点是「二叉搜索树」的中序遍历的结果是【有序序列】&am…
阅读更多...
参数占位符#{}和${}

参数占位符#{}和${}

#是预处理而$是直接替换 Mybatis在处理#{}时&#xff0c;会将SQL中的#{}替换成占位符&#xff1f;&#xff0c;再使用preparedStatement的set方法来赋值。而Mybatis在处理 时&#xff0c;是将 {}时&#xff0c;是将 时&#xff0c;是将{}直接替换成变量的值 我们分别使用#{}和…
阅读更多...
热电厂发电机组常见故障及预测性维护方法

热电厂发电机组常见故障及预测性维护方法

热电厂的发电机组是关键的能源生产设备&#xff0c;在电力供应中扮演着关键角色。但经过长期运行和高负荷工作&#xff0c;一旦发生故障&#xff0c;可能导致停机、设备损坏甚至引发严重事故。因此&#xff0c;实施有效的预测性维护方法对于确保发电机组的稳定运行至关重要。本…
阅读更多...
vue3封装接口

vue3封装接口

在src下面创建一个文件夹任意名称 我拿这个名字举例子了apiService 相当于创建一个新的文件 // 封装接口 // apiService.js import axios from axios;// 接口前缀 const API_BASE_URL 前缀;接口后缀export const registerUser async (fileData) > {try {const response …
阅读更多...
Node CLI 之 Yargs (2)

Node CLI 之 Yargs (2)

什么是 yargs&#xff1f; yargs 是一个用于处理命令行参数的 Node.js 库 安装 yargs npm install yargs简单例子 不定义任何选项&#xff0c;直接便可以使用 定义命令 const yargs require(yargs)yargs.command(hello, Prints hello world, (yargs) > {}, (argv) >…
阅读更多...
栈（深入理解栈是什么）

栈（深入理解栈是什么）

这里写目录标题 栈概念栈的初始化栈的溢出函数的栈帧函数的返回 栈 概念 英文&#xff1a;stack&#xff0c;也叫做堆栈。 特点&#xff1a;先进后出。 栈的两个基本操作&#xff0c;也就是入栈和出栈。都是通过SP指针来维护。C语言中的函数的局部变量&#xff0c;传递的实参…
阅读更多...
datav-实现轮播表，使用updateRows方法-无缝衔接加载数据

datav-实现轮播表，使用updateRows方法-无缝衔接加载数据

前言 最近在做大屏需求的时候&#xff0c;遇到一个轮播数据的需求&#xff0c;查看datav文档发现确实有这个组件 但这个组件只提供了一次加载轮播的例子&#xff0c;虽然提供了轮播加载数据updateRows方法 但是文档并没有触发事件&#xff0c;比如轮播完数据触发事件&#xf…
阅读更多...
RocketMQ-RocketMQ高性能核心原理节点（流程图）

RocketMQ-RocketMQ高性能核心原理节点（流程图）

NamesrvServer启动流程图&#xff1a; namesrvServer启动简图&#xff1a; Broker服务启动过程流程图 Broker服务启动过程流程简图 整体RPC框架流程如下图 client: DefaultMQProducer
阅读更多...
CTF刷题记录

CTF刷题记录

刷题 我的md5脏了KFC疯狂星期四坤坤的csgo邀请simplePHPcurl 我的md5脏了 g0at无意间发现了被打乱的flag&#xff1a;I{i?8Sms??Cd_1?T51??F_1?} 但是好像缺了不少东西&#xff0c;flag的md5值已经通过py交易得到了&#xff1a;88875458bdd87af5dd2e3c750e534741 flag…
阅读更多...
2024美赛备战1--数据处理（数据预处理，异常值处理，预测模型，插值拟合 *****必看****）

2024美赛备战1--数据处理（数据预处理，异常值处理，预测模型，插值拟合 *****必看****）

1.数据预处理 所谓数据预处理&#xff0c;就是指在正式做题之前对数据进行的一些处理。在有些情 况下&#xff0c;出题方提供的数据或者网上查找的数据并不能直接使用&#xff0c;比如缺少数据甚 至是异常数据&#xff0c;如果直接忽略缺失值&#xff0c;或者没发现异常数据&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023