vue技术学习

news2024/11/16 12:43:47

vue快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue快速入门</title>
</head>
<body>
<!--老师解读
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div
2. 因为div更加适合做布局
3. id 不是必须为app , 是程序员指定,一般我们就使用app
-->
<div id="app">
    <!--老师解读
    1. {{message}} : 插值表达式
    2. message 就是从model的data数据池来设置
    3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换
       , 如果没有匹配上, 就是输出空
    -->
    <h1>欢迎你{{message}}-{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
    //创建Vue对象
    /**
     * 老韩解读
     * 1. 创建Vue对象实例
     * 2. 我们在控制台输出vm对象，看看该对象的结构！(data/listeners)
     *
     */
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div
        data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "Hello-Vue!",
            name: "韩顺平教育"
        }
    })
    console.log("vm=>", vm);
    console.log(vm._data.message);
    console.log(vm._data.name);
    console.log(vm.name);
    console.log(vm.message);
</script>

</body>
</html>

在这里插入图片描述

单向渲染

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>单向数据渲染</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <!--老师解读
    1. 使用插值表达式引用 data数据池数据是在标签体内
    2. 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式
    3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析
    4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind
    -->
    <!--<img src="{{img_src}}">-->
    <img v-bind:src="img_src" v-bind:width="img_width">
    <img :src="img_src" :width="img_width">
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div
        data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "hello, 耗子精",
            img_src: "1.jpg",
            img_width: "200px"
        }
    })
    console.log("vm=>", vm);
</script>
</body>
</html>

在这里插入图片描述

双向渲染

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>双向数据渲染</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <!--老韩解读
    1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
    2. v-model="hobby.val" 是数据的双向渲染,
        (1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
        (2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
    -->
    <input type="text" v-model="hobby.val"><br/><br/>
    <input type="text" :value="hobby.val"><br/><br/>
    <p>你输入的爱好是: {{hobby.val}}</p>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div
        data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "hi, 输入你的爱好",
            hobby: {
                val: "购物"
            }
        }
    })
    console.log("vm=>", vm);
</script>
</body>
</html>

在这里插入图片描述

小作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--1、使用Vue的数据双向绑定 完成如下功能-->
<!--1) 当用户在输入框输入1.jpg 、2.jpg 、3.jpg时可以切换显示对应的图片-->
<!--2) 使用Vue的数据双向绑定完成-->
<body>
<div id="app">
<h1>请输入图片名称1.jpg-2.jpg-3.jpg</h1>
    <!--老师说明:
    1. 这里我们使用了数据的双向渲染-data{} 数据池的 img_src
    -->
    <input type="text" v-model="img_src"><br/><br/>
    <img :src="img_src" :height="img_height"><br/>
    <img src="1.jpg" :height="img_height">
    <img src="4.png" :height="img_height">
    <img src="3.png" :height="img_height">
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div
        data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            img_src: "1.jpg",
            img_height: "100px"
        }
    })
</script>
</body>
</html>

在这里插入图片描述

事件处理

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>
<!--视图-->
<div id="app">
    <h1>{{message}}</h1>
    <!--老韩解读
    1. v-on:click 表示我们要给button元素绑定一个click的事件
    2. sayHi() 表示绑定的方法, 在方法池 methods{} 定义的
    3. 底层仍然是dom处理
    4. 如果方法不需要传递参数，可以省略()
    5. v-on:click可以简写@, 但是需要浏览器支持
    -->
    <button v-on:click="sayHi()">点击输出</button>
    <button v-on:click="sayOk()">点击输出</button>

    <button v-on:click="sayHi">点击输出</button>
    <button @click="sayOk">点击输出</button>
