Vue 组件和文件及文件夹命名规范、SPA、创建路由、router-link 相关属性、路由建立多视图单页应用

目录

一.vue组件(重点)

1.1 组件介绍

1.2 局部组件

1.3 全局组件

二.自定义事件

2.1 子 -> 父

2.2 父 -> 子

 三.vue中文件及文件夹命名规范

四.SPA

4.1 SPA简介

4.2 SPA技术点

五.使用路由建立多视图单页应用

5.1 引入依赖库

5.2 创建自定义组件

六.创建路由

 6.1 什么是路由

6.2 定义路由

6.3 创建和挂载根实例

6.4 使用RouterLink和RouterView组件导航与显示

七.router-link相关属性

7.1 to

7.2 replace

7.3 append

7.4 tag

7.5 active-class

7.6 exact-active-class

7.7 event


一.vue组件(重点)

1.1 组件介绍

  • 组件(Component)是Vue最强大的功能之一,
  • 组件可以扩展HTML元素,封装可重用的代码
  • 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
  • 组件可以分为全局组件和局部组件

组件命名规则

  • 短横线命名,如: my-component,vue推荐使用这种方式的命名规则
  • 首字母大写命名规则,如:MyComponent

props

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

1.2 局部组件

定义语法:new Vue({el:'#d1',components:{组件名:{配置选项}}})

<div id="app"><div><!--title是用来传值的自定义属性,在自定义组件的props中定义 --><button-counter title="测试"/></div>
</div>
var vm = new Vue({el: '#app',data: {ts: new Date().getTime()},//局部自定义组件components: {//组件名: {配置项}'button-counter':  {//用来传值的自定义属性props:['title'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{title}}:局部组件,点击计数器:{{count}}</button>',//注意:在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明//的vue实例.this.count++;}}}}
});

注:为什么在自定义组件中必须使用函数方式来什么data?
每个自定义组件使用函数方式来声明data,这样每个实例可以维护一份被返回对象的独立的拷贝,在定义自定义组件时,一定要注意这一点。

1.3 全局组件

将上面的局部组件修改为全局组件。
全局组件定义语法:Vue.component(组件名, 配置选项)

<div id="app"><div><button-counter title="测试"/></div>
</div>
//全局组件
Vue.component('button-counter', {//用来传值的自定义属性props:['title'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{title}}: 全局组件,点击计数器:{{count}}</button>',//注意:在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明//的vue实例.this.count++;}}
});var vm = new Vue({el: '#app',data: {ts: new Date().getTime()}
});

二.自定义事件

Vue自定义事件是为组件间通信设计, vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定

  • 父Vue实例->子Vue实例,通过prop传递数据
  • 子Vue实例->父Vue实例,通过事件传递数据

2.1 子 -> 父

触发事件:$emit(eventName, 参数...)
注意:事件名必须用短横线命名方式。

<div id="app"><!--子组件到父组件--><div><button-counter v-on:click-test="clickTest"/></div>
</div>
var vm = new Vue({el: '#app',data: {ts: new Date().getTime()},//对于自定义的button-counter组件, Vue实例为父组件//在父组件中定义一个test方法,子组件调用该方法methods: {clickTest: function(msg) {console.log("test: "+ msg);}},//局部自定义组件components: {//组件名: {配置项}'button-counter':  {//用来传值的自定义属性props:['title'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{title}}:局部组件,计数:{{count}}</button>',//注意:在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.//注意事件名使用短横线命名方式this.$emit("click-test","hello vue");}}}}
});

2.2 父 -> 子

注意:props定义属性时采用的是驼峰命名法,而在html中使用时需要对应的变为短横线命名法!!

