FrontEnd&Vue
记录前端和Vue相关内容
Apple-yeran
Stay Hungry, Stay Foolish.
展开
-
Vue.js过滤器
1 概述在Vue.js中,过滤器主要用于文本的格式化,或者数组数据的过滤与排序等。从Vue.js 2.0.0版本开始,内置的过滤器被删除了,如果要使用过滤器,需要自己编写。虽然内置过滤器被删除了,但并不代表过滤器就没有用了,Vue官方的解释如下:内置的过滤器是有用的,但是他们缺乏纯js的灵活性。当一个内置函数不适合您的需求时,您最终会重新实现类似功能(则内置的代码就成无用代码、死代码),或者必须等待Vue更新它们并发布新版本。在实际的项目中,过滤器也会大量使用,因此熟练掌握过滤器的应用是非常重要的原创 2020-12-24 12:09:01 · 9896 阅读 · 0 评论 -
Vue.js监听器
Vue.js监听器1 监听器的定义与使用Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:监听属性。**当有一些数据需要随着其他数据变化而变动时,就可以使用监听器。**听起来监听器和计算属性差不多,从功能描述来看,确实是,不过在实际应用中二者还是有很大差别。下面来介绍一下监听器的使用,以及和计算属性的区别。1.1 监听器基本使用监听器是在Vue实例的选项对象的watch选项中定义的。下面通过监听器来实现千米与米之间的换算。<!DOCTYPE html><html原创 2020-12-23 21:10:36 · 12669 阅读 · 0 评论 -
html和js结合方式
两种方式:内部js、外部js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js和html的两种结合方式</title></head><body><!--方式1 内部js--><script type="text/javascript"> // 直接在<s原创 2020-12-09 10:37:28 · 10526 阅读 · 0 评论 -
css选择器
1 基本选择器html标签选择器、class选择器、id选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三种基本选择器</title><!--三种基本选择器:1.html标签选择器2.class选择器3.id选择器注意:每一个标签都定义了class和id属性,用于对标签进行标识,方便对标签进行操作。多个原创 2020-12-09 10:30:44 · 10058 阅读 · 0 评论 -
html和css结合方式
四种结合方式:属性方式、标签方式、导入方式、链接方式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css和html的结合方式</title></head><body><!--第一种:属性方式该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。--><原创 2020-12-09 10:21:59 · 10143 阅读 · 2 评论 -
Vue项目复制时注意事项
问题:Vue项目复制时,千万不要复制整个项目文件,因为整个项目文件中包括node_modules文件夹,此文件夹内都是项目所需的依赖,而各个依赖之间相互链接,直接复制会导致复制过程卡死,严重会丢失重要的文件。正确的方法:**只需复制项目文件夹内除node_modules之外的所有文件及文件夹即可,粘贴到另一个位置后,再在命令行中执行npm install,安装好所需的依赖即可。**至此就达到了复制整个项目到另一位置的目的。...原创 2020-10-20 18:25:12 · 11958 阅读 · 0 评论 -
解决使用html文件写vue指令时,v-指令全部显示错误,但不影响执行的问题
问题:在使用html文件写vue指令时,v-指令全部显示错误,但不影响执行,如下图所示。但是强迫症看着不舒服,解决方法:先使用快捷键ctrl + shift + a,在弹出的对话框中输入: Unbound XML namespace prefix,将其设为OFF即可。...原创 2020-09-29 11:04:09 · 10374 阅读 · 0 评论 -
安装vue-devtools
1 介绍vue-devtools是基于Chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码,非常方便。2 安装步骤2.1 下载vue-devtools源码下载地址:https://www.github.com/vuejs/vue-devtools.git如下图所示:使用git工具下载。注意:这里不能直接clone上面的链接,因为我们git clone时默认分支为最新的develop分支。develop是测试分支,不是正式分支。如果使用devel原创 2020-09-19 17:36:52 · 10081 阅读 · 0 评论 -
解决Element-ui中Table表格无法显示的问题
今天项目中需要用到表格,于是就采用了由饿了么前端团队开发的Element-ui + Vue组合。1、准备工作:使用命令:cnpm i element-ui -S 进行安装Element-ui,安装好了之后,进行如下配置:这样操作之后,就可以使用Element-ui插件了。2、引用Element-ui官方文档中的Table表格代码3、启动端口,并在浏览器访问问题就出现在此步骤:在浏览器输入url,回车后,浏览器空白,什么都不显示。但是写一个插值表达式(如下图所示),可以正常显示,就是表格不能显原创 2020-08-22 17:19:54 · 33403 阅读 · 29 评论 -
DOM加载顺序
1、 解析HTML结构。2、加载外部脚本和样式表文件。3、解析并执行脚本代码。4、构造HTML DOM模型。5、加载图片等外部文件。6、页面加载完毕。原创 2020-06-26 20:07:27 · 8644 阅读 · 0 评论 -
首次新建VUE项目
1、百度搜索nodejs,下载node,并安装,安装直接下一步即可,可以自己修改安装目录。2、检查在命令行中输入node -v和npm -v,如果显示出相应的版本号,则表明安装成功。npm是nodejs环境的包管理工具,和node集成在一起。3、安装cnpm因为npm的服务器在国外,所以有时候下载包速度会很慢,所以安装一个淘宝镜像cnpm,二者相同,只是命令由npm变为cnpm。安装cnpm命令:npm install -g cnpm --registry=http://registry.n原创 2020-06-26 17:24:54 · 8570 阅读 · 0 评论 -
VUE组件(全局组件和局部组件)
Vue组件之全局组件与局部组件的使用详解组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展。个人认为就是一个可以重复利用的结构层代码片段。全局组件注册方式:Vue.component(组件名,{方法}) 渲染结果: 我是全局组件 我是全局组件这里需要注意:1.全原创 2020-06-24 22:16:47 · 8880 阅读 · 0 评论 -
箭头函数
原创 2020-06-23 22:13:18 · 8440 阅读 · 0 评论 -
IDEA配置VUE内容
1、在IDEA中有v-指令代码提示2、在IDEA中加载VUE组件3、在IDEA中新建文件时有Vue File选项原创 2020-06-22 21:50:29 · 8497 阅读 · 0 评论