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 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vulnhub：Me-and-My-Girlfriend-1

Vulnhub：Me-and-My-Girlfriend-1

一.环境启动/信息收集 &#xff08;1&#xff09;根据物理地址用nmap的主机发现功能得出IP地址 nmap -P 192.168.138.0/24 //同网段下主机发现得到IP为192.168.138.180&#xff08;2&#xff09;做nmap的目录扫描和端口扫描来发现其他站带以及信息 nmap -p- 192.168.138.180 …
阅读更多...
CTF(五)

CTF(五)

导言&#xff1a; 本文主要讲述在CTF竞赛中&#xff0c;web类题目easyphp。 靶场链接&#xff1a;攻防世界 (xctf.org.cn) 参考文章原文链接&#xff1a;Web安全攻防世界05 easyphp&#xff08;江苏工匠杯&#xff09;_攻防世界 easyphp-CSDN博客 一&#xff0c;观察页面。…
阅读更多...
玄机平台-应急响应-webshell查杀

玄机平台-应急响应-webshell查杀

首先xshell连接 然后进入/var/www/html目录中&#xff0c;将文件变成压缩包 cd /var/www/html tar -czvf web.tar.gz ./* 开启一个http.server服务&#xff0c;将文件下载到本地 python3 -m http.server 放在D盾中检测 基本可以确认木马文件就是这四个 /var/www/html/shell.p…
阅读更多...
动态规划-子数组系列——乘积最大子数组

动态规划-子数组系列——乘积最大子数组

1.题目解析 题目来源&#xff1a;152.乘积最大子数组——力扣 测试用例 2.算法原理 1.状态表示 由于题目给的数组中可以包含负数&#xff0c;因此求最大乘积有两种情况&#xff1a; a.负数乘以最小数得出最大乘积 b.整数乘以最大数得出最大乘积 所以需要两个表分别求出最大最…
阅读更多...
Leetcode 柱状图中最大的矩形

Leetcode 柱状图中最大的矩形

h 是右边界&#xff0c;连续多个高度递增的柱子&#xff0c;如果遇到下一个 h < 栈顶元素(是最大的元素&#xff0c;单调递增栈)&#xff0c;那么会不断出栈来更新计算最大面积。 并非是一次性计算出最大面积的&#xff0c;很重要的一点是while (!stack.isEmpty()这一部分的…
阅读更多...
【Linux】多线程安全之道：互斥、加锁技术与底层原理

【Linux】多线程安全之道：互斥、加锁技术与底层原理

目录 1.线程的互斥 1.1.进程线程间的互斥相关背景概念 1.2.互斥量mutex的基本概念 所以多线程之间为什么要有互斥&#xff1f; 为什么抢票会抢到负数&#xff0c;无法获得正确结果&#xff1f; 为什么--操作不是原子性的呢&#xff1f; 解决方式&#xff1a; 2.三种加锁…
阅读更多...
项目实战：构建 effet.js 人脸识别交互系统的实战之路