<div id="app"><!--子组件到父组件--><div><!-- 注意此处将定义props时的驼峰命名法,变为了短横线命名法 !!! --><button-counter title-desc="测试" /></div>
</div>
var vm = new Vue({el: '#app',data: {ts: new Date().getTime()},//对于自定义的button-counter组件, Vue实例为父组件//在父组件中定义一个test方法,子组件调用该方法methods: {clickTest: function(msg) {console.log("test: "+ msg);}},//局部自定义组件components: {//组件名: {配置项}'button-counter':  {//用来传值的自定义属性//注意此处使用驼峰命名法 !!!props:['titleDesc'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{titleDesc}}:局部组件,计数:{{count}}</button>',//注意:在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.//注意事件名使用短横线命名方式this.count ++;console.log(this.titleDesc);}}}}
});

 三.vue中文件及文件夹命名规范

  1. 命名法
    驼峰式命名法(camelCase)
    短横线命名(kebab-case)全小写
    帕斯卡命名法(PascalCase)

  2. 文件夹命名
    kebab-case
    尽量使用名词,尽量使用一个单词

  3. *.js文件命名规范
    3.1 所有模块的主文件index.js全小写
    3.2 属于组件的.js文件,使用PascalBase风格
    3.3 其他类型的.js文件,使用kebab-case风格

  4. *.vue文件命名规范
    除index.vue之外,其他.vue文件统一用PascalBase风格

  5. *.less文件命名规范
    统一使用kebab-case命名风格

前三点比较重要,需要记住

附录一:.less为后缀的文件是什么
1、less是什么:LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),
运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。
2、为什么有less:CSS 是一门非程序式语言,CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用
3、less最最最最最最简单实例:使用@符号来定义变量

四.SPA

4.1 SPA简介

单页Web应用(single page application,SPA),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序

  • 单页面应用程序:
    只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

  • 传统多页面应用程序:
    对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

  • 优势
    减少了请求体积,加快页面响应速度,降低了对服务器的压力
    更好的用户体验,让用户在web app感受native app的流畅

4.2 SPA技术点

  • ajax
  • 锚点的使用(window.location.hash #)(页面内定位的技术)
  • hashchange 事件 window.addEventListener("hashchange",function () {})
    hashchange事件是html5新增的api,用来监听浏览器链接的hash值变化。当URL的片段标识符更改时,将触发hashchange事件

五.使用路由建立多视图单页应用

5.1 引入依赖库

建立一个基本html项目,创建一个demo页面并引入一下js库文件

  • <script src="js/vue.js"></script>
  • <script src="js/vue-router.min.js"></script>

5.2 创建自定义组件

创建vue组件有两种方式:

  • var MyComonent = Vue.component("button-counter", {...});
    创建一个vue组件并赋给MyComponent变量
  • const Home = Vue.extend({});
    extend是构造一个组件的语法器. 你给它参数,他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里,也可以在任意vue模板里使用

相关知识点:
js中const,var,let区别?分别写一个例子

创建一个Home组件和About组件

//组件名用PPascalCase风格
const Home = Vue.extend({//必须定义一个根元素作为容器,包裹模板中的内容元素template: '<div><h1>Home组件</h1><div>Home组件内容区</div></div>'
});const About = Vue.extend({//必须定义一个根元素作为容器,包裹模板中的内容元素template: '<div><h1>About组件</h1><div>About组件内容区</div></div>'
});

六.创建路由

 6.1 什么是路由

vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,实际上就是组件的切换。
路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。

route和router的区别

  • route:路线
  • router:路由器
  • 路由器中包含了多个路线

6.2 定义路由

//定义路由,"/"代表根路径,路由中可以使用name属性,一遍情况不建议使用
var routes = [{path: '/home',component: Home},{path: '/about',component: About}
];//创建路由器实例
const router = new VueRouter({routes: routes
});

6.3 创建和挂载根实例

使用路由后,Vue实例的创建于以前会有一定的区别,原来使用el属性指定边界,使用路由后需要使用Vue实例$mount方法挂载根实例

//创建和挂载根实例
var vm = new Vue({//el: '#app',//将路由放入vue实例router: router,data: {ts: new Date().getTime()}
}).$mount("#app");

6.4 使用RouterLink和RouterView组件导航与显示

<div><router-link to="/home">go to Home</router-link><router-link to="/about">go to aboue</router-link>
</div>
<div><router-view></router-view>
</div>

<router-view></router-view>路由内容显示区域。

七.router-link相关属性

7.1 to

表示目标路由的链接
<router-link to="/home">Home</router-link><!-- 字符串-->
<router-link v-bind:to="'home'">Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->
上面的示例已经使用,to既可以使用字符串,也可以使用js表达式

7.2 replace

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。
样例:

<router-link :to="{ path: '/home'}" replace></router-link>

如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。

vue中导航中的后退-前进-编程式导航

  • this.$router.go(-1) :代表着后退
  • this.$router.go(1):代表着前进
  • 切换到path为/home的路由
this.$router.push({    path:'/home'
});
//或者使用path,推荐path
this.$router.push({    path:'/home'
});

示例一:编程式前进后退按键
1)在页面上加入前进和后退按钮,

