Javaweb基础-vue

Vue.js

Vue是一套用于构建用户界面的渐进式框架。

起步

引入vue

<head>
    <script src="static/js/vue@2.6.12.min.js"></script>
</head>

创建vue应用

<body>
<div id="index">
    <p>{{message}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            message: "消息"
        }
    });
</script>
</body>

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

<body>
<div id="index">
    <p>{{message}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            message: "消息"
        }
    });
</script>
</body>

HTML

使用 v-html 指令用于输出 HTML代码

<body>
<div id="index">
    <div v-html="html"></div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            html:"<p>一个p标签</p>"
        }
    });
</script>
</body>

属性

HTML 属性中的值应使用 v-bind 指令。

<body>
<div id="index">
    <input type="checkbox" v-model="used"><!--被选中时 used=true -->
    <div v-bind:class="{'class1':used}">属性</div><!-- used=true时，class=class1 -->
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            used:false
        }
    });
</script>
</body>
<style>
    .class1{
     background-color: red;
    }
</style>

表达式
<body>
<div id="index">
    <p>{{1+1}}</p>
    <p>{{ok?"OK":"NO"}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:true
        }
    });
</script>
</body>

指令

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

<div v-html=""></div>
<div v-bind:class="">属性</div>
...
参数

参数在指令后以冒号指明。

<div v-bind:class="">属性</div> <a v-bind:href="">链接</a> ...
修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<button @click.native="">按钮</button>

条件语句

v-if

<body>
<div id="index">
    <div v-if="ok">{{ok}}</div><!--ok=true时显示true，否则不展示 -->
    <div v-if="!ok">{{ok}}</div><!--ok=false时，显示false-->
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:false
        }
    });
</script>
</body>

v-else

<body>
<div id="index">
    <div v-if="ok">{{ok}}</div><!--ok=true时显示true-->
    <div v-else>{{ok}}</div><!--否则显示false-->
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:false}
        }
    });
</script>
</body>

v-else-if

<body>
<div id="index">
    <div v-if="ok==='A'">A</div>
    <div v-else-if="ok==='B'">B</div>
    <div v-else-if="ok==='C'">C</div>
    <div v-else>OTHER</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:'X'
        }
    });
</script>
</body>

v-show

与v-if作用类似

<body>
<div id="index">
    <div v-show="ok">A</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:true
        }
    });
</script>
</body>

循环语句

循环使用 v-for 指令。

迭代数组

<body>
<div id="index">
    <ol>
        <li v-for="item in list">{{item.key}}:{{item.value}}</li>
    </ol>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            list: [
                {key: "key1", value: "value1"},
                {key: "key2", value: "value2"},
                {key: "key3", value: "value3"}
            ]
        }
    });
</script>
</body>

迭代对象

<body>
<div id="index">
    <ol>
        <li v-for="(value,key) in obj">{{key}}:{{value}}</li>
    </ol>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            obj:{
                name:"aji",
                sex:"male",
                age:"24"
            }
        }
    });
</script>
</body>

迭代整数

<body>
<div id="index">
    <ol>
        <li v-for="n in 10">{{n}}</li>
    </ol>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
        }
    });
</script>
</body>

 

计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

computed

<body>
<div id="index">
    <span>{{str}}</span>
    <div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样-->
    <div v-for="item in strSplit">{{item}}</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            str:"abcd"
        },
        computed:{
            strSplit:function (){
                return this.str.split('')
            }
        }
    });
</script>
</body>

methods

可以使用 methods 来替代 computed，效果上两个都是一样的

<body>
<div id="index">
    <span>{{str}}</span>
    <div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样-->
    <div v-for="item in strSplit2()">{{item}}</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            str:"abcd"
        },
        methods:{
            strSplit2:function (){
                return this.str.split('')
            }
        }
    });
</script>
</body>

样式绑定

class

可以在对象中传入多属性用来动态切换多个 class

<body>
<div id="index">
    <span>红色背景<input type="checkbox" v-model="red"></span>
    <span>大字体<input type="checkbox" v-model="big"></span>
    <div v-bind:class="{'class1':red,'class2':big}">样式绑定class</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            red:false,
            big:false,
        }
    });
</script>
</body>
<style>
    .class1 {
        background-color: red;
    }
    .class2 {
        font-size: 40px;
    }
</style>

style

可以在 v-bind:style 直接设置样式

