vue个人网站模板(vue搭建个人网站)

admin 47 2022-12-16

本文目录一览:

vue官网总结

Vue组件 本质上是一个有预定义选项的Vue实例,

指令 带有v- 前缀的特殊特性。作用是 当表达式的值改变时,将其长生的连带影响,响应式地作用于DOM

1 接收父组件传来的参数

组件标签中通过blog-post post-title="hello!"/blog-post 传入

2 子组件中js中的props:[postTitl]设置属性

3 可以设置数据类型

props:{

title:String,

likes:Number,

isPublished:Boolean,

commentIds:Array,

author:Object

}

4 接收动态赋值

5 传入一个对象的所有属性

6 prop 为单向数据流

所有的prop都是从父组件传到子组件,单向下行绑定,子组件不应该更改prop数据

允许更改的方法

7 替换合并

如果我们从父级组件传入的属性会替换掉子组件原本的属性但是如果是style class会合并起来

form-control,这是在组件的模板内设置好的

date-picker-theme-dark,这是从组件的父级传入的 他的class 为 form-control date-picker-theme-dark 两者合并

8 禁用特性继承

1 命名规则 事件命不会自动转化大小写。触发的事件命和监听的事件命必须一样

2 将原生事件绑定到组件上

在父组件中给子组件绑定一个原生的事件,就将子组件变成普通的HTML标签,不加".native"事件无法触发

3 $listeners

4 .sync修饰符

当一个子组件改变了一个prop中的值时。父组件中的值也改变

注意

有多个属性时当做对象传入

1 语法

2 编译作用域

3 具名插槽

4 作用域插槽

可以从子组件接收数据,并定义渲染的方式

使用is特性来切换组件

keep-alive 将元素动态组件包括起来,组件会被缓存

注意被包括的组件都有自己的名字,不论是name属性 还是局部/全局注册的

定义的时候什么都不做,只有在组件渲染的时候进行加载并缓存,以备下次访问

Vue实现按需加载

异步加载的组件在打包的时候,会打包成单独的js文件。通过ajax请求回来插入到HTML中。

1 每个new Vue实例的组件中。根实例都可以通过$root属性进行访问

2 ref获取DOM

给元素或组件一个ID然后在js中调用它

3 依赖注入provide inject

在父组件中使用provide定义个属性或者方法

在他的任意子组件中通过inject接收它

4 程序化的监听事件监听

1 父组件通过props把数据传给子组件

2 子组件可以使用$emit触发父组件的自定义事件

5 递归组件

组件可以在他自己的模板中调用自己。必须有name属性,没有name这个属性组件不能自己调用自己,递归的时候需要一个条件来终止递归,v-for

1 基本语法

主要用来服务Vue.component用来生成组件的。

简单说在模板中遇到以该组件命名的自定义标签时,会自动的调用扩展实构造器来生成组件,挂载到自定义元素标签上

Vue.component如果传入的普通对象内部会自动调用Vue.extend()生成对象组件然后通过Vue.component注册

将一些可复用的方法属性封装起来再需要的组件中使用(类似于reset.css)

1 如果混入的属性和方法与原来组件重合会与组件中的为主

2 混入对象的选项在元组件的选项之前调用

全局混入(全局注册的混入对象)

这7个 Vue 模式,可能你经常用!但现在看对你很有帮助

说实话,阅读文档并不是我们大多数人喜欢的事情,但是当使用像Vue这样不断发展的现代前端框架时,每一个新版本都会有所变化,我们很有可爱已经错过了一些后来推出的新且好用的功能。

今天,刷碗智带大家来看看那些有趣但不那么流行的功能。记住,所有这些都是官方Vue文档的一部分。

在大型项目中,我们可能需要将组件分成小块,只有在需要时才从服务器上加载。为了更容易做到这一点,Vue允许我们将组件定义为一个工厂函数,异步地解析组件定义。Vue只会在组件需要渲染的时候触发工厂函数,并把结果缓存起来以备后面的重新渲染。2.3版的新内容是,异步组件工厂还可以返回以下格式的对象。

使用这种方法,我们有额外的选项,包括加载和错误状态、组件获取的延迟和超时。

渲染普通的 HTML 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了大量静态内容。在这种情况下,我们可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来,就像这样:

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事:

当你使用 Vue.component 全局注册一个组件时,这个全局的 ID 会自动设置为该组件的 name 选项。

稍有不慎,递归组件就可能导致无限循环:

类似上述的组件将会导致 “max stack size exceeded” 错误,所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if )。

当 inline-template 这个特殊的 attribute 出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

内联模板需要定义在 Vue 所属的 DOM 元素内。