项目实战：构建 effet.js 人脸识别交互系统的实战之路

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀构建 effet.js &#x1f4d2;1. 什么是effet.js&#x1f4dc;2. 为什么需要使用effet.js&#x1f4dd;3. effet.js的功能&#x1f4da;4. 使用…
阅读更多...
HarmonyOS NEXT 应用开发实战(五、页面的生命周期及使用介绍）

HarmonyOS NEXT 应用开发实战(五、页面的生命周期及使用介绍）

HarmonyOS NEXT是华为推出的最新操作系统&#xff0c;arkUI是其提供的用户界面框架。arkUI的页面生命周期管理对于开发者来说非常重要&#xff0c;因为它涉及到页面的创建、显示、隐藏、销毁等各个阶段。以下是arkUI页面生命周期的介绍及使用举例。 页面的生命周期的作用 页面…
阅读更多...
聊聊Go语言的异常处理机制

聊聊Go语言的异常处理机制

背景 最近因为遇到了一个panic问题&#xff0c;加上之前零零散散看了些关于程序异常处理相关的东西&#xff0c;对这块有点兴趣&#xff0c;于是整理了一下golang对于异常处理的机制。 名词介绍 Painc golang的内置方法&#xff0c;能够改变程序的控制流。 当函数调用了pan…
阅读更多...
T113 内核中 adbd相关配置1

T113 内核中 adbd相关配置1

准备工作 1. 配置 系统&#xff1a;ubuntu24.04docker&#xff08;ubuntu18.04&#xff09; 软件vscode, sdk:Tina-linux&#xff08;BingPi-M2&#xff09; 2. 构建环境直接使用自带的 source ./build/envsetup.sh lunch 选择 6 编译开启16线程 make -j16boot编译 mboot 打包…
阅读更多...
设计模式——装饰者模式（8）

设计模式——装饰者模式（8）

一、定义 指在不改变现有对象结构的情况下&#xff0c;动态地给该对象增加一些职责&#xff08;即增加其额外功能&#xff09;的模式。我们先来看一个快餐店的例子。快餐店有炒面、炒饭这些快餐&#xff0c;可以额外附加鸡蛋、火腿、培根这些配菜&#xff0c;当然加配菜需要额…
阅读更多...
【网络安全】简单P1：通过开发者工具解锁专业版和企业版功能

【网络安全】简单P1：通过开发者工具解锁专业版和企业版功能

未经许可，不得转载。 文章目录 前言发现过程前言 在探索一个SaaS平台的过程中，我发现了一个漏洞，使得我能够在无需订阅的情况下解锁高级（专业/企业）功能。 发现过程 我使用一个没有任何高级功能的基本用户账户进行常规登录。在浏览平台时，我注意到某些按钮和功能上带有…
阅读更多...
基于微信小程序的购物系统【附源码、文档】

基于微信小程序的购物系统【附源码、文档】

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…
阅读更多...
web前端--html 5---qq注册

web前端--html 5---qq注册

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>qq注册</title> <link rel"impo…
阅读更多...
[Linux#66][TCP-＞IP] 面向字节流 | TCP异常 | filesocket | 网络层IP

[Linux#66][TCP-＞IP] 面向字节流 | TCP异常 | filesocket | 网络层IP

目录 1. 面向字节流 思考&#xff1a;对于UDP协议来说&#xff0c;是否也存在“粘包问题”呢&#xff1f; 2.TCP 异常情况 3.知识 1.UDP实现可靠传输(经典面试题) 2. 网络抓包 | 爬虫 3.打通文件和 socket 的关系 4.网络层&#xff1a;IP 前置知识 1. 面向字节流 udp…
阅读更多...
java逻辑运算符 C语言结构体定义

java逻辑运算符 C语言结构体定义

1. public static void main(String[] args) {System.out.println(true&true);//&两者均为true才trueSystem.out.println(false|false);// | 两边都是false才是falseSystem.out.println(true^false);//^ 相同为false&#xff0c;不同为trueSystem.out.println(!false)…
阅读更多...
git 安装

git 安装

文章目录 一、ubuntu 安装 git二、centos 安装 git三、检查安装 git 一、ubuntu 安装 git sudo apt-get install get -y二、centos 安装 git sudo s install git -y三、检查安装 git git --version出现此标志git版本号&#xff0c;表示git安装完成。
阅读更多...
《Effective C++》 笔记

《Effective C++》 笔记

让自己习惯C&#xff0c;Accustoming Yourself to C 1. 视C为一个语言联邦&#xff0c;View Cas a federation of languages. 将 C视为一个由相关语言组成的联邦而非单一语言。在其某个次语言&#xff08;sublanguage&#xff09;中&#xff0c;各种守则与通例都倾向简单、直观…
阅读更多...
【win11】终端/命令提示符/powershell美化

【win11】终端/命令提示符/powershell美化

文章目录 1.设置字体1.1. 打开win11的终端/命令提示符/powershell其中之一1.2. 打开终端设置&#xff0c;修改所有终端默认字体为新宋体 2. 修改powershell背景色为蓝色 win11的默认终端/命令提示符/powershell主题风格让人感觉与win10撕裂太大&#xff0c;尤其是字体、背景色&…
阅读更多...
Excel：vba实现筛选出有批注的单元格

Excel：vba实现筛选出有批注的单元格

实现的效果&#xff1a;代码&#xff1a; Sub test() Dim cell As RangeRange("F3:I10000").ClearlastRow Cells(Rows.Count, "f").End(xlUp).Row MsgBox lastrow For Each cell In Range("a1:a21")If Not cell.Comment Is Nothing ThenMsgBox…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023