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. 职业规划与自我管理 结语 在科技日新月异的今天，程序员的竞争已经不再仅仅依赖于技术水平，而是…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...