前端:Vue.js学习
前端:Vue.js学习
- 1. 第一个Vue程序
- 2. Vue指令
- 2.1 v-if、v-else-if、v-else
- 2.2 v-for
- 2.3 事件绑定 v-on:
- 2.4 v-model 数据双向绑定
- 2.5 v-bind 绑定属性
- 3. Vue组件
- 4. Vue axios异步通信
- 5. 计算属性
- 6. 插槽 slots
- 7. 自定义事件内容分发
1. 第一个Vue程序
首先把vue.js拷贝到本地，下载链接位：vue.js
参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app">{{message}}</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el:'#app',data:{message:"hello world!"}});
</script>
</html>
运行结果：
其中对象obj属性el表示绑定标签元素，属性data表示数据。支持双向绑定(即当数据发生变化时，视图也会发生变化，当视图发生变化时，数据也会跟着同步变化)，简而言之就是在前端界面上，打开控制台，执行代码obj.message=‘其他’,执行完成这句代码之后，可以发现界面上显示为其他。
2. Vue指令
以v-开头的表示它是Vue提供的特殊特性，如v-bind、v-if、v-else等。
2.1 v-if、v-else-if、v-else
参考示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><div v-if="num == 1">1</div><div v-else-if="num == 2">2</div><div v-else>其他数字</div></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el:'#app',data:{num:1}});
</script>
</html>
上述指令用于判断展示哪个标签元素。如，在一个登录界面上，有多种登录方式，同时对应着多个不同的输入框布局，通过上述指令结合使用，可以轻轻松松实现所想要的效果。
2.2 v-for
用于循环遍历Vue绑定的标签元素中的数据，参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><ul><li v-for="item in items">{{item}}</li><!-- <li v-for="(item,index) in items">{{item}},{{index}}</li> --></ul></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el:'#app',data:{num:1,items:[1,2,3,4,5]}});
</script>
</html>
运行结果：
2.3 事件绑定 v-on:
用于绑定事件，如点击一个按钮，弹出一个提示框，如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><button v-on:click="fun1">点击我</button></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data: {message: "hello world!"},methods: {fun1:()=>{// alert(this.message);alert(obj.message);}}});
</script>
</html>
运行结果：
为了简化操作，可以简写为@绑定的事件，如v-on:click简写为@click。
2.4 v-model 数据双向绑定
示例为一个输入框，在输入框中输入内容，在另一个标签元素内的文本内容会随着输入的内容而变化。参考示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data: {message: "hello world!"}});
</script>
</html>
运行结果：
另一个示例，下拉框双向绑定，参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><select v-model="message"><option value="1" checked>1</option><option value="2">2</option><option value="3">3</option></select>{{message}}</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data: {message: "1"}});
</script>
</html>
运行结果：
2.5 v-bind 绑定属性
学过springboot themlefy模板的读者应该了解这个th:href、th:value、th:src，v-bind也就和上述那些实现的效果一样，v-bind:href对应于th:href，为了简化操作，可以直接写成 :href。
3. Vue组件
为了复用(重复使用)，从某些方面说，也就是为了提升编写代码效率吧！比如导航栏，在很多界面上都需要，可以单独把这部分写到一个vue文件内，在其他哪些需要导航栏的html界面内，导入这个(组件)即可。(下述示例没有写vue文件)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><ul><liuze v-for="item in items" v-bind:v="item"></liuze></ul></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">Vue.component('liuze',{props:['v'],template: "<li>{{v}}</li>"});var obj = new Vue({el: '#app',data: {items: [1,2,3,4,5]}});
</script>
</html>
运行结果：
4. Vue axios异步通信
axios主要作用：实现ajax异步通信。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title><style>[v-clock]{display: none;}</style>
</head>
<body><div id="app" v-clock><div>{{info.code}}</div><ul><li v-for="item in info.data.list"><a v-bind:href="item.url">{{item.title}}</a></li></ul></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./axios.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data(){return {// 需要和json格式一致info:{code: null,data:{list: [{title: null,url: null}]}}}},mounted(){axios.get('https://blog.csdn.net/community/home-api/v1/get-business-list?page=1&size=20&businessType=blog&orderby=&noMore=false&year=&month=&username=qq_45404396').then((result) => {this.info = result.data;});}// 钩子函数});
</script>
</html>
运行结果：
5. 计算属性
计算属性突出在属性，首先它是一个属性，其次这个属性是有计算的能力，这里的计算指的是函数；简单的说，它就是一个能够将计算结果缓存起来的属性(将行为转换成静态的属性)，可以当作为缓存。不能methods里的方法名同名。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head><body><div id="app">currentTime: {{currentTime()}}<br> <!-- 方法 -->currentTime2: {{currentTime2}} <!-- 属性 --></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',methods:{currentTime:()=>{return new Date().getTime();}},// 计算属性computed:{// 里面写方法，是一个属性 // 不能methods里的方法名同名currentTime2:()=>{return new Date().getTime();}}});
</script></html>
运行结果：
6. 插槽 slots
关于组件如何接收模板内容，下述是官网关于这个知识点的介绍。
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head><body><div id="app"><liuze><liuze-title slot="liuze-title" v-bind:title="title"></liuze-title><liuze-items slot="liuze-items" v-for="item in items" v-bind:item="item"></liuze-items> </liuze></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">Vue.component('liuze',{template:`<div><slot name="liuze-title"></slot><ul><slot name='liuze-items'></slot> </ul> </div>`});Vue.component('liuze-title',{props:['title'],template:'<p>{{title}}</p>'});Vue.component('liuze-items',{props:['item'],template:'<li>{{item}}</li>'});var obj = new Vue({el: '#app',data:{title:"编程语言",items:['Java','Python','C','Go']}});
</script></html>
运行结果：
7. 自定义事件内容分发
现在相把上述编程语言进行删除操作，参考代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head><body><div id="app"><liuze><liuze-title slot="liuze-title" v-bind:title="title"></liuze-title><liuze-items slot="liuze-items" v-for="(item,index) in items" v-bind:item="item" :index="index" @remove="removeItem(index)"></liuze-items> </liuze></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">Vue.component('liuze',{template:`<div><slot name="liuze-title"></slot><ul><slot name='liuze-items'></slot> </ul> </div>`});Vue.component('liuze-title',{props:['title'],template:'<p>{{title}}</p>'});Vue.component('liuze-items',{props:['item','index'],template:'<li>{{item}} <button @click="remove">删除</button></li>',methods:{remove:function(index){this.$emit('remove',index);}}});var obj = new Vue({el: '#app',data:{title:"编程语言",items:['Java','Python','C','Go']},methods:{removeItem:function(index){this.items.splice(index, 1);}}});
</script></html>
运行结果：
相关文章：
前端:Vue.js学习
前端:Vue.js学习 1. 第一个Vue程序2. Vue指令2.1 v-if、v-else-if、v-else2.2 v-for2.3 事件绑定 v-on:2.4 v-model 数据双向绑定2.5 v-bind 绑定属性 3. Vue组件4. Vue axios异步通信5. 计算属性6. 插槽 slots7. 自定义事件内容分发 1. 第一个Vue程序 首先把vue.js拷贝到本地…...
MySQL到Oracle快速上手
第一次做Oracle项目的时候对一些语法区别不太清楚，这里列出一些开发中发现的与MYSQL不同的点 一个用户相当于一个数据库 表空间 表空间是用于存储表、索引和其他数据库对象的逻辑存储结构。每个表空间由一个或多个数据文件组成，这些文件可以位于不同的物…...
机器人CPP编程基础-01第一个程序Hello World
很多课程先讲C/C或者一些其他编程课，称之为基础课程。然后到本科高年级进行机器人专业课学习，这样时间损失非常大，效率非常低。 C/单片机/嵌入式/ROS等这些编程基础可以合并到一门课中进行实现，这些素材已经迭代三轮以上…...
前后端分离------后端创建笔记（03）前后端对接（下）
本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论，如有侵权请联系 源码：https://gitee.com/green_vegetables/x-admin-project.git 素材：https://pan.baidu.com/s/…...
Leet code1049 最后一块石头的重量II
1049 最后一块石头的重量II 【问题描述】 有一堆石头，用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合，从中选出任意两块石头，然后将它们一起粉碎。假设石头的重量分别为 x 和 y，且 x < y。那么粉…...
Rust语法:变量，函数，控制流，struct
文章目录 变量可变与不可变变量变量与常量变量的Shadowing标量类型整数 复合类型 函数控制流if elseloop & whilefor in structstruct的定义Tuple Structstruct的方法与函数 变量 可变与不可变变量 Rust中使用let来声明变量，但是let声明的是不可变变量&#x…...
LVS简介及LVS-DR搭建
目录 一. LVS简介： 1.简介 2. LVS工作模式： 3. LVS调度算法： 4. LVS-DR集群介绍： 二.LVS-DR搭建 1.RS配置 1）两台RS，需要下载好httpd软件并准备好配置文件 2）添加虚拟IP（vip&…...
Java基础篇--日期时间类
目录 前言 Instant（时间戳）类 LocalData(日期)类 LocalTime(时间)类 LocalDataTime(日期时间)类 Duration(时间间隔)类 Period(日期间隔)类 Clock（获取时区）类 前言 在开发中经常需要处理日期和时间，Java提供…...
Vue生命周期函数 详解
以下是Vue生命周期函数的流程图和每个周期的代码详解： 流程图： beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed详解： beforeCreate： 触发时…...
判断链表有环的证明
目录 1.问题 2.证明 3.代码实现 1.问题 给你一个链表的头节点 head ，判断链表中是否有环。 如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。 为了表示给定链表中的环，评测系统内部使用…...
百度屏蔽词有哪些？其中就有移民关键词指数被屏蔽？
我是百收网SEO，点点上面的头像，欢迎关注我哦！ 今日tombkeeper消息爆料：百度指数已经屏蔽“移民”等关键词指数。 大家好，我是百收网SEO商学院的狂潮微课老师，今天我们来讲解第 12 节课关键词优化难度分析…...
代码随想录day02
977.有序数组的平方 ● 力扣题目链接 ● 给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。 思路 ● 暴力排序，时间复杂度O(n nlogn) ● 使用双指针，时间复杂度O(n) …...
VR时代真的到来了？
业界对苹果的期待是，打造一台真正颠覆性的，给头显设备奠定发展逻辑底座的产品，而实际上，苹果只是发布了一台更强大的头显。 大众希望苹果回答的问题是“我为什么需要一台AR或者VR产品？”，但苹果回答的是“…...
docker run 命令转化为 docker-compose 工具
工作当中需要将 docker run 转换为更方便的 docker-compose 格式，可以使用下面的工具来完成。 转换工具：https://www.composerize.com/?utm_sourceappinn.com 使用介绍：https://www.appinn.com/composerize-for-docker-compose/...
php如何对接伪原创api
在了解伪原创api的各种应用形态之后，我们继续探讨智能写作背后的核心技术。需要说明的是，智能写作和自然语言生成、自然语言理解、知识图谱、多模算法等各类人工智能算法都有紧密的关联，在百度的智能写作实践中，常根据实际需求将多…...
设计模式行为型——模板模式
目录 模板模式的定义 模板模式的实现 模板模式角色 模板模式类图 模板模式举例 模板模式代码实现 模板模式的特点 优点 缺点 使用场景 注意事项 实际应用 模板模式的定义 模板模式（Template Pattern）属于行为型设计模式，又叫模版…...
12.Eclipse导入Javaweb项目
同事复制一份他的项目给我ekp.rar (懒得从SVN上拉取代码了)放在workspace1目录下 新建一个文件夹 workspace2，Eclipse切换到workspace2工作空间 选择Import导入 选择导入的项目(这里是放到workspace1里面) 拷贝一份到workspace2里面 例子 所有不是在自己电脑上开发…...
探索自动化网页交互的魔力：学习 Selenium 之旅【超详细】
"在当今数字化的世界中，网页自动化已经成为了不可或缺的技能。想象一下，您可以通过编写代码，让浏览器自动执行各种操作，从点击按钮到填写表单，从网页抓取数据到进行自动化测试。学习 Selenium，这一功能…...
css常用样式和不常用样式
文章目录 1、hover鼠标变小手2、ul去除点3、文字溢出显示省略号（1）一行文字溢出显示省略号（2）多行文字溢出显示省略号 4、文字单词超出（1）文字单词超出换行（word-wrap）（2…...
【小练习】交互式网格自定义增删改错误记录及解决（进行中）
经过之前的学习，已经能创建简单的交互式网格并设置自定义增删改按钮，但是实现上还是存在一些问题，来完善优化一下。 首先是修改，正常修改都会弹出修改框，里面是之前存储的信息，根据实际需要对其进行修改&a…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...