<body>
<div id="index">
    <button v-on:click="add()">{{fontSize}}+4</button><!--点击时触发add()方法，fontSize+4-->
    <div v-bind:style="{fontSize:fontSize+'px'}">样式绑定class</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            fontSize: 12,
        },
        methods: {
            add: function () {
                this.fontSize += 4
            }
        }
    });
</script>
</body>

事件处理器

事件监听可以使用 v-on 指令

<body>
<div id="index">
    <button v-on:click="{fontSize++}">{{fontSize}}</button>
    <button v-on:mousedown="color('yellow')" 
            v-on:mouseup="color('pink')" 
            v-bind:style="{backgroundColor:fontColor}">{{fontColor}}</button>
    <button v-on:mouseover="color('yellow')" 
            v-on:mouseout="color('pink')" 
            v-bind:style="{color:fontColor}">{{fontColor}}</button>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            fontSize: 12,
            fontColor: "pink"
        },
        methods: {
            color: function (param) {
                this.fontColor = param
            }
        }
    });
</script>
</body>

 

表单

可以用 v-model 指令在表单控件元素上创建双向数据绑定

输入框

<body>
<div id="index">
    <div>
        <input type="text" v-model="str">
        <p>{{str}}</p>
    </div>
    <div>
        <textarea type="text" v-model="text"></textarea>
        <p>{{text}}</p>
    </div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            str: '',
            text: ''
        }
    });
</script>
</body>

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。

<body>
<div id="index">
    <div>
        <span>逻辑值<input type="checkbox" v-model="bool"></span>
        <p>{{bool}}</p>
    </div>
    <div>
        <span>数组<input type="checkbox" v-model="arr" value="A">
            <input type="checkbox" v-model="arr" value="B">
            <input type="checkbox" v-model="arr" value="C"></span>
        <p>{{arr}}</p>
    </div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            bool: false,
            arr: [],
        }
    });
</script>
</body>

单选按钮

<body>
<div id="index">
    <div>
        <span>A<input type="radio" v-model="single" value="A"></span>
        <span>B<input type="radio" v-model="single" value="B"></span>
        <span>C<input type="radio" v-model="single" value="C"></span>
        <p>{{single}}</p>
    </div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            single:'',
        }
    });
</script>
</body>

select列表

<body>
<div id="index">
    <select v-model="select">
        <option value="">请选择</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <p>{{select}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            select: '',
        }
    });
</script>
</body>

组件

组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。

全局组件

<body>
<div id="index">
    <aji></aji><!--使用全局组件-->
</div>

<script>
    Vue.component('aji',{
        template:'<div>自定义组件aji</div>'
    }) //注册全局组件
    const index = new Vue({
        el: "#index",
        data: {
        }
    });
</script>
</body>

局部组件

<body>
<div id="index">
    <aji></aji><!--使用全局组件-->
</div>

<script>
    const index = new Vue({
        el: "#index",
        components: {
            'aji': {
                template: '<div>自定义组件aji</div>'
            }
        },
        data: {}
    });
</script>
</body>

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

<body>
<div id="index">
    <aji msg="prop传参"></aji><!--全局组件中使用prop-->
</div>

<script>
    Vue.component('aji', {
        props: ['msg'],
        template: '<div>自定义组件aji,传参为:{{msg}}</div>'
    })
    const index = new Vue({
        el: "#index",
        data: {}
    });
</script>
</body>

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

<body>
<div id="index">
    <input type="text" v-model="msg">
    <aji v-bind:msg="msg"></aji>
</div>

<script>
    Vue.component('aji', {
        props: ['msg'],
        template: '<div>自定义组件aji,传参为:{{msg}}</div>'
    })
    const index = new Vue({
        el: "#index",
        data: {
            msg:''
        }
    });
</script>
</body>

组件-自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

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

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

相关文章

Java的walkFileTree方法用法【FileVisitor接口】

Java的walkFileTree方法用法【FileVisitor接口】

在Java旧版本中遍历文件系统只能通过File类通过递归来实现&#xff0c;但是这种方法不仅消耗资源大而且效率低。 NIO.2的Files工具类提供了两个静态工具方法walk()和walkFileTree()可用来高效并优雅地遍历文件系统。walkFileTree()功能更强&#xff0c;可自定义实现更多功能&am…
阅读更多...
5.3章节python中字典：字典创建、元素访问、相关操作

5.3章节python中字典：字典创建、元素访问、相关操作

