Vue 组件+es6箭头函数+路由
一、组件
1、让网页或局部页实现复用，包括js（vue）功能
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展
2、基本语法（创建js文件）
//页面模板
var temp = `<template id="test"><div>页面内容</div></template>`
//创建一个组件
Vue.component("test",{template: temp, //el:'#app'data: function(){return { //model}
},
methods:{},//自定义属性,获取属性值---数组
props:['属性名1','属性名2']
})
3、例如登录功能
数据传递问题：
（1）当登陆成功：从当前页把数据传递给组件----用属性（父组件通过属性向子组件传参）
（2）组件执行完结果之后，再把数据回传回来（子组件通过按钮把数据回传给父组件）
使用组件：
（1）在父组件中引入子组件，导入js文件，并使用test标签
index.html（04vue）
<div id="app"><h2>组件</h2><test></test>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>（2）用自定义属性从父组件传递给子组件
父组件：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><h2>组件</h2>//利用子组件自定义属性传参<test msg="输入姓名"></test></div><script type="text/javascript" src="js/vue.min.js" charset="UTF-8"></script>//引入子组件.js<script type="text/javascript" src="js/test1.js" charset="UTF-8"></script><script type="text/javascript">var vm = new Vue({el:'#app',data:{}})</script></body>
</html>
子组件：
//创建页面模板
var temp = `<template id="test"><div>{{msg}}<input v-model="name" /><button type="button" @click='testres()'>测试</button></div></template>`
//创建组件
Vue.component("test",{template:temp,data:function(){return{//属性写namename: ''}},methods:{},//自定义属性props:['msg']
})（3）从子组件回传数据给父组件
基于事件监听---自定义事件(自定义命名)
父组件自定义事件及方法
父组件：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><h2>组件</h2><!-- 父组件自定义事件 @myevent=""相当于一个接收器 --><test msg="输入姓名" @myevent="acceptres"></test><hr ><!-- 子组件传过来的数据显示的位置 --><span>{{info}}</span></div><script type="text/javascript" src="js/vue.min.js" charset="UTF-8"></script><script type="text/javascript" src="js/test1.js" charset="UTF-8"></script><script type="text/javascript">var vm = new Vue({el:'#app',data:{info:''},methods:{//接收器acceptres(res){this.info=res}}})</script></body>
</html>
子组件：
//创建页面模板
var temp = `<template id="test"><div>{{msg}}<input v-model="name" /> <button type="button" @click='testres()'>测试</button></div></template>`
//创建组件
Vue.component("test",{template:temp,data:function(){return{//属性写namename: ''}},methods:{//给父组件回传消息 "父组件自定义的事件名" "回传信息"testres(){this.$emit('myevent',this.name)}},//自定义属性props:['msg']
})二、es6箭头函数
顶替了匿名函数，方便使用this
function(){ //使用this是指向当前这个类，就不能指向当前的vue了，所以使用vm参数
//代码
}
箭头函数--表达式
()=>{}
若只有一个参数，可以省略小括号
若只有一行代码，可以省略大括号和return
三、路由
1、路由技术的实现
路由---组件和路径的结合---相当于自定义的超链接
1.1创建route---路由（实现整个项目的导航）---对应一个路径--->组件
{path:'路径', component: 组件（完成页面的样式和功能）}
1.2创建路由数组routes----配置很多的路由
[{路由1},{路由2},{路由3}]
1.3创建router---路由器
<router-view>----加载路由[组件]的容器
<div id="app">
<a href="#/login">登录</a><a href="#/register">注册</a>
<router-view></router-view>
</div>
router-link---方式
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>1.4 路由传参
2.1query方式
to="/login?uid=101&upwd=101"
$route.query.xxx
2.2params方式
rest风格
{path:'/register/:uid/:upwd', component: register}
to="/login/101/admin"
$route.params.xxx
创建路由的过程：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="app"><router-link to="/reg?aid=101">注册</router-link><router-link to="/log/a107">登录</router-link><!-- 连接会加载到这里 --><router-view></router-view></div><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script><script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//创建组件/*{{$route.query.aid}}取出请求路径 数据传参（参数获取机制 */var reg = {template:`<h2>注册{{$route.query.aid}}<h2/>`}var log ={template:`<h2>登录{{$route.params.uid}}<h2/>`}//创建路由数组var routes= [{path:'/reg',component:reg}, //路由{path:'/log/:uid',component:log}]//创建路由器var router = new VueRouter({routes})//创建VUEvar vm = new Vue({el: '#app',router})</script></body>
</html>
相关文章：
Vue 组件+es6箭头函数+路由
一、组件 1、让网页或局部页实现复用，包括js（vue）功能 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， …...
Clickhouse学习笔记（5）—— ClickHouse 副本
Data Replication | ClickHouse Docs 副本的目的主要是保障数据的高可用性，即使一台 ClickHouse 节点宕机，那么也可以从其他服务器获得相同的数据 注意： clickhouse副本机制的实现要基于zookeeperclickhouse的副本机制只适用于MergeTree f…...
ELMo模型、word2vec、独热编码（one-hot编码）的优缺点进行对比
下面是对ELMo模型、word2vec和独热编码（one-hot编码）的优缺点进行对比： 独热编码（One-hot Encoding）： 优点： 简单，易于理解。适用于词汇表较小的场景。 缺点： 高维度…...
FFmpeg简介1
适逢FFmpeg6.1发布，准备深入学习下FFmpeg，将会写下系列学习记录。 在此列出主要学习资料，后续再不列，感谢这些大神的探路和分享，特别是雷神，致敬！ 《FFmpeg从入门到精通》 《深入理解FFmpeg》 …...
2352 智能社区医院管理系统JSP【程序源码+文档+调试运行】
摘要 本文介绍了一个智能社区医院管理系统的设计和实现。该系统包括管理员、护工和医生三种用户，具有社区资料管理、药品管理、挂号管理和系统管理等功能。通过数据库设计和界面设计，实现了用户友好的操作体验和数据管理。经过测试和优化，系…...
高教社杯数模竞赛特辑论文篇-2023年B题：多波束测线布设（附获奖论文及MATLAB代码实现）（续）
目录 5.3.3 模拟退火对测线布设仿真检验 5.3.4 开角、坡度的灵敏度分析...
【fast2021论文导读】 Learning Cache Replacement with Cacheus
文章：Learning Cache Replacement with Cacheus 导读摘要： 机器学习的最新进展为解决计算系统中的经典问题开辟了新的、有吸引力的方法。对于存储系统，缓存替换是一个这样的问题，因为它对性能有巨大的影响。 本文第一个贡献，确定了与缓存相关的特征，特别是，四种工作负载…...
在 React 中选择使用 JSX 或 JavaScript
在 React 中选择使用 JSX 或 JavaScript JSX vs. JavaScriptReact Component Lifecycle JSX 是 React 最常用的语法之一，它允许我们在 HTML 中嵌入 JavaScript 语句和表达式。但是，如果我们不需要 JSX 又该怎么办呢？让我们一起来了解一下 J…...
Halcon WPF 开发学习笔记(4)：Halcon 锚点坐标打印
文章目录 专栏前言锚点二次开发添加回调函数辅助Model类 下集预告 专栏 Halcon开发 博客专栏 WPF/HALCON机器视觉合集 前言 Halcon控件C#开发是我们必须掌握的，因为只是单纯的引用脚本灵活性过低，我们要拥有Halcon辅助开发的能力 锚点开发是我们常用的…...
【从0到1设计一个网关】性能优化---使用Disruptor提供缓冲区
文章目录 什么是缓冲区队列Disruptor高性能的原因Disruptor实战注：学习这篇文章之前推荐先对Disruptor的使用有了解，否则我的代码中即使有非常详细的注释你也并不能理解这些注释的作用，以及为什么我要需要这样子编写代码。 同时，这将会是网关系列最后一篇文章，由于文章写的…...
Redis 特殊数据类型
目录 1、redis地理空间(GEO) 2、redis基数统计(HyperLogLog) 3、redis位图(bitmap) 4、redis位域bitfield) 5、redis流(Stream) 1、redis地理空间(GEO) Redis 的地理空间数据结构（GEO）可以用于存储地理位置信息，并支持附近位置搜索等功能…...
【Windows网络编程】二.TCP套接字编程与主机上线实验
API： socket： 套接字函数创建绑定到特定传输服务提供程序的套接字。 函数原型：SOCKET WSAAPI socket([in] int af,[in] int type,[in] int protocol );参数： af：地址规范系列： AF_INET：IPv4&…...
Qt 事件循环
引出 UI程序之所叫UI程序，是因为需要与用户有交互，用户交互一般是通过鼠标键盘等的输入设备，那UI程序就需要有能随时响应用户交互的能力。 一个C程序的main函数大概是下面这样： int main() {...return 0; } 我们如何使程序能随…...
【趣味随笔】YOLO的“进化史”极简版（YOLO v1--＞YOLOP）
📢：如果你也对机器人、人工智能感兴趣，看来我们志同道合✨ 📢：不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢：文章若有幸对你有帮助，可点赞 👍…...
Leetcode421. 数组中两个数的最大异或值
Every day a Leetcode 题目来源：421. 数组中两个数的最大异或值 解法1：贪心 位运算 初始化答案 ans 0。从最高位 high_bit 开始枚举 i，也就是 max(nums) 的二进制长度减一。设 newAns ans 2i，看能否从数组 nums 中选两个…...
SPRINGBOOT整合CXF发布WEB SERVICE和客户端调用（用户和密码验证）
主要分为客户端和服务端 服务端 pom配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.3</version><relativePath/> <!-- lookup parent fro…...
代码随想录训练营Day5:哈希数组
算是哈希的容器：数组（适合连续存放）；set，map（适合无序存放）。所以数组操作就是hash[i];而set,map.insert(元素)，map可以map[]是因为map存放了键值对可以索引查找。关于几个数组相加等…...
腾讯云3年轻量2核2G4M和2核4G5M服务器540元三年
腾讯云轻量应用服务器特价是有新用户限制的，所以阿腾云建议大家选择3年期轻量应用服务器，一劳永逸，免去续费困扰。腾讯云轻量应用服务器3年可以选择2核2G4M和2核4G5M带宽，3年轻量2核2G4M服务器540元，2核4G5M轻量应用服…...
程序员的护城河：职业发展的关键元素
目录 1. 技术深度与广度 2. 项目经验与实际操作 3. 沟通与团队协作 4. 持续学习与自我更新 5. 社区参与与开源贡献 6. 创新思维与解决问题的能力 7. 职业规划与自我管理 结语 在科技日新月异的今天，程序员的竞争已经不再仅仅依赖于技术水平，而是…...
掌握CarouselLayoutManager水平与垂直布局：终极技巧
掌握CarouselLayoutManager水平与垂直布局：终极技巧 【免费下载链接】CarouselLayoutManager Android Carousel LayoutManager for RecyclerView 项目地址: https://gitcode.com/gh_mirrors/ca/CarouselLayoutManager CarouselLayoutManager是一款专为Androi…...
Java 微服务弹性模式：构建高可用分布式系统
Java 微服务弹性模式：构建高可用分布式系统今天我们来聊聊 Java 微服务中的弹性模式，这是构建高可用分布式系统的核心能力。一、为什么需要弹性模式 在分布式系统中，故障是不可避免的。网络延迟、服务宕机、资源耗尽等问题随时可能发生。如果…...
文脉定序系统Docker容器化部署与ComfyUI工作流集成
文脉定序系统Docker容器化部署与ComfyUI工作流集成 你是不是也遇到过这样的烦恼？手里有一堆文本素材，比如产品描述、用户评论或者文章草稿，想要把它们按照某种逻辑重新排列，让内容读起来更通顺、更有条理。手动整理吧，…...
问题解决策略基础算法实现训练1
问题 A： C 语言习题 字符串排序 [提交] [状态]题目描述 输入nnn个字符串，将它们按字母由小到大的顺序排列并输出。编写三个函数实现， 用于输出inputnnn个字符串， 用于排序sortstrnnn个字符串， 用于输出outputnnn个字符…...
OpenClaw截图分析功能：Qwen3.5-9B多模态界面理解案例
OpenClaw截图分析功能：Qwen3.5-9B多模态界面理解案例 1. 为什么需要截图分析功能 在日常工作中，我经常遇到需要分析软件界面、排查异常或生成报告的场景。传统方式要么依赖人工截图标注，要么需要开发专门的自动化脚本，效率低下且…...
自动送料机构的设计
自动送料机构是现代工业中提升效率的关键部件，其核心作用在于通过机械结构实现物料的精准、连续输送，替代人工操作带来的效率波动与误差风险。无论是金属零件、塑料制品还是粉末状原料，该机构均能根据工艺需求调整输送节奏，确保物…...
Synopsys Multivoltage Flow User Guide（汉化笔记）
1 Low-Power Design Strategies 1.1 Increasing Challenges of Power 早期的IC设计中EDA工具更多的优化方向是性能和面积，功耗考虑的比较少，但是，现在的设计CMOS器件密度和时钟频率都在提升，功耗重要性也更加明显，供电电压和晶体管阈值电压也在降低，漏电电流也成为无法忽…...
Reportr部署实战：如何在Heroku和自有服务器上快速搭建个人数据仪表板
Reportr部署实战：如何在Heroku和自有服务器上快速搭建个人数据仪表板 【免费下载链接】dashboard Your lifes personal dashboard. 项目地址: https://gitcode.com/gh_mirrors/das/dashboard Reportr是一个功能强大的开源个人数据仪表板应用，能够…...
OpenClaw安全方案：Qwen3.5-9B本地化处理敏感图片数据
OpenClaw安全方案：Qwen3.5-9B本地化处理敏感图片数据 1. 为什么需要本地化处理敏感图片 去年我接手了一个财务单据自动归档项目，最初尝试使用某知名云OCR服务。当我把包含客户身份证号的发票扫描件上传到云端时，突然意识到一个严重问题&…...
OpenClaw+千问3.5-9B智能家居：自然语言控制家庭设备
OpenClaw千问3.5-9B智能家居：自然语言控制家庭设备 1. 为什么需要自然语言控制智能家居？ 去年装修新房时，我装了整整27个智能设备——从客厅的吸顶灯到厨房的窗帘电机，甚至马桶盖都接入了米家系统。但很快发现一个问题ÿ…...