![](https://img-blog.csdnimg.cn/20200223125840471.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
介绍 Vue 相关知识,以及开发中的注意点。
fewuliu
决定一个人成功与否的因素不是你现在站立的高度,而是你的触底反弹力。
展开
-
Vue 中作用域 CSS 的那点事
前言首先,我们来回忆一下「CSS 作用域」这一概念,它的本质是通过让每一个选择器成为一个「unique」的存在,这样就自然而然地形成了作用域。而提到「Vue」中「作用域 CSS」,我想大家应该立即想到以 scoped 的方式形成的带有作用域的 css。但是,值得一提的是,在「Vue」中还支持了一种「作用域 CSS」,即「CSS Module」。提及 「CSS Module」,想必大家会有点陌生,相信有很多同学在平常开发中都是用 scoped 来实现「Vue」组件中的「作用域CSS」。所以,今天我们就原创 2020-06-21 12:45:57 · 434 阅读 · 0 评论 -
浅谈 VueSSR 和 Express 结合的开发模式
引言其实这种开发模式,我之前讲 VueSSR 的时候已经提过了。但是,当时只是简单的提及一个工作目录 entry-server.js 和 server.js 两个和服务端相关的文件,用来进行一些后端的查询之类的。但是如果是简单的 VueSSR,不能完全适应一些后端的开发,如果需要多写几个查询,项目的耦合性就不高了。现在,我把它补上。目录结构对比我之前将的目录结构,其实就多了个文件夹。然后,这...原创 2020-03-02 19:37:15 · 889 阅读 · 1 评论 -
Vue.js——Vue SSR 初次认知&实践
前言在讲 Vue SSR 之前,先谈谈传统的 Vue 项目,传统的 Vue 项目只是一个单页应用,服务端给客户端返回的只有一个 HTML 和一堆 JS 文件,所以在做一些大型的网站,但是需要 SEO 的时候,传统的单页应用并不能提供这样的功能。因此,Vue 社区也针对这一问题,提出了 Vue SSR,并加以实践。那么 Vue SSR 的优点是什么?更好地 SEO提高首屏到达速度解决了一...原创 2019-12-01 20:39:34 · 337 阅读 · 0 评论 -
Vue.js——事件节流和防抖动的应用
前言 学过JavaScript的一些高级应用的同学,想必不会对JavaScript中的事件节流和防抖动陌生。我想应该都能随手甩出一段JavaScript代码实现节流和防抖动。但是,在实际开发中,写原生的JavaScript代码肯定是不会适应开发需求的。接下来,我们以Vue.js中任何很方便地使用事件节流和防抖动为例,在实际开发中运用一下~事件节流(...原创 2019-10-31 09:56:35 · 825 阅读 · 0 评论 -
Vue.js——Vue 3 你了解了吗?
前言随着Vue作者尤雨溪在今年10月份开源了Vue 3的pre-alpha版本,也过了有一段时间了。而作为一个前端小白的我,了解的比较晚。所以,今天就来大致讲一下Vue 3即将带来的重大改变。摇钱树在Vue 2x版本中,项目的打包会将一些你并不会用到的API也打包到你的项目中,这样无疑会增加项目的体积,并且,你并没有用到这个API,但是打包后是包含这个API的,很明显这不符合使用逻辑。那么为...原创 2019-10-19 22:12:50 · 6315 阅读 · 0 评论 -
Vue.js——按需加载(异步组件)
前言如果仔细观察浏览器加载Vue-Cli项目的时候,默认情况下,只会加载app.js文件,即所有文件都是在app.js文件中,然后浏览器读取app.js进行加载,所以如果项目很大,这种加载方式显然是影响用户体验。那么这时候就要通过按需加载的方式来异步加载组件,从而达到分割代码的作用。常规的加载方式常规或者新手在Vue-Cli项目中引入组件,都是如下:import component f...原创 2019-08-30 11:38:57 · 2800 阅读 · 0 评论 -
Vue.js——单页应用(SPA)如何进行SEO优化
前言SEO(Search Engine Optimization),即搜索引擎优化。权威的解释是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。具体到怎么实现,就是通过在网页上内嵌一些meta属性来达到更好地被搜索引擎爬取关键信息,从而提升自身的搜索排名。单页应用(Single Page Application)由Vue-Cli打包生成的网站的文件就是单页应用,它只有一个Index...原创 2019-08-29 14:03:49 · 4428 阅读 · 0 评论 -
Vue——vue-cli3.0对比2.0
近期在使用vue-cli3.0写项目,所以就来对比一下vue-cli2.0和vue-cli3.0Vue-cli 2.0全局安装 npm install -g vue-cli创建项目 vue init webpack project-name项目目录结构Vue-cli 3.0全局安装 npm install -g @vue/cli-service-glob...原创 2019-08-24 00:01:45 · 4487 阅读 · 0 评论 -
Vue.js——路由全局前置&后置守卫(钩子)
前言: 不知不觉走在编程的路上已经一个年头多些,在自学的前部分时间都在看别人写的程序。最近这几个月几乎都在自己捣鼓程序…导致很少去吸收别人写的程序的优点。回到正题~最近在玩vue社区的一个很有名的框架iView,并且也在看它生态中的iView Admin模板。刚开始就掉坑了…全局前置守卫(钩子)基础语法:const router = new VueRouter({ ... })rou...原创 2019-08-18 19:15:13 · 6925 阅读 · 0 评论 -
Vue.js——获取Dom对象的类选择器名(className)
方法一:通过监听器监听方法event参数获取dom对象代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2019-03-06 18:06:31 · 40041 阅读 · 0 评论 -
Vue.js——实现下拉列表多选
需要先对表单的select标签的size属性进行设置,以及要声明multiple属性代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <ti原创 2019-03-07 16:55:19 · 4659 阅读 · 1 评论 -
Vue.js——过渡&动画效果
基本格式HTML部分<transition name='name'> <div></div></transition>样式部分Vue.js提供了6个class来实现过渡效果1.进入类v-enter 进入过渡的开始状态v-enter-active 进入...原创 2019-03-16 18:04:01 · 467 阅读 · 0 评论 -
Vue.js——jsonp跨域请求(仿百度搜索完整版)
前言:无知的我一直以为类似这些请求都可以用ajax解决…但是现在才知道ajax仅局限于同域下发送异步请求,至于什么是jsonp请求以及同源政策百度说的很清楚。页面效果:PS:界面js效果包括键盘上下、文本框聚集失焦,如有补充欢迎大家提建议。css代码:*{ font-family:微软雅黑; margin:0px; ...原创 2019-03-30 08:05:28 · 544 阅读 · 0 评论 -
Vue.js——组件(局部&全局)
全局组件创建全局组件Vue.component({'组件名', { template:'模板id', //模板id data(){ //data必须是方法! return { //返回数据 } }, props:['变量名'], //props用于接收父组件的数据 此处也可以用对象{} 然后在里面写一些动态的验证规则 例如 type:number ...原创 2019-04-08 08:34:36 · 160 阅读 · 0 评论 -
Vue.js——computed计算属性
前言:计算属性能实现的功能methods几乎可以实现,但是计算属性于methods的差别就在于,前者是基于绑定的变量的值,即只要该值不发生变化,计算属性的值也不会变化。基本的computed属性写法computed:{ msg2(){ return '欢迎来到这里'; }, ...原创 2019-04-10 08:35:34 · 305 阅读 · 0 评论 -
Vue.js——局部过滤器&全局过滤器
局部过滤器在Vue实例中的写法filters:{ convert(data, n){ return data.toFixed(n); }, }即通过vue提供的filters选项,然后通过方法的方式写过滤函数,默认过滤函数第一个位置的形参代表要过滤的变量值如果页面中需要传入...原创 2019-04-14 08:49:56 · 2062 阅读 · 0 评论