Vue快速入门教程

什么是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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

漏洞复现--速达进存销管理系统任意文件上传

漏洞复现--速达进存销管理系统任意文件上传

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…
阅读更多...
python：六种算法（DBO、RFO、WOA、GWO、PSO、GA）求解23个测试函数（python代码）

python：六种算法（DBO、RFO、WOA、GWO、PSO、GA）求解23个测试函数（python代码）

一、六种算法简介 1、蜣螂优化算法DBO 2、红狐优化算法RFO 3、鲸鱼优化算法WOA 4、灰狼优化算法GWO 5、粒子群优化算法PSO 6、遗传算法GA 二、6种算法求解23个函数 &#xff08;1&#xff09;23个函数简介 参考文献&#xff1a; [1] Yao X, Liu Y, Lin G M. Evolution…
阅读更多...
关于粒子群算法的一些简单尝试

关于粒子群算法的一些简单尝试

粒子群算法核心思想&#xff1a;&#xff08;鸟 粒子&#xff09; &#xff08;1&#xff09;许多的鸟站在不同的地方&#xff1b; &#xff08;2&#xff09;每一只鸟都有自己寻找食物的初始飞行方向、飞行速度&#xff1b; &#xff08;3&#xff09;这些鸟儿每隔一段时间…
阅读更多...
0013Java安卓程序设计-ssm酒品移动电商平台app

0013Java安卓程序设计-ssm酒品移动电商平台app

文章目录 **摘要**目录系统实现5.1 APP端5.2管理员功能模块开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析…
阅读更多...
PHP基础 - 循环与条件语句

PHP基础 - 循环与条件语句

