• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

template标签的作用

模板本身没有什么特殊的意义。可以了解一下html的模板标签。

以及其他人在官网描述的“根元素”,是指模板标签下的元素,排除而非模板本身。一个模板只能有一个根元素。

HTML元素是一种保存客户端内容的机制,它不会在页面加载时呈现,但可以在运行时使用JavaScript实例化。

您可以将模板视为存储在文档中供以后使用的一段内容。虽然,在加载页面的同时,解析器确实处理了模板元素的内容,这只是确保这些内容是有效的;但是,不会呈现元素的内容。

vue-router 基本使用

路由,其实就是指点。当我单击页面上的主页按钮时,主页的内容将显示在页面中。如果我点击页面上的about按钮,那么about的内容就会显示在页面中(home按钮=home内容,about按钮=about内容)。也可以说是一种映射。所以页面上有两个部分,一个是点击部分,一个是点击后显示内容的部分。

点击后,如何做正确的对应?例如,当我单击home按钮时,home的内容可以显示在页面上。有必要在js文件中配置路由。

路由中有三个基本概念:路由、路由、路由器。

1.route,也就是一条路线,从这个英文单词也能看出来。是单数,Home button=home content,是一条路线,about button=about content,是另一条路线。

2.路由是一组路由。将上述每条路线组合成一个数组。[{主页按钮=主页内容},{关于按钮=关于内容}]

3.路由器是一种机制,相当于管理器,管理路由。因为routes只定义了一组路由,它停留在哪里不动呢?请求来了怎么办?用户点击home键该怎么办?这时,路由器工作了。它会转到routes来查找相应的主页内容,因此主页内容会显示在页面中。

4.客户端中的路由实际上是dom元素的显示和隐藏。当主页内容显示在页面上时,“关于”中的所有内容都是隐藏的,反之亦然。实现客户端路由有两种方式:基于hash和基于html5 history api。

vue-router中的路由也是基于上面的内容来实现的

在vue中实现路由相对简单。因为我们页面中的所有内容都是组件化的,所以我们只需要将路径对应到组件,然后在页面中呈现组件。

1.页面实现(在html模板中)

在vue-router中,我们看到它定义了两个标签router-link和router-view,分别对应于点击和显示部分。

Router-link定义页面的点击部分,router-view定义显示部分,即点击后显示区域内容的位置。

所以router-link还有一个很重要的属性to,定义了点击后去哪里,比如router-link to='/home ' home/router-link。

2.在js中配置路由

首先定义路线,实施路线。它是一个对象,由两部分组成:路径和组件。Path指路径,component指组件。例如{path:'/home ',component3360 home}

你可以把router-view想象成一个容器,它呈现的组件是你用vue-router指定的。

假设我们有以下应用程序:

div id='应用程序'

路由器视图/路由器视图

/div

路由器视图是顶级外部链。它将呈现一个与顶级路由匹配的组件。

作为来自'的导入路由器。main.js中的' router '语句将默认连接到router文件夹中的index.js文件,或者如上所述连接到router.js中的index . js文件。

export ,export default 和 import 区别 以及用法export与import

ES6模块有两个主要功能:导出和导入。

导出是导出该模块变量的接口(一个文件可以理解为一个模块)。

导入用于在一个模块中加载另一个具有导出接口的模块。

也就是说用ex

port命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。

export与export default
1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3、在一个文件或模块中,export、import可以有多个,export default仅有一个
4、通过export方式导出,在导入时要加{ },export default则不需要
这样来说其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

name 在 export default {} 中的作用:
1、name: ‘app’ 相当于一个全局 ID;
2、可以不写;
3、写了可以提供更好的调试信息(官方文档有)。
4、可以理解为是导出的途径。用import App from './App'


router.js基本创建过程
引入 vue-router

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

关于path的定义
入口的页面可以设置path的时候设置为"/"
定义的path和name的区别
path:是路径,还可以有二级路径比如 path: ‘/system/setting’。
name:是名字,就相当于给你的这个 path 起个名字方便记住,也可以不设置 name。
定义 component 指定变量


在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验。
而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。

vue懒加载
定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。
使用方法:

component:resolve => require(['@/pages/About'],resolve)

按需加载会在页面第一次请求的时候,把相关路由组件块的js添加上。
非按需加载(预加载)则会把所有的路由组件块的js包打在一起。
当业务包很大的时候建议用路由的按需加载(懒加载)。

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now