<p><button @click="previous">前进</button><button @click="next">后退</button>
</p

2)添加事件处理程序

methods: {//前进previous: function() {this.$router.go(1);},//后退next: function() {this.$router.go(-1);}
}

vue的 $
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开

示例二:切换到指定路由
添加一个“回家”按钮。

<button @click="gotohome">回家</button>
gotohome: function() {console.log("go to home");this.$router.push({path: '/home'});
}

示例三,设置默认显示的组件
这个很简单,只要将需要默认显示的组件对应的路由的path设置为"/"即可

//定义路由表
var routes = [//默认显示home{path:'/', component:Home}, {path:'/home', component:Home},{path:'/about', component:About}
];

示例四:
如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。
例如: 将

<router-link to="/home">Home</router-link>

加入replace属性,修改为:

<router-link to="/home" replace>Home</router-link>

通过测试可以看到,点击home后,history记录被清空。所以一般不用。

7.3 append

设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b (路径追加)

<router-link :to="{ path: 'relative/path'}" append></router-link>

7.4 tag

<router-link>默认渲染为<a>标签,有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。(如果不指定tag,默认渲染为a标签)

<router-link to="/foo" tag="li">foo</router-link>

<!-- 渲染结果 -->
<li>foo</li>

7.5 active-class

设置链接激活时使用的 CSS 类名

7.6 exact-active-class

配置当链接被精确匹配的时候应该激活的class

7.7 event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

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

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

相关文章

算法进修Day-33

算法进修Day-33 65. 有效数字 难度&#xff1a;困难 题目要求 有效数字&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 一个 小数 或者 整数&#xff08;可选&#xff09;一个 e 或 E &#xff0c;后面跟着一个 整数 小数&#xff08;按顺序&#xff09;…

什么是USRP软件无线电设备?

什么是USRP软件无线电设备&#xff1f; USRP软件无线电设备提供软件定义的RF架构&#xff0c;可让工程师使用自定义信号处理功能来设计、原型验证和部署无线系统。从基于大型开放式FPGA的经济款到高性能无线电设备&#xff0c;多种硬件可满足您的不同需求。您可以使用LabVIEW或…

施密特正交化

相信大家在平时的期末考试中一定少不了对某某向量组执行标准正交化类型的题目。今天我们从这个题目入手&#xff0c;说明这个如何执行施密特正交化&#xff0c;以及为什么要进行正交化。 一、例子 例子&#xff1a;设 a 1 [ 1 2 − 1 ] a_1\begin{bmatrix}1\\2\\-1\end{bmat…

Node-创建Web应用

题记 node创建web应用&#xff0c;以下是所有流程和代码 与php比较&#xff1a;使用 PHP 来编写后端的代码&#xff0c;需要 Apache 或者 Nginx 的 HTTP 服务器&#xff0c;并配上 mod_php5 模块和 php-cgi。 Node应用的组成 node应用由三部分组成&#xff1a; require 指令&a…

vulkan SDK安装

文章目录 一. vulcan官网二.安装流程 一. vulcan官网 https://vulkan.lunarg.com/sdk/home#windows 二.安装流程 点击下载 双击下载的*.exe进行安装 点击下一步 点击下一步 选择安装位置&#xff0c;点击下一步 点击全选&#xff0c;选择下一步 勾选同意&#xf…

PTrade财务数据获取函数的问题

前文介绍了PTrade的get_fundamentals函数&#xff0c;可以用于获取股票的财务数据。但在实际应用中&#xff0c;会遇到如下的问题。 前文我们通过将回测时间设置为2023-05-05进行回测调用get_fundamentals&#xff0c;得到如下查询结果&#xff1a; secu_codepubl_dateend_da…

红队专题-从零开始VC++C/S远程控制软件RAT-MFC-[5]客户端与服务端连接

红队专题 招募六边形战士队员端操作系统SystemInfo类获取系统信息发送系统信息头文件声明头文件调用 未找到来自 OleAcc.dll 的导入LINK 招募六边形战士队员 一起学习 代码审计、安全开发、web攻防、逆向等。。。 私信联系 端 发送连接->进入主线程->返回socket->…

ps插件Coolorus for Mac中文激活版

