vue
文章平均质量分 62
vue相关的一些小知识点
ghost_violets
这个作者很懒,什么都没留下…
展开
-
url转二维码----vue-qriously
现在前端常常会见到这样的功能,就是将 url 链接转成二维码展示,接下来就介绍一下将 url 转成二维码的插件 vue-qriously 的用法(vue中)1:下载vue-qriouslynpm i vue-qriously -S2:全局引入//在main.js中进行全局引入import VueQriously from 'vue-qriously'Vue.use(VueQriously)3:在页面使用<template> <div> <qri.原创 2020-09-24 15:24:10 · 361 阅读 · 0 评论 -
slot:插槽
在我们使用组件之后,当组件定义完毕后,我们可以通过标签的方式去使用这个组件,类似于传统的HTML标签的使用,可以使用单标签,也可以使用双标签的方式;在传统的HTML双标签里面,我们可以在标签的内部写一个内容,那么如果是在我们自己开发的组件里面也书写内容,那么会出现什么样的结果?<div id="box"> <h1>{{ title }}</h1> ...原创 2019-11-03 00:25:06 · 171 阅读 · 0 评论 -
vuex
什么是 vuex官网解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。划重点:注意1: vuex 只能在vuejs项目...原创 2019-11-02 15:46:27 · 125 阅读 · 0 评论 -
ElementUI 的使用及自定义设置
什么是 ElementUI官网介绍:Element,一套为开发者,设计师和产品经理准备的基于Vue 2.0的桌面端组件库在开发的过程中,很多时候有很多的部分是可以被公共的时候,例如导航,底部的选项卡(手机web app)我们可以自己去开发,也可以使用第三方公司专门开发的这些组件库(UI组件库),ElementUI 就是其中的一种,还有几个比较好的:1: MintUI (饿了么前端团队...原创 2019-11-02 10:17:26 · 2152 阅读 · 0 评论 -
nuxt.js 的使用
之前我们已经知道到了如何使用 nuxt.js 去创建一个项目,并且也知道里面有哪些文件,都有什么作用,现在我们就来用一下这个框架首先我们要知道项目的启动文件是:server/index.js,并且我们写组件页面的文件夹是:pages接下来我们就在 pages 文件夹下写一个组件页面1:在 pages 下新创建一个目录(mypages,可以自己取名字)(主要是想让主组件在最外面,明显一点...原创 2019-11-02 08:51:44 · 1330 阅读 · 0 评论 -
SEO和 SSR及nuxtjs 的初步使用
EO 和我们的 SSR 有什么关系?网站尽可能做到静态化(1. 真静态,真正的生成静态的HTML文件,SEO是非常喜欢的 2. 伪静态,是一个假的静态网站,用来欺骗搜索引擎,使得我们的url地址变得好看一些 )真静态真静态: 真正的生成静态的HTML文件,在后台服务器我们可以通过一定的方式(模板引擎)把数据和我们的HTML页面(模板,里面存在一些特殊的语法、插值表达式 express-a...原创 2019-11-01 23:01:48 · 668 阅读 · 0 评论 -
vue-cli 单组件认识和使用
为什么要用 vue 单组件在使用 vuejs 做开发的时候,为了代码的复用和维护原创 2019-11-02 16:34:55 · 228 阅读 · 1 评论 -
npx 的使用和 vue-cli 4.x 如何使用 2.x
npx 的使用npx 是什么npx 是在 node 中自带的一个工具,可以帮助我们使用局部安装的工具包的命令为什么要用 npx因为现在企业开发项目的时候,不建议把这些工具安装成全局这是因为现在的工具包更新很快,有可能你上一个项目用的是2.x版本,这个项目用的就是4.x版本,如果你安装了全局的话,要维护上一个项目,并进行现在这个项目的开发的话,就有可能出现高低版本兼容问题,所以我们一般都是...原创 2019-11-01 23:06:10 · 2410 阅读 · 0 评论 -
vue-cli 小技巧
端口自定义我们知道,当我们用 vue-cli 构建好一个项目之后,他会默认给我们开一个端口,但是,如果不想用它的默认端口,,我们该怎么去设置呢端口设置方法1:在与 package.json 文件的同级下,创建一个 vue.config.js 文件2:在里面进行以下配置,重新运行,端口就会变成你设置的那个了module.exports = { devServer: { p...原创 2019-10-30 23:50:15 · 89 阅读 · 0 评论 -
vue-cli(vuejs 脚手架)创建一个项目
在一个大型的项目里,把所有的代码都放到一个文件里显然是不现实的,所以在实际做项目的时候,我们都会把他们分类放到不同的文件里面,使它们尽可能的小,这样也便于后期的维护和管理。根据项目的功能需求,划分出不同的功能模块,然后建立相关的文件夹进行统一的管理。这种管理访问一般我们叫做 工程化 管理。什么是 vue-cli当我们的 vuejs 项目一定大的时候,我们也要考虑一下这种工程化的管理模式,vu...原创 2019-10-30 21:15:18 · 289 阅读 · 0 评论 -
组件间的通信
什么是组件间的通信多个组件间的数据的相互传输和共享为什么回出现这种问题在使用 vuejs 组件进行开发的时候,我们的页面不可能只使用一个组件,肯定是各个组件组合使用,每个组件都有自己的 data ,但是它们有不可能是单独存在,肯定要和其他组件进行数据的交流,我们把这种组件之间进行的数据传递共享称之为组件间的通信问题vuejs 组件间的通信一般有以下几种:1:父子通信2:子父通信...原创 2019-11-02 23:44:56 · 127 阅读 · 0 评论 -
vuejs之组件介绍及简单使用
什么是组件对于一些大型的网站,我们可以看到他们的各部分页面其实有很多事相同的,如头部和尾部,以及一样列表的样式,它们都是可以被反复使用的。为了代码的复用和后期维护的方便,我们一般会尽可能将公共的那一部分提取出来,形成单独的一部份,供其他地方使用,我们把这公共的部分叫做组件组件里一般会包括页面结构,样式,数据和生命周期函数如果我们做的足够的抽象提取,那么这些公共的部分可以被很多第三方进行使用。...原创 2019-10-28 22:28:51 · 190 阅读 · 0 评论 -
vue 组件之结构,数据,样式,行为,及生命周期函数
vue 组件之 data (数据)data :代表是当前这个组件内部的数据,一般也叫做state 状态,模型变量之前我们知道了 vue 组件的定义和基本使用,但是我们发现,vue 组件使用的时候,不能在标签里加内容,比如说:<div id="box"> <my_component>你好</my_component></div><...原创 2019-10-28 22:28:20 · 245 阅读 · 0 评论 -
vuejs 中的 computed,watch(和 filter)
我们现在已经知道如何把模型中的数据放到视图里,但这里有一个问题,如果我们模型里的数据要经过处理才能放到视图上的话,我们就需要用到方法。比如说我们在模型里有一个 username 属性,它的值是小写的,但是我们想把它转换成大写,我们就要对数据进行处理,如下面的代码所示<div id="box"> <h3>{{ name }}</h3> <h3&...原创 2019-10-26 09:19:36 · 606 阅读 · 0 评论 -
vuejs 指令之 v-bind
v-bind<div id="box"> <!--v-bind: 代表给 src属性进行值的设定--> <img v-bind:src="baidulog" alt=""> <!--也可以简写--> <img :src="baidulog" alt=""> <!--还可以添加css属性--&...原创 2019-10-24 23:10:10 · 268 阅读 · 0 评论 -
vuejs 指令之 v-model
v-model负责收集页面的数据<!-- v-model :负责收集页面的数据,之前我们都是从data里向页面--><!--在表单控件或者组件上创建双向绑定--> <div id="box"> <h2>{{ title }}</h2> <!--要收集的信息,在元素里加上 v-model ...原创 2019-10-25 00:31:20 · 285 阅读 · 0 评论 -
vuejs 指令之 v-on
v-on绑定事件监听器。事件类型由参数指定,我们还是用代码来看会清除一些<div id="box">//click:事件类型,不要加前缀 clickHandler:方法名称,用事件名称+Handler组成 <button v-on:click="clickHandler">点击事件 v-on</button> <!--简写-...原创 2019-10-25 00:31:44 · 290 阅读 · 1 评论 -
vuejs 指令的使用
前面我们已经学习了 vue 的安装和基本用法,这次我们来学一下指令的基本使用vuejs 提供一个叫做指令: 在 vuejs 以 v-开头的标签叫做指令,扩展html本身标签的能力1. 指令要作为元素的属性使用 2. 指令提供一个js执行环境v-text更新元素的 textContent,如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值(官网解释)。...原创 2019-10-24 23:07:42 · 444 阅读 · 0 评论 -
vuejs介绍
#什么是vuejsvuejs是一套用于构建用户界面的渐进式框架(一个前端框架)Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。#vue 的安装1、直接在官网下载,然后用 ,但是这个有一个问题,那就是当你没网的时候,这个就不能用了补充:C...原创 2019-10-24 23:06:54 · 1011 阅读 · 0 评论