1.字典的创建和删除 2.字典的访问和遍历 3.字典的相关操作 4.字典的生成式 一、字典的创建和删除 字典&#xff08;dictionary&#xff09;是一种用于存储键值对&#xff08;key-value pairs&#xff09;的数据结构。每个键&#xff08;key&#xff09;都映射到一个值&#xf…
阅读更多...
基于FPGA的信号发生器verilog实现,可以输出方波,脉冲波,m序列以及正弦波,可调整输出信号频率

基于FPGA的信号发生器verilog实现,可以输出方波,脉冲波,m序列以及正弦波,可调整输出信号频率

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 输出方波 输出脉冲波 输出m随机序列 输出正弦波 2.算法运行软件版本 vivado2019.2 3.部分核心程序 &#xff08;完整…
阅读更多...
顺序表算法题【不一样的解法！】

顺序表算法题【不一样的解法！】

本章概述 算法题1算法题2算法题3彩蛋时刻&#xff01;&#xff01;&#xff01; 算法题1 力扣&#xff1a;移除元素 我们先来看这个题目的要求描述&#xff1a; 把与val相同数值的元素移除掉&#xff0c;忽略元素的相对位置变化&#xff0c;然后返回剩下与val值不同的元素个数…
阅读更多...
OpenCV高级图形用户界面(10)创建一个新的窗口函数namedWindow()的使用

OpenCV高级图形用户界面(10)创建一个新的窗口函数namedWindow()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 创建一个窗口。 函数 namedWindow 创建一个可以作为图像和跟踪条占位符的窗口。创建的窗口通过它们的名字来引用。 如果已经存在同名的窗口&am…
阅读更多...
Docker搭建Cisco AnyConnect 教程

Docker搭建Cisco AnyConnect 教程

本章教程搭建一个Cisco AnyConnect 连接教程。 一、下载文件 因为是基于Docker方式进行搭建的，所以需要提前安装好Docker，本章不介绍如何安装Docker，可以自行百度解决。 通过网盘分享的文件：ocserv-docker 链接: https://pan.baidu.com/s/14-2p9jenqE0KWzMilVzV-A?pwd=4yd…
阅读更多...
小O睡眠省电调研

小O睡眠省电调研

摘要 AI 预测睡眠 断网 杀应用为主的策略 UI 睡眠识别 AI 识别 将亮灭屏、音频、上传下载、运动状态数据存到xml中&#xff0c;供预测分析 睡眠策略 OPPO 睡眠省电 1. sOSysNetControlManagerNewInstance&#xff1a;断网&#xff08;wifi\mobiledata&#xff09;2. S…
阅读更多...
Windows系统部署redis自启动服务【亲测可用】

Windows系统部署redis自启动服务【亲测可用】

文章目录 引言I redis以本地服务运行（Windows service）使用MSI安装包配置文件，配置端口和密码II redis服务以终端命令启动缺点运行redis-server并指定端口和密码III 知识扩展确认redis-server可用性Installing the Service引言 服务器是Windows系统，所以使用Windows不是re…
阅读更多...
【web】JDBC

【web】JDBC

项目连接数据库 右侧导航栏找到databsae 如果没有驱动&#xff0c;先下载驱动 填写数据库用户名密码 勾选对应的表即可 JDBC代码流程 1,配置信息 2,加载驱动 从MySQL Connector/J 5.1版本开始&#xff0c;推荐使用com.mysql.cj.jdbc.Driver这个新的驱动类。 3,链接数据库…
阅读更多...
java集合（二）--set收尾+HashMap

java集合（二）--set收尾+HashMap

文章目录 1.linkedhashset的介绍2.linkedhashset源码分析3.Map的基本介绍31.基本属性3.2map里面的集合以及内部数据类型 4.Map接口的常见方法5.map里面的遍历的方法5.1根据key直接遍历5.2直接拿到这个value值5.3使用这个entry遍历 6.hashmap扩容转化红黑树的模拟7.hashtable底层…
阅读更多...
AJAX——POST 设置请求体参数

AJAX——POST 设置请求体参数

1、是在请求体 send 中来设置的 2、参数设置的形式可以以 url 设置参数的形式来设置 ① 用 &#xff1f;分隔 ② 添加参数的名字与参数值&#xff08;中间使用 &#xff09; ③ 有多个参数&#xff0c;各个参数之间用 & 分隔 3、实际上参数设置的内容可以是任意的&…
阅读更多...
python爬虫加解密分析及实现