</div>
<!--引入我们的vue.js-->
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>
    //老师说明:这里创建的Vue实例, 你可以不去接收, 也可以接收
    //方便我们调试信息
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
        data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "Vue事件处理的案例",
            name: "韩顺平教育"
        },
        //老师解读:
        // 1. 是一个methods属性, 对应的值是对象{}
        // 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池
        // 3. 这里需要小伙伴有js的基础=>java web第4章
        methods: {
            sayHi() {
                console.log("hi, 银角大王~");
            },
            sayOk() {
                console.log("ok, 金角大王~");
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

修饰符使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue修饰符使用</title>
</head>
<body>
<div id="app">
    <!-- 老韩解读
            1. 修饰符用于指出一个指令应该以特殊方式绑定。
            2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为
            3. 执行 程序员指定的方法
     -->
    <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
        妖怪名: <input type="text" v-model="monster.name"><br/><br/>
        <button type="submit">注册</button>
    </form>
    <p>服务返回的数据是{{count}}</p>
    <h1>修饰符扩展案例</h1>
    <button v-on:click.once="onMySubmit">点击一次</button><br/>
    <input type="text" v-on:keyup.enter="onMySubmit">
    <input type="text" v-on:keyup.down="onMySubmit">
    <input type="text" v-model.trim="count">
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {//数据池
            monster: {//monster数据(对象)的属性, 可以动态生成
            },
            count: 0
        },
        methods: {//方法池
            onMySubmit() {
                //console.log("我们自己的表单提交处理...");
                //"", null, undefined都是false
                if(this.monster.name) {
                    console.log("提交表单 name=", this.monster.name);
                    //这里，程序员就可以根据自己的业务发出ajax请求到后端
                    //得到数据后，在进行数据更新
                    this.count = 666;
                } else {
                    console.log("请输入名字..");
                }
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

小作业

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件处理-作业1</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="add">点击增加+1</button>
    <!--老师解读
    1. 这里count += 2 的count数据是data数据池的count
    2. 案例不难，重点是掌握和理解机制
    -->
    <button v-on:click="count += 2">点击增加+2</button>
    <p>你的按钮被点击了{{count}}次</p>
</div>
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
        data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "Vue事件处理的作业",
            count: 0//点击的次数
        },
        methods: {
            add() {
                //修改data数据池的count
                //因为data和methods在同一个vue实例中,因此可以通过this.数据方式访问
                this.count += 1;
            }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件处理-作业2</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    请输入书名: <input type="text" v-model="bookName">
    <button v-on:click="show">点击显示书名~</button>
</div>
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
        data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "Vue事件处理的作业",
            bookName: "天龙八部"
        },
        methods: {
            show() {
                //老韩提醒,如果你要访问当前Vue实例的数据池的数据, 需要this
                //否则，会报错ReferenceError: bookName is not defined
                alert("你输入的书名是:" + this.bookName)
            }
        }
    })
</script>
</body>
</html>

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

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

相关文章

【C++】做一个飞机空战小游戏(十)——子弹击落炮弹、炮弹与飞机相撞

【C++】做一个飞机空战小游戏(十)——子弹击落炮弹、炮弹与飞机相撞

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…
阅读更多...
回归预测 | MATLAB实现SA-SVM模拟退火算法优化支持向量机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现SA-SVM模拟退火算法优化支持向量机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现SA-SVM模拟退火算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现SA-SVM模拟退火算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本…
阅读更多...
【华为鸿蒙3.0/荣耀安卓12使用VMOS Pro的激活方式】

【华为鸿蒙3.0/荣耀安卓12使用VMOS Pro的激活方式】

关于华为鸿蒙3.0/荣耀安卓12如何解除进程限制&#xff0c;这里提供以下教程供小伙伴们参考。 需要准备&#xff1a;电脑一台&#xff0c;数据线一根。 第一步&#xff1a;打开手机USB调试模式。 确保USB数据线已连接手机和电脑&#xff0c;打开手机“开发者选项”&#xff0…
阅读更多...
Monitor.Analog产品老化试验软件概要设计

Monitor.Analog产品老化试验软件概要设计

Monitor.Analog产品老化试验软件概要设计&#xff1a; 1. 引言&#xff1a; 模拟量采集软件的目标是实现对模拟量信号的采集、处理和展示。该软件旨在提供一个用户友好的界面&#xff0c;允许用户配置采集参数、实时监测模拟量信号&#xff0c;并提供数据分析和导出功能。 2. 功…
阅读更多...
K210学习笔记——三角函数下的目标追踪

K210学习笔记——三角函数下的目标追踪

各位正在读文章的朋友们你们好&#xff0c;本人为非专业学生&#xff0c;如有不对的地方&#xff0c;期待您的指正。 目标追踪的意思是&#xff1a;识别到目标物体&#xff0c;通过舵机转动&#xff0c;朝向目标物体. 实验器材&#xff1a;二自由度舵机云台加两个SG90舵机&…
阅读更多...
预警：传统的QA岗位将被DevOps淘汰

预警：传统的QA岗位将被DevOps淘汰

导读在大多数机构或公司里&#xff0c;软件开发过程主要遵循一个或多个开发模型&#xff0c;例如瀑布模型或敏捷模型。在瀑布模型中&#xff0c;测试活动一般都在后期进行。软件开发完成后&#xff0c;缺陷被QA团队找出&#xff0c;然后再被修复。后两个活动不断循环和重复&…
阅读更多...
Python基础语法入门(第二十三天)——正则表达式

Python基础语法入门(第二十三天)——正则表达式

正则表达式是一种文本模式&#xff0c;用于匹配字符串&#xff0c;它是由字符和特殊字符组成的模式。正则表达式可以用于验证、搜索、替换和提取字符串。其能够应用于各种编程语言和文本处理工具中&#xff0c;如Python、Java、JavaScript等。 正则表达式在线测试工具&#xf…
阅读更多...
Spring源码编译-for mac

Spring源码编译-for mac

超详细的spring源码编译 记&#xff1a;编译成功时间&#xff1a;2023.08.19 环境准备&#xff1a; 1.idea 2023.1.1 Community Edition 2.jdk1.8 3.gradlegradle-5.6.4 4.spring源码(版本&#xff1a;spring-framework-v5.2.25.RELEASE) 一.spring源码下载 github 加速网站&…
阅读更多...
stm32单片机4个开关控制8个LED灯，4种不同模式参考源代码（附带PROTEUS电路图）

stm32单片机4个开关控制8个LED灯，4种不同模式参考源代码（附带PROTEUS电路图）

//main.c文件 /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body************************************************************************…
阅读更多...
0101前期准备-大数据学习

0101前期准备-大数据学习

文章目录 1 前言2 配置VMware虚拟机2.1 设置主机名和固定IP2.2 本地系统与Linux系统配置主机名映射2.3 配置虚拟机之间用户的SSH免密互通2.4 安装JDK环境2.5 关闭防火墙和SELinux2.6 更新时区和同步时间2.7 保存虚拟机快照 结语 1 前言 我们从基础的hadoop开始学起&#xff0c;…
阅读更多...
Python上楼梯问题：递归解法探究（斐波那契变种）（记忆化递归）

Python上楼梯问题：递归解法探究（斐波那契变种）（记忆化递归）

文章目录 上楼梯问题&#xff1a;递归解法探究问题定义解决方案1. 递归2. 记忆化递归关于python memo{}默认参数和字典的语法语法功能版本信息注意事项 结论 上楼梯问题&#xff1a;递归解法探究 在这篇文章中&#xff0c;将对上楼梯问题进行深入探讨。上楼梯问题是一种常见的…
阅读更多...
2D应用开发是选择WebGL 还是选择Canvas？

2D应用开发是选择WebGL 还是选择Canvas？

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可二次编辑的3D应用场景 在介绍WebGL和Canvas的区别和联系之前&#xff0c;需要先了解它们各自的定义和特点。 WebGL是一种基于标准HTML5的技术&#xff0c;用于在Web浏览器中实时渲染3D图形。它是由Khronos Group开发的一套…
阅读更多...
C++系列-内存模型

C++系列-内存模型

内存模型 内存模型四个区代码区全局区栈区堆区内存开辟和释放在堆区开辟数组 内存模型四个区 不同区域存放的数据生命周期是不同的&#xff0c;更为灵活。 代码区&#xff1a;存放函数体的二进制代码&#xff0c;操作系统管理。全局区&#xff1a;存放全局变量&#xff0c;常…
阅读更多...
工厂模式的三种姿态？

工厂模式的三种姿态？

在软件工程中常见的设计模式——工厂模式。工厂模式是一种有力的工具&#xff0c;用于创建对象实例的方式&#xff0c;可以帮助我们更好地组织代码和降低耦合性。在本文中&#xff0c;我将为大家详细介绍工厂模式的三种姿态&#xff0c;同时通过举例和代码演示来帮助大家更好地…
阅读更多...
Docker环境安装elasticsearch和kibana

Docker环境安装elasticsearch和kibana

一、安装elasticsearch 创建es-network&#xff0c;让es、kibana在同一个网段&#xff1a; docker network create --driverbridge --subnet192.168.1.10/24 es-network运行elasticsearch docker run -d \ --name elasticsearch \ # 容器名 --hostname elasticsearch # 主机…
阅读更多...
【Redis】Redis中的布隆过滤器

【Redis】Redis中的布隆过滤器

【Redis】Redis中的布隆过滤器 前言 在实际开发中&#xff0c;会遇到很多要判断一个元素是否在某个集合中的业务场景&#xff0c;类似于垃圾邮件的识别&#xff0c;恶意IP地址的访问&#xff0c;缓存穿透等情况。类似于缓存穿透这种情况&#xff0c;有许多的解决方法&#xf…
阅读更多...
高效的WMS系统手持盘点方案

高效的WMS系统手持盘点方案

WMS系统手持盘点就是指利用WMS系统支持的手持式电子盘点设备进行库存盘点的方式。 具体来说: - 手持盘点设备是一种小型的电子设备,具有移动条形码扫描功能,可以实时与WMS系统联通。 - WMS系统利用手持设备,可以给仓储人员下发具体的盘点任务,例如需要盘点的货位、商品等信息…
阅读更多...
mybatis plus 配置自动设置创建时间和创建人id

mybatis plus 配置自动设置创建时间和创建人id

1.新建 MyMetaObjectHandler package com.ruoyi.framework.config;import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler; import com.ruoyi.common.bean.LocalUser; import com.ruoyi.coupon.domain.CouponUser; import org.apache.ibatis.reflection.MetaObjec…
阅读更多...
软件报错msvcr90.dll丢失的解决方法，亲测可以修复

软件报错msvcr90.dll丢失的解决方法，亲测可以修复

我曾经遇到过一个令人头疼的问题&#xff1a;msvcr90.dll丢失。这个问题导致了我的程序无法正常运行&#xff0c;让我感到非常苦恼。然而&#xff0c;在经过一番努力后&#xff0c;我终于成功地修复了这个问题&#xff0c;这让我感到非常欣慰和满足。 msvcr90.dll丢失的原因可能…
阅读更多...
python高级基础

python高级基础

文章目录 python高级基础闭包修饰器单例模式跟工厂模式工厂模式单例模式 多线程多进程创建websocket服务端手写客户端 python高级基础 闭包 简单解释一下闭包就是可以在内部访问外部函数的变量&#xff0c;因为如果声明全局变量&#xff0c;那在后面就有可能会修改 在闭包中的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023