vue
关注
分享
扫一扫
Carol小朋友
正在努力成为一名优秀的前端程序媛~
展开
-
Vue中v-for为什么必须要key？为什么不能用index作为key？
首先要知道Vue以及React都使用了虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化，从而更新节点。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。.原创 2020-07-31 15:34:12 · 3425 阅读 · 0 评论 -
vue中通过v-for获取img src的问题
一开始我写法错误，想当然的认为应该是这样写：{ id:'1', src:'../assets/123.jpg') }但这样写我发现图片死活加载不出来，但是在网页调试中又看到路径是正确的，很疑惑。然后我就上网查原因，发现是src写法不正确，应该是下面这样写：{ id:'1', src:require("../assets/123.jpg") }...原创 2020-07-22 10:55:38 · 825 阅读 · 0 评论 -
Vue项目报错：Uncaught SyntaxError: Unexpected token ＜
这个是我在index.html中引入一些JS库文件时产生的错误，当时我的JS文件放在了src目录下，后面查阅相关资料发现，Vue引入静态文件时，不能放在src目录下，需要放在与之同级的目录下，例如static，因为src目录下的资源只能import或require。...原创 2020-07-15 16:22:37 · 3055 阅读 · 0 评论 -
VUE项目中引入JS文件的几种方法
在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现:1.在index.html页面使用script标签引入当然也可以使用cdn的地址。这样引入后的内容是全局的，可以在所有地方使用。<!DOCTYPE html> <html> <head> <title>Map</title> <meta charset="utf-8"> <meta原创 2020-07-15 15:15:14 · 69409 阅读 · 3 评论 -
Router-Link详解
<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名组件的属性有：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class1、to（必选参数）：类型string/location表示目标路由的链接，该原创 2020-07-08 15:06:48 · 56257 阅读 · 3 评论 -
Sass在Vue项目中的使用
简介Sass 是一个 CSS 预处理器。Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。Sass 文件后缀为 .scss。安装1. 安装依赖包vue的webpack项目中需要安装上node-sass、sass-loader和style-loadernpm install --原创 2020-07-08 14:17:54 · 611 阅读 · 0 评论 -
基于Vue.js+Koa+MySQL开发的个人博客
我的博客一直以来都想自己做一些个人项目, 于是想到了先做一个博客项目练练手。在GitHub上找了很多大神的开源博客项目来学习，慢慢的自己也完成了一个简单版本的博客，并部署上线。目前项目已经全部部署到服务器，但域名还在备案，因此只能先通过IP地址访问。线上地址前端项目后端项目因为我做的这个项目功能并不复杂，所以非常适合大家用来练手哦，如果觉得有帮助欢迎给个star，感谢！设计参照了h...原创 2018-12-23 00:49:41 · 1252 阅读 · 0 评论 -
如何在Vue项目中实现吸顶元素
我的思路就是判断合适的时候将这个元素的position设为fixed，那么这个合适的时机如何判断呢？我们可以计算页面滚动的距离。监听页面滚动状态在mounted回调中加入以下代码：mounted() { // handleScroll为页面滚动的监听回调 window.addEventListener('scroll', this.handleScroll); },在destr...原创 2018-12-26 15:13:00 · 2620 阅读 · 0 评论 -
vue的生命周期
就是vue实例从创建到销毁的过程。创建前/后：beforeCreated：此时vue实例还没有挂载元素$ el，data也是undefinedcreated：vue实例的data有了，但是$ el没有。载入前/后：beforeMount：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟DOM节点上，data.message还未替换。mounted：vue实例挂载完成，da...原创 2018-12-13 18:55:43 · 236 阅读 · 1 评论 -
vuex的使用详解
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理。简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。vuex的五个对象state：存储状态。也就是变量；定义new Vuex.Store({ state: { allProducts: [...原创 2018-12-13 18:39:51 · 236 阅读 · 0 评论 -
vue-router前端路由的使用
路由是根据不同的url展示不同的内容，前端路由就是把这个工作由服务器转到前端来做。Vue.js+Vue-router可以很简单的实现单页应用。单页应用单页应用（SPA）能够更新视图而不重新请求页面。vue-router实现单页应用主要有Hash模式和History模式，通过mode参数决定使用哪一种。默认使用Hash。1、Hash模式：hash（#）是URL 的锚点，代表的是网页中的一...原创 2018-11-27 16:16:28 · 892 阅读 · 0 评论 -
用vue-cli来搭建一个vue项目
用控制台生成vue项目在控制台中输入vue init webpack project(自己取的项目名称)“project1”是自己取的项目名称下面的：“Project name”写项目的名称，不可以出现大写字母否则会报错&amp;quot;Project description&amp;quot;就是对项目的一些描述“Author”作者，也就是你的名字“Install vue-router?”vue-router是全...原创 2018-09-28 20:54:08 · 199 阅读 · 0 评论 -
vue-cli脚手架安装
vue-cli脚手架安装1.首先安装npm和node.js2.安装webpack和vue-clivue全家桶之一的vue-cli可以帮我们快速搭建vue项目1.首先安装npm和node.js进入npm官网点击安装点击下载一般下载LTS就好2.安装webpack和vue-cli安装完毕后打开node.js的控制台先分别输入node -v和npm -v检查是否安装成功如果出...原创 2018-09-28 19:48:46 · 163 阅读 · 0 评论