python爬虫加解密分析及实现

第一种&#xff1a; 1、找到加密的接口地址&#xff0c;通过加密的接口地址全局搜索 2、通过打断点的方式&#xff0c;操作页面&#xff0c;跑到断点处时&#xff0c;即可找到加密串&#xff0c;如图二&#xff1b; 3、找到用的是哪种加密方式&#xff0c;如&#xff1a; cr…
阅读更多...
freertos的任务管理

freertos的任务管理

任务函数 任务被实现为C函数。它们唯一特别的地方是它们的原型&#xff0c;它必须返回void并接受void指针参数。以下是函数原型。 void ATaskFunction( void *pvParameters );每个任务本身都是一个小程序。它有一个入口点&#xff0c;通常会在无限循环中永远运行&#xff0c;…
阅读更多...
力扣 中等 143.重排链表

力扣 中等 143.重排链表

文章目录 题目介绍题解 题目介绍 题解 class Solution {public void reorderList(ListNode head) {ListNode mid middleNode(head);ListNode head2 reverseList(mid);while (head2.next ! null) {ListNode nxt head.next;ListNode nxt2 head2.next;head.next head2;head2.…
阅读更多...
一次恶意程序分析

一次恶意程序分析

首先F12shift查看字符表 字符表发现可疑字符串 双击进入 再tab 进入这里 推测为main函数 可见一些可疑的api FindResourceW推测该木马使用了资源加载 VirtualAlloc申请内存 然后sub_1400796E0 有 dwSize 参数 推测为 拷贝内存 memcpy类似函数 、 然后sub_140078CB0函数 跟进函…
阅读更多...
题目 3161: 蓝桥杯2023年第十四届省赛真题-子矩阵

题目 3161: 蓝桥杯2023年第十四届省赛真题-子矩阵

题目 代码 #include <bits/stdc.h> using namespace std; typedef long long ll; const int N 1010, mod 998244353; int g[N][N]; int rmin[N][N], rmax[N][N]; ll mmin[N][N], mmax[N][N]; int q[N * N]; int hh, tt; int n, m, a, b; int main() {cin >> n &…
阅读更多...
明日周刊-第23期

明日周刊-第23期

十月已过半&#xff0c;气温也转凉了&#xff0c;大家注意保温哦。冬吃萝卜&#xff0c;夏吃姜&#xff0c;在快要到来的冬季大家可以选择多吃点萝卜。 配图是本周末去商场抓娃娃的时候拍的照片&#xff0c;现在抓娃娃单次普遍都控制在1块钱以下了&#xff0c;还记得多年前的抓…
阅读更多...
鑫方盛携手纷享销客打造工业品采购领域CRM数字样板

鑫方盛携手纷享销客打造工业品采购领域CRM数字样板

鑫方盛集团有限公司(以下简称"鑫方盛")始创于1989年,是国内领先的集数字化平台打造、工业品全品类销售以及国际贸易于一体的一站式工业品服务平台。 集团拥有海内外90多家分公司,年营收超百亿元。为全球十万余家包括加工制造、航天军工、能源电力、钢铁冶金、水利水…
阅读更多...
GS-SLAM论文阅读--GSORB-SLAM

GS-SLAM论文阅读--GSORB-SLAM

前言 文章目录 前言1.背景介绍2.关键内容2.1 建图2.2跟踪2.3总体流程 3.文章贡献4.个人思考 1.背景介绍 3D高斯飞溅&#xff08;3DGS&#xff09;的出现最近引发了密集视觉SLAM研究的新浪潮。然而当前的方法面临着诸如对伪影和噪声的敏感性、训练视点的次优选择以及缺乏全局优…
阅读更多...
(小白教程)MPV.NET 播放器安装和添加Bilibili弹幕

(小白教程)MPV.NET 播放器安装和添加Bilibili弹幕

MPV.NET安装和添加脚本 MPV跨平台播放器&#xff1a;该播放器基于流行的mpv媒体播放器。mpv.net 设计为与 mpv 兼容&#xff0c;几乎所有 mpv 功能都可用&#xff0c;这意味着官方mpv 手册适用于 mpv.net&#xff0c;差异记录在mpv.net 手册中。 主要差异是mpv.net为MPV添加了现…
阅读更多...
最新文章

Copyright @ 2022~2023