Coolorus是一款非常实用的Photoshop插件&#xff0c;它为Photoshop增加了色环配色面板&#xff0c;让设计师可以更直观地选择颜色。同时&#xff0c;Coolorus还提供了多种专业配色方案&#xff0c;如鲜艳色、复古色、日常色等&#xff0c;设计师可以直接套用这些方案&#xff0…

Python中的内存管理:深入分析垃圾回收机制

python中有一个名为refchian的环状双向链表&#xff0c;python运行时创建的所有对象都会添加到refchain中。在refchain中的对象PyObject里都有一个ob_refcnt用来保存当前对象的引用计数器&#xff0c;就是该对象被引用的次数&#xff0c;当对象有新引用时ob_refcnt就会增加&…

SDK 窗口程序创建

目录 Windows 窗口 窗口的基本概念 创建一个窗口的流程 句柄 创建窗口 设计注册窗口类 创建窗口 显示和更新窗口 创建消息循环 消息循环 建立消息循环 窗口过程函数 窗口程序模板&#xff08;多字节&#xff09; 窗口程序模板&#xff08;Unicode&#xff09; Wi…

创新融合,开启电商行业新篇章

随着互联网科技的飞速发展&#xff0c;电商行业正在不断创新和进步。广告电商模式作为一种独特的商业模式&#xff0c;成功地将广告和电商相结合&#xff0c;实现了三方共赢的局面&#xff0c;为行业带来了新的发展方向。一、广告电商模式的定义广告电商模式是一种将广告与电子…

零基础学习HTML5(列表、表格、表单)

01-列表 作用&#xff1a;布局内容排列整齐的区域。 列表分类&#xff1a;无序列表、有序列表、定义列表。 无序列表 作用&#xff1a;布局排列整齐的不需要规定顺序的区域。 标签&#xff1a;ul 嵌套 li&#xff0c;ul 是无序列表&#xff0c;li 是列表条目。 <ul>…

【RTOS学习】信号量 | 互斥量 | 递归锁

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 信号量 | 互斥量 | 递归锁 &#x1f37a;信号量&#x1f964;原理&#x1f964;使用信号量的函数&…

基于springboot实现java学习平台项目【项目源码+论文说明】

基于springboot实现java学习平台演示 摘要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括学习平台的网络应用&#xff0c;在外国学习平台已经是很普遍的方式&#xff0c;不过国内的管理平台可能还处于起步阶段。学习平台具…

使用 Typhoeus 和 Ruby 编写的爬虫程序

以下是一个使用 Typhoeus 和 Ruby 编写的爬虫程序&#xff0c;用于爬取 &#xff0c;同时使用了 jshk.com.cn/get_proxy 这段代码获取代理&#xff1a; #!/usr/bin/env rubyrequire typhoeus require jsondef get_proxyurl "https://www.duoip.cn/get_proxy"respon…

Android 13.0 开机动画支持mp4格式视频作为开机动画播放

1.概述 在13.0的系统产品开发中,在系统开机动画这块一般情况下都是播放开机图片,然后绘制多张开机图片形成开机动画模式,而产品需求要求支持开机mp4格式的短视频来作为开机动画播放视频来介绍产品情况,就需要用开机视频来替代开机动画来实现功能 2.开机动画支持mp4格式视频…

正则表达式[总结]

文章目录 1. 为什么要学习正则表达式2. 再提出几个问题&#xff1f;3. 解决之道-正则表达式4. 正则表达式基本介绍5. 正则表达式底层实现(重要)6. 正则表达式语法6.1 基本介绍6.2 元字符(Metacharacter)-转义号 \\\6.3 元字符-字符匹配符6.4 元字符-选择匹配符6.5 元字符-限定符…

寻找数组中最接近目标的数字

要寻找数组中最接近目标的数字&#xff0c;你可以使用一种称为线性搜索或二分搜索的方法&#xff0c;具体取决于数组是否已排序。以下是这两种方法的示例&#xff1a; 1. 线性搜索&#xff08;未排序数组&#xff09;&#xff1a; 如果数组未排序&#xff0c;你可以使用线性搜索…

vscode中4个json的区别和联系

在vscode中快捷键ctrlshiftp&#xff0c;然后输入setting&#xff0c;会出现下图几个选项 当不同设置之间出现冲突时&#xff0c;听谁的&#xff1a; Open Workspace Settings(JSON) > Open Settings(JSON) Open User Settings > Open Default Settings(JSON) Open Wo…

WPF实现签名拍照功能

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…