循环语句 1）for循环： 重复执行一个代码块指定的次数。 for ($i = 0; $i < 5; $i++) { // 初始化 $i 为 0，每次循环后将 $i 值增加 1，当 $i 小于 5 时执行循环echo "The number is: $i \n"; // 输出当前 $i 的值并换行 }// 循环输出结果为： // The number …
阅读更多...
美颜技术讲解：视频美颜SDK的开发与集成

美颜技术讲解：视频美颜SDK的开发与集成

如今&#xff0c;美颜技术的应用愈发成为吸引用户的一项重要功能。本文将深入探讨视频美颜SDK的开发与集成&#xff0c;揭示其背后的技术原理和实现步骤。 一、美颜技术的背后 美颜技术并非仅仅是简单的滤镜效果&#xff0c;而是一项涉及复杂图像处理和算法的技术。在视频美颜…
阅读更多...
Android VpnService 使用(一)

Android VpnService 使用(一)

Android VpnService 使用(一) 本篇算是VpnService 使用的第一篇文章,主要讲述service创建,intent调用. 1: 申请权限 <service android:name".MyVpnService" android:permission"android.permission.BIND_VPN_SERVICE"><intent-filter><ac…
阅读更多...
【android开发-22】android中音频和视频用法详解

【android开发-22】android中音频和视频用法详解

1&#xff0c;播放音频 MediaPlayer是Android中用于播放音频和视频的类。它提供了许多方法来控制播放&#xff0c;例如播放、暂停、停止、释放等。下面是一个简单的MediaPlayer用法详解和参考代码例子。 首先&#xff0c;确保在布局文件中添加了一个MediaPlayer控件&#xff…
阅读更多...
nginx配置自动压缩-gzip压缩

nginx配置自动压缩-gzip压缩

1.nginx配置文件 server里添加gzip配置信息。 重启nginx服务 对比效果&#xff1a;上图是没有开启gzip自动压缩&#xff0c;总共资源是1.3M&#xff0c;传输1.3MB&#xff0c;下图是开启gzip压缩&#xff0c;总共资源是1.3M&#xff0c;传输了973KB。
阅读更多...
全网快递批量查询的得力助手

全网快递批量查询的得力助手

在当今社会&#xff0c;网络购物已经成为人们日常生活的重要组成部分。随着网购的普及&#xff0c;快递行业也迅速发展壮大。然而&#xff0c;这也带来了一系列问题&#xff1a;如何快速、准确地查询快递信息&#xff1f;如何批量查询多个快递&#xff1f;今天&#xff0c;我们…
阅读更多...
Axure的安装以及简单使用

Axure的安装以及简单使用

目录 Axure简介 是什么 有什么用 Axure的优缺点 优点&#xff1a; 缺点&#xff1a; 安装 汉化 Axure的使用 工具栏 页面 ​编辑 添加子页面 ​编辑 Axure简介 是什么 Axure是一款著名的原型设计工具。它允许用户创建交互式线框图、流程图、原型和其他设计文档&…
阅读更多...
性能测试基础

性能测试基础

性能测试分类 客户端性能&#xff1a;测试APP自身的性能&#xff0c;例如CPU、内存消耗&#xff1b;web页面元素渲染速度 服务端性能&#xff1a;测试服务端项目程序的支持的并发、处理能力、响应时间等&#xff0c;主要通过接口来做性能测试 性能测试指标 并发 同时向服务…
阅读更多...
UART设备

UART设备

UART简介 UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;通用异步收发传输器&#xff0c;UART作为异步串口通信协议的一种&#xff0c;工作原理是将传输数据的每个字符一位接一位地传输。 是在应用程序开发过程中使用频率最高的数据总线。 UART串…
阅读更多...
CV计算机视觉每日开源代码Paper with code速览-2023.12.6

CV计算机视觉每日开源代码Paper with code速览-2023.12.6

点击计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构&#xff1a;Transformer】Rejuvenating image-GPT as Strong Visual Representation Learners 论文地址&#xff1a;https://a…
阅读更多...
动能资讯 | 智慧城市：城市转型升级

动能资讯 | 智慧城市：城市转型升级

随着科技的迅猛发展&#xff0c;智慧城市正成为城市发展的新方向和热门话题。智慧城市以其前瞻性的规划、科技的融合和可持续的发展&#xff0c;为人们提供更高品质的生活和工作环境&#xff0c;正逐渐引领着新时代的发展。 智慧城市不仅仅是城市的现代化&#xff0c;更是城…
阅读更多...
k8s一键部署uniswap

k8s一键部署uniswap

1、拉取uniswap源码 github地址 2、编写Dockerfile并打镜像 # Set the base image FROM node:18.10.0# WORKDIR /usr/src/app/ WORKDIR /home/gateway# Copy files COPY ./ /home/gateway/# Dockerfile author / maintainer LABEL maintainer"Michael Feng <mikehummi…
阅读更多...
界面控件Kendo UI for jQuery中文教程 - 如何集成全新的DockManager组件

界面控件Kendo UI for jQuery中文教程 - 如何集成全新的DockManager组件

R3 2023版本在Kendo UI for jQuery套件中引入了许多改进&#xff0c;其中包括多个主题上的新组件、特性和改进。其中一个重要的新增功能是DockManager组件&#xff0c;本文将话一些时间与大家讨论一下它的功能&#xff01; P.S&#xff1a;Kendo UI for jQuery提供了在短时间内…
阅读更多...
【数据结构】面试OJ题——链表

【数据结构】面试OJ题——链表

目录 1.移除链表元素 思路&#xff1a; 2.反转链表 思路&#xff1a; 3.链表的中间结点 思路&#xff1a; 4.链表中的倒数第K个结点 思路&#xff1a; 5.合并两个有序链表 思路&#xff1a; 6.链表分割 思路&#xff1a; 7.链表的回文结构 思路&#xff1a; 8.随机链表…
阅读更多...
区块链扩容问题研究【06】

区块链扩容问题研究【06】

1.Plasma&#xff1a;Plasma 是一种基于以太坊区块链的 Layer2 扩容方案&#xff0c;它通过建立一个分层结构的区块链网络&#xff0c;将大量的交易放到子链上进行处理&#xff0c;从而提高了以太坊的吞吐量。Plasma 还可以通过智能合约实现跨链交易&#xff0c;使得不同的区块…
阅读更多...
【基础篇】一，认识STM32

【基础篇】一，认识STM32

一&#xff0c;什么是STM32&#xff1f; STM32是一款由意法半导体公司开发的32位微控制器&#xff1b;其中ST指意法半导体&#xff1b;M指MCU或MPU&#xff0c;32指32 位。 STM32覆盖了Cortex-M的多种系列&#xff0c;包括M0、M0、M3、M7等。在分类上&#xff0c;STM32有很多…
阅读更多...
最新文章

Copyright @ 2022~2023