指令的参数可以是动态的。例如,在 v-mydirective:[argument]="value" 中, argument 参数可以根据组件实例数据进行更新!这使得自定义指令可以在应用中被灵活使用。

例如你想要创建一个自定义指令,用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令:

对于 .passive 、 .capture 和 .once 这些事件修饰符,Vue 提供了相应的前缀可以用于 on:

修饰符前缀 .passive .capture! .once~ .capture.once 或.once.capture~!

例如:

对于所有其它的修饰符,私有前缀都不是必须的,因为你可以在事件处理函数中使用事件方法:

修饰符处理函数中的等价操作 .stopevent.stopPropagation() .preventevent.preventDefault() .selfif (event.target !== event.currentTarget) return 按键:.enter, .13if (event.keyCode !== 13) return (对于别的按键修饰符来说,可将 13 改为另一个按键码) 修饰键:.ctrl, .alt, .shift, .metaif (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)

在Vue中,有几种方法可以让两个组件进行通信,所有这些方法都有优点和缺点。 2.2 版本中引入的一种新方法是使用 Provide/Inject 的依赖注入。

这对选项一起使用,允许一个祖先组件作为其所有后代的依赖注入器,无论组件层次有多深,只要它们在同一个父链上。如果你熟悉React,这与React的上下文功能非常相似。

今天就到这了,就这?

~完,我是刷碗智,疫情只能在家 LoL 了。

volar怎么快速生成vue模板

配置自定义的snippets。

通过vscode的snippets我们可以自己配置自定义的snippets,从而实现快捷生成代码片段,在VsCode里按F1,输入snippets-选择配置用户代码片段,选择后出现选择配置的界面,这里我们对Vue文件的代码片段进行配置,然后就完成了。

随着vscode以及vue的越来越普及,vetur这个名字也越来越被人熟知。vetur是一个vscode插件,用于为.vue单文件组件提供代码高亮以及语法支持。

怎么制作自己的网页?

初级前端

主要学习三个部分:HTML,CSS,JavaScript

一、html + css部分:

这部分特别简单,到网上搜资料,书籍视频非常多。css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易。最后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览器,google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多,建议在实践中多多积累。

二、JavaScript部分。

1.基础学习:

难点,也是重点,要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,有很多比较抽象的概念,必须要深入理解,比如闭包、原型、面向对象、封装等,要理解透彻。看书是必不可少的,找一本优秀的js书从头到尾,反复研究学习,第一遍可以快速翻阅,大体知道了解概念即可,第二三遍就需要深入学习了。另外,js面向对象编程必须要学习,非常重要,个人推荐一本书, Stoyan Stefanov著,凌杰译的《javascript面向对象指南》。边学边练,实践出真知。

针对那些有条件的人来说,很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的,为了让想学习的人可以更好的学习,给大家推荐一个裙,前面是6 1 1,中间是肆 二 8,最后面就是壹 四 二,这里有很多想学习的人和你一起交流,也有大牛每天晚上免费教学,想要学习的人都可以加入我们,但是我们只欢迎想学习的人,不是来学习,随便看看的就不要进了。

2.jQuery学习:

这些基础知识掌握好之后,还需要学jQuery,这是一个非常优秀的Javascript库,大型开发必备。它简化了Javascript的复杂操作,消除了Javascript跨平台兼容问题,提供了大量实用方法,有良好的文档和帮助手册,是一个非常成熟的Javascript库。慕课网学习视频幕课网。学习方法也很简单,照着产品文档做几个页面就行了,不用面面俱到,以后遇到问题查文档就行了。

大概流程就是这样,如下图所示:

3.进阶学习:

有了以上知识,对于大多数小型网站,你应该已经可以写出能够工作的代码了。但要想成为更专业的前端,你还需继续努力。更高的要求大概还有四方面:易维护,可测试,高性能,低流量(移动端)。

中高级前端

1.工具学习习:大型项目中,前端代码构建已经不是简单的压缩一下了,依赖管理、模块合并、各种编译步步不可缺少,需要学会使用grunt、gulp等前端构建工具,要学习的还有:包管理器bower、npm,代码优化CSS Lint、JSHint、JSLint,CSS预处理器less、sass,代码管理及版本控制svn、Git,web框架/服务器Node、Express,代码规范、HTML模块化、css模块化。

2.布局框架学习如Bootstrap。

3.新技术html5学习。

4.js框架学习,requireJS、 AngularJS等,往前端架构师靠近。

5.nodejs学习。

到招聘网站,参考任聘要求,准没错,举例如下:

1.精通html和css,能制作符合W3C标准的静态页面;

2.精通JavaScript编程,对面向对象编程思想有深刻理解;

3.精通主流Javascript库/框架jQuery;

4.理解并掌握JavaScript语言核心技术DOM、BOM有Javascript性能优化经验;

5.对浏览器兼容性有深入的研究,精通各种浏览器问题 ;

6.了解Backbone.js、AngularJs等MVC框架并有实际项目开发经验;

7.了解等服务器后台技术和拥有一定的C#编程能力者优先;

8.对交互体验、可用性、用户体验有一定程度的理解;

9.有良好的责任心和团队合作能力、能承受较大的压力;

自己动手搜索下吧,确定目标和方向,以上是个人路线,仅供参考。

开源精粹(二)!22个实用、有趣的开源项目

作为一名开源爱好者,发掘优秀的开源项目是一件非常有趣的事情。在第一期中,我分享了单页个人网站模板、组装式 Flutter 应用框架、PHP 客户端库、Java 诊断工具等一些实用的库和工具。本期依旧会为大家分享一些前端、后端、移动开发的相关工具,希望你能“淘”到适合自己的工具。

1.Vue-EasyTable

Vue-EasyTable 是一款基于 Vue2.x 的 table 组件,具备自适应、表头与列固定、自定义单元格样式、自定义 Loading 等功能。

2.React-Calendar

这是一款具备原生日期格式的日历组件。它不依赖 Moment.js,支持日期选择范围,涵盖了各国语言,开箱即用。

3.Matter

CSS 实现的 Material 组件合集项目,作者已将部分作品开源,效果可以在 CodePen 上查看。

4.Revery

Revery 是一款用于构建高性能、跨平台桌面应用的框架。它类似于加速版的原生 Electron,除了拥有类似 React / Redux 的库,还具备 GPU 加速渲染功能,其内置的编译器速度也相当快。

5.Web Accessibility Guide

这是一个精选了 Web 可访问性贴士、技巧和最佳实践的开源项目,你将会学习到一些改善 Web 可访问性的实用做法。

1.SOFAJRaft

SOFAJRaft 是蚂蚁金服开源的生产级 Java Raft 算法库,它基于 Raft 一致性算法的生产级高性能 Java 实现,支持 MULTI-RAFT-GROUP,适用于高负载低延迟的场景,易于使用。

2. Dragonwell

阿里开源了 OpenJDK 发行版 Dragonwell,它提供长期支持,包括性能增强和安全修复。在数据中心大规模 Java 应用部署情况下,可以大幅度提高稳定性、效率以及性能。

3.Lawoole

Lawoole 是一款基于 Laravel 和 Swoole 的高性能 PHP 框架。它兼具了 Laravel 的特点,还解决了其功能背后的性能问题。同时,你还能感受到与 Laravel 一样的编码体验。

4.AntNest

AntNest 是一个简洁、快速的异步爬虫框架。它仅有 600 行代码,基于 Python 3.6+.

5.PHP-Awesome

这个仓库汇集了 PHP 优秀的资源,供你查询和参考。

1.FlutterBoost

FlutterBoost 是闲鱼开源的新一代 Flutter-Native 混合解决方案。它能够帮你处理页面的映射和跳转,你只需要关心页面的名字和参数即可。

2.MyLayout

MyLayout 是一套 iOS 界面视图布局框架,可谓 iOS 下的界面布局利器。它集成了 iOS Autolayout、Size Classes、Android 的 5 大布局体系、HTML/CSS 的浮动定位技术以及 Flex-Box 和 Bootstrap 框架等主流的平台的界面布局功能,并提供了一套简单、完备的多屏幕尺寸适配的解决方案。

3.SegementSlide

SegementSlide 是一个 iOS UI 库,它具备完整的滑滚及切换组件,旨在解决多层 UIScrollView 嵌套滚动的问题。

1.DevHub

DevHub 是一款跨平台的 GitHub 通知管理客户端,支持 Android、 iOS、网页和桌面上使用,帮助你便捷的接收 GitHub 各类通知。

2.Reqman

Reqman 是一个帮助后端工程师进行 API 测试的工具,同时也是一个基于 Node.js 的爬虫工具。

3.FreeCodeCamp

说到 FreeCodeCamp,或许大家不会陌生,而这个项目就是他们建立的开源课程和相应的代码库。网站提供了 6 大认证课程,也涉及了全栈开发认证。如果你感兴趣,不妨了解下。

4.Gitter

Gitter 是 GitHub 小程序客户端,作者采用 Taro 框架 + Taro UI 进行开发,而小程序内数据则来自 GitHub Api V3.

5.Awesome Podcasts

这个项目收集了各类实用的播客,涵盖了主流的编程语言,希望对你提升技术水平有所帮助。

6.编程图书大全

书籍不光能在你迷茫的时候,给予你答案,还能在你提升技能的时候,给予你帮助。这个仓库收集了众多编程图书,涉及主流编程语言、人工智能、算法、Linux、大数据等。看看,有木有你需要的。

7.VS Code Netease Music

很多开发者喜欢边写代码,边听音乐,VS Code Netease Music 这个插件就能满足你在 VS Code 上听歌的愿望。它使用 Webview 实现,不依赖命令行播放器。

Star-Battle

Star-Battle 是一款使用 JavaScript ES6、Canvas 开发的飞船射击类 游戏 。来 Enjoy 吧。

注:

如需转载,烦请按下方注明出处信息,谢谢!

Vue3基础-模板语法

如果我们希望把数据显示到模板(template)中,使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。

并且我们前端提到过,data返回的对象是有添加到Vue的响应式系统 中,当data中的数据发生改变时,对应的内容也会发生更新。

当然,Mustache中不仅仅可以是data中的属性,也可以是一个JavaScript的表达式:

下面这种写法是语句不是表达式,所以是错误的:

v-once用于指定元素或者组件只渲染一次,当数据发生变化时,元素或者组件以及其所有的子元素将视为静态内容并且跳过,该指令可以用于性能优化。

如果添加到父节点,那么所有的子节点也是只会渲染一次:

用于更新元素的 textContent,等价于"Mustache"语法,而且"Mustache"语法更灵活。

默认情况下,如果我们展示的内容本身是 html 的,那么vue并不会对其进行特殊的解析。如果我们希望这个内容被Vue可以解析出来,那么可以使用 v-html 来展示。

效果如下:

v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签。

跳过不需要编译的节点,加快编译的速度。

效果如下:

这个指令保持在元素上直到关联组件实例结束编译。

v-cloak 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕,主要用于解决闪动问题,现在Vue3一般不会出现这个问题了。

div 不会显示,直到编译结束。

前面讲的一系列指令,主要是将值插入到模板内容中。但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性,动态绑定img元素的src属性。

绑定属性我们使用 v-bind: ,缩写 : ,用于动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。

v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍),在开发中,有哪些属性需要动态进行绑定呢?还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等。

v-bind有一个对应的语法糖,也就是简写方式,在开发中,我们通常会使用语法糖的形式,因为更简洁。

注意 :Vue2 template模板中只能有一个根元素,Vue3 template模板中允许有多个根元素。

在开发中,有时候我们的元素class也是动态的,比如:当数据为某个状态时,字体显示红色,当数据另一个状态时,字体显示黑色。

绑定class有两种方式:对象语法,数组语法。

① 对象语法:我们可以传给 :class (v-bind:class 的简写) 一个对象,以动态地切换 class。

② 数组语法:我们可以把一个数组传给 :class,以应用一个 class 列表;

我们可以利用v-bind:style来绑定一些CSS内联样式,这是因为某些样式我们需要根据数据动态来决定,比如某段文字的颜色,大小等等。

CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名。

绑定style有两种方式:对象语法,数组语法。

① 对象语法:

② 数组语法: :style 的数组语法可以将多个样式对象应用到同一个元素上

在某些情况下,我们属性的名称可能也不是固定的。

前面我们无论绑定src、href、class、style,属性名称都是固定的,如果属性名称不是固定的,我们可以使用 :[属性名]=“值” 的格式来定义,这种绑定的方式,我们称之为动态绑定属性。

如果我们希望将一个对象的所有属性,绑定到元素上的所有属性,应该怎么做呢?非常简单,我们可以直接使用 v-bind 绑定一个对象。

如下:info对象会被拆解成div的各个属性。

前面我们绑定了元素的内容和属性,在前端开发中另外一个非常重要的特性就是交互。

在前端开发中,我们需要经常和用户进行各种各样的交互,这个时候,我们就必须监听用户发生的事件,比如点击、拖拽、键盘事件等等。

在Vue中如何监听事件呢?使用v-on指令。接下来我们来看一下v-on的用法:

我们可以使用v-on来监听一下点击的事件:

v-on:click可以写成@click,是它的语法糖写法:

当然,我们也可以绑定其他的事件:

如果我们希望一个元素绑定多个事件,这个时候可以传入一个对象:

当通过methods中定义方法,以供@click调用时,需要注意参数问题:

情况一:如果该方法不需要额外参数,那么方法后的()可以不添加,并且方法的实现不用参数,直接就可以打印event。

情况二:如果需要同时传入某个参数和event时,可以通过$event传入事件,并且方法的实现必须按顺序写明参数。

@keyup.enter 代表enter键弹起的时候会调用onEnter方法,我们一般在方法里面获取输入的值:

在某些情况下,我们需要根据当前的条件决定某些元素或组件是否渲染,这个时候我们就需要进行条件判断了。

Vue提供了下面的指令来进行条件判断:

下面我们来对它们进行学习。

v-if、v-else、v-else-if 用于根据条件来渲染某一块的内容,这些内容只有在条件为true时,才会被渲染出来,这三个指令与JavaScript的条件语句 if、else、else if 类似。

v-if 的渲染原理:v-if是惰性的,当条件为false时,其判断的内容完全不会被渲染或者会被销毁掉,当条件为true时,才会真正渲染条件块中的内容。

因为v-if是一个指令,所以必须将其添加到一个元素上,但是如果我们希望切换的是多个元素呢?

如果此时我们使用div包裹,div会被渲染到界面上来,但是我们并不希望div被渲染,这个时候,我们可以选择使用template,template元素可以当做不可见的包裹元素,并且 v-if 可以添加到 template 上,但是最终template不会被渲染出来,类似于小程序中的block。

v-show和v-if的用法看起来是一致的,也是根据一个条件决定是否显示元素或者组件。

首先,在用法上的区别:

其次,本质的区别:

开发中如何进行选择呢?

在真实开发中,我们往往会从服务器拿到一组数据,并且需要对其进行渲染。这个时候我们可以使用v-for来完成,v-for类似于JavaScript的for循环,可以用于遍历一组数据。

v-for的基本格式是 "item in 数组" ,数组通常是来自data或者prop,也可以是其他方式,item是我们给每项元素起的一个别名,这个别名可以自定来定义。

我们知道,在遍历一个数组的时候会经常需要拿到数组的索引,如果我们需要索引,可以使用格式 "(item, index) in 数组" ,注意顺序,数组元素项item在前面,索引项index在后面。

类似于v-if,你可以使用 template 元素来循环渲染一段包含多个元素的内容。

我们使用template来对多个元素进行包裹,而不是使用div来完成,因为div会被渲染,template不会被渲染。而且如果有ul,ul里面不推荐放div,只推荐放li。

Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,这些被包裹过的方法包括:

上面的方法会直接修改原来的数组,所以视图会跟着更新。但是某些方法不会替换原来的数组,而是会生成新的数组,比如 filter()、concat() 和 slice(),这时候我们可以通过重新赋值的方式触发视图更新,如下:

在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性。

这个key属性有什么作用呢?

我们先来看一下官方的解释:key属性主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法,而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素。

官方的解释对于初学者来说并不好理解,比如下面的问题:

什么是新旧nodes,什么是VNode?

没有key的时候,如何尝试修改和复用的?

有key的时候,如何基于key重新排列的?

我们先来解释一下VNode的概念:

VNode的全称是Virtual Node,也就是虚拟节点。事实上,无论是组件还是元素,它们最终在Vue中表示出来的都是一个个VNode。VNode的本质是一个JavaScript的对象。

如果我们不只是一个简单的div,而是有一大堆的元素,那么它们应该会形成一个VNode Tree。

我们先来看一个案例:这个案例是当我们点击按钮时会在li中间插入一个f。

我们可以确定的是,这次更新对于ul和button是不需要进行更新,需要更新的是我们li的列表。在Vue中,对于相同父元素的子元素节点并不会重新渲染整个列表,因为对于列表中 a、b、c、d它们都是没有变化的。在操作真实DOM的时候,我们只需要在中间插入一个f的li即可。

那么Vue中对于列表的更新究竟是如何操作的呢?

Vue事实上会对于有key和没有key会调用两个不同的方法,有key,那么就调用 patchKeyedChildren方法,没有key,那么就调用 patchUnkeyedChildren方法。

没有key的diff算法:

我们会发现上面的diff算法效率并不高,c和d来说它们事实上并不需要有任何的改动,但是因为我们的c被f所使用了,所有后续所有的内容都要一次进行改动,并且最后进行新增。

有key的diff算法:

所以我们可以发现,Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作,在没有key的时候我们的效率是非常低效的,在进行插入或者重置顺序的时候,保持相同的key可以让diff算法更加的高效。

关于vue个人网站模板和vue搭建个人网站的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

上一篇:ppt模板免费的网站(ppt模板网站有哪些)
下一篇:专业虚拟主机提供商(虚拟主机提供商的服务和收费)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~