vue
文章平均质量分 61
uu盘
这个作者很懒,什么都没留下…
展开
-
vue中的render函数
vue中的render函数的使用我们先看一个例子:render: function (createElement) { return createElement('h1', this.blogTitle)}相当于:<h1>{{ blogTitle }}</h1>vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点。重点看一下createElement参数createElement( // 参数一:{String | Object原创 2022-05-05 16:02:48 · 4070 阅读 · 0 评论 -
vue3.x中的 Vuex(状态管理工具)
前言Vue3在2月份已经变成默认版本了,接下来的vue3将会成为主流的框架。我们来看看vue3中的奇妙世界吧vuexVuex 是一个专为 Vue.js 的状态管理工具,可以解决组件之间数据共享的问题。注意:我们在项目中如果使用到vuex,最好通过dispatch触发actions的事件 ---> 在actions里通过commit触发mutation ---> 改变state的状态在vue3.x中如何使用vuexvue2.x和vue3.x最大的区别就是 vue3.x中使用的是原创 2022-03-01 19:36:14 · 956 阅读 · 0 评论 -
Vue2和Vue3的区别
1. 双向数据绑定原理vue2 是结合发布者订阅者模式,结合es6Object.defineProperty()对数据进行劫持,进一步通过vue中的watcher的update实现双向数据绑定。vue3 中使用了es6的proxy进行数据代理。相对于vue2,使用proxy的优势:defineProperty只能监听某个属性,不能对全对象监听;可以监听到数组内部的变化;vue2中我们给对象添加一个新属性,它不会更新到视图上,只是因为新添加的属性并没有通过Object.defineProper原创 2022-02-21 17:46:33 · 4274 阅读 · 0 评论 -
Vue3的组合api(composition-API)
vue2中Options API的弊端在Vue2中,我们 编写组件的方式是Options API<script>export default { // 定义数据 data() { return {}; }, // 声明周期钩子 created() {}, mounted() {}, // 定义方法 methods: {}, // 组件 components:{}, // 过滤器 fil原创 2022-02-18 21:07:56 · 666 阅读 · 0 评论 -
Vue中Mixin&extends的使用
官方定义MixinMixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。项目中如何使用Mixin在src文件夹下创建一个mixins文件夹在demomixins.js文件下export default { data() { return { msg:'mixins 中的data'原创 2022-02-18 20:27:46 · 668 阅读 · 1 评论 -
关于vue给对象新增属性页面不会动态更新的问题
问题不知道大家有没有遇到过这个问题,当我们给data里面声明的对象添加一个新属性,这个新属性是不会动态更新视图的。看一个例子<template> <div> {{obj}}<br> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data(){原创 2022-02-17 21:26:27 · 2970 阅读 · 0 评论 -
Vue中的$nextTick()
Vue中的$nextTick()在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM看一个例子<template> <div class=''> <span class="span" v-if="show">uu盘</span><br> <button @click="change">点击</button> </di原创 2022-02-17 21:26:00 · 325 阅读 · 0 评论 -
vue后台管理系统打包上线到node
项目准备1. 配置 alias 别名使用vue-cli开发项目,最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。//加载path模块const path = require('path')//定义resolve方法,把相对路径转换成绝对路径const resolve = dir => path.join(__dirname, dir)module.exports = { chainWebpack: config =>原创 2022-02-17 15:37:44 · 1088 阅读 · 0 评论 -
v-for中为什么要使用key
1.可以简单的这样理解:加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果2.没有key。vscode编辑器会报红下划线3.可以这样简单地理解,无:key属性时,状态默认绑定的是位置;有:key属性时,状态根据key的属性值绑定到了相应的数组元素。4.之所以要加上key是因为vue源码是内部数据驱动,通过改变数据进而达到改变视图的效果,加上key这样算法上容易定位到对应的元素,避免去遍历dom造成的性能的消耗...原创 2022-02-17 14:16:57 · 821 阅读 · 0 评论 -
vue使用keep-alive缓存页面
概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中作为标签使用。作用在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性缓存组件一、缓存所有页面直接包裹根router-view即可<template> <div id="app"> &原创 2022-02-16 15:15:11 · 1774 阅读 · 0 评论 -
MVVM和MVC理解
什么是MVC和MVVMMVC、MVVM是两种常见的前端架构模式,这种架构模式是抽象分离出来的为了解决某一类问题的方法。MVC和MVVM中的特点:相同点:其中M指的是model(数据),V指的是view(视图)不同点:这两种架构中,不同的只是MV之间的纽带部分。MVC分为M(model模型) V(view视图) C(controller控制器)。在MVC中用户进行视图操作之后交给控制器处理,在控制器中响应视图的事件调用model的接口对数据进行操作,只要model发生变化,就给对应的视图进行更原创 2022-02-11 20:15:06 · 1071 阅读 · 0 评论 -
Vue中computed、methods、watch区别
1. computed计算属性计算属性最常见的写法就是函数写法:<template> <div class="home"> {{formMsg}} <button @click="formMsg = 'uu盘'">点击修改</button> </div></template><script>export default { name: 'Home', data() { re原创 2022-02-10 21:17:01 · 597 阅读 · 0 评论 -
浅谈vue虚拟dom,diff算法
vue中的虚拟dom什么是虚拟dom?虚拟dom可以简单的用一句话概括,就是用普通的js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。简单来说:本质上是js对象,这个对象就是更加轻量级的对DOM的描述为什么要创建虚拟dom?创建真实DOM成本比较高,如果用 js对象来描述一个dom节点,成本比较低,另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。vue中diff算法diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个原创 2022-02-07 19:25:55 · 439 阅读 · 0 评论 -
Vue-Router
前端路由概念通过改变 URL,在不重新请求页面的情况下,更新页面视图。更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:Hash 和 history如何设置路由模式const router=new VueRouter({ mode:'history / hash', routes:[...]})# mode:'hash' 默认地址栏会多一个#符号:http://localhost:8080/#/login# mode:'h原创 2022-02-07 09:17:03 · 354 阅读 · 0 评论 -
vue自定义过滤器
vue自定义过滤器过滤器是对即将显示的数据做进一步的筛选处理,然后显示,过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。vue中的过滤器分为两种:全局过滤器和局部过滤器全局过滤器Vue.filter('formatePrice', (val) => { return val.toFixed(2)})// 使用{{13.44 | formatePrice}} 局部过滤器<script> export default { data() {原创 2022-02-04 09:57:29 · 1152 阅读 · 0 评论 -
vue组件化开发
vue组件化开发在vue中开发,都是用的组件化的思想开发的,一般在都会在搭建项目的时候,都会先建立组件的模板,把架子搭起来。也就是在组件中定义好<template>视图层,<script>逻辑层,<style>css样式层。一般在项目src中创建一个components文件夹存放我们自定义的组件,在需要的页面中导入并注册后,通过标签的形式使用。1.第一步:在页面中引入子组件,(假设在components文件下有一个myHeader.vue组件)import m原创 2022-02-04 00:04:01 · 1084 阅读 · 0 评论 -
vue的双向数据绑定原理
vue的双向数据绑定原理采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图,实现数据和视图同步。...原创 2022-01-31 23:33:08 · 627 阅读 · 3 评论 -
vue自定义指令
vue自定义指令vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字(不需要写上v-前缀),第二个参数可以是对象数据。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM原创 2022-01-29 22:28:13 · 654 阅读 · 0 评论 -
用vue指令实现一个拖拽功能
注意PC端中没有触摸事件,下面用局部指令移动端拖拽directives:{ 'drag':{ inserted(el,binding){ el.style.position = 'absolute' let x = 0 let y = 0 el.ontouchstart = function(es) { x = es.touches[0].pageX -原创 2022-01-29 22:23:02 · 522 阅读 · 0 评论 -
vue的生命周期
vue的生命周期vue实例从创建到销毁的过程,就是生命周期。vue每个组件都是独立的,每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为三个阶段:挂载阶段、更新阶段、销毁阶段。beforeCreate:创建前实例初始化之后,此时组件的选项对象还未创建,el,data并未初始化,因此无法访问methods,data,computed等上的数据和方法。data() { return { num:1 }}beforeCreate(){ con原创 2022-01-28 22:51:13 · 646 阅读 · 0 评论 -
vue常见的指令
vue常见的指令????v-text(相当于原生js中的innerText)解析文本两者等价<span v-text="msg"></span><span>{{msg}}</span>????v-html(相当于原生js中的innerHTML)与v-text相比,v-html可以解析标签<p v-html="<span>你好</span>"></p>????v-once(只渲染一次)只原创 2022-01-27 11:08:06 · 555 阅读 · 0 评论 -
vue中的slot(插槽)
插槽slot插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置。父组件往子组件中插入一些内容。用表示。插槽的分类:默认插槽,具名插槽,作用域插槽1. 默认插槽默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据子组件:<div> <slot></slot></div>父组件:<heads>你好</heads>原创 2022-01-27 11:06:54 · 729 阅读 · 0 评论 -
vue基础
什么是vue是一套用于构建用户界面的渐进式JavaScript框架,通过对数据的操作就可以完成对页面视图的渲染。vue特点:上手简单、灵活的组件应用 、高效的数据绑定vue的创建const vue = new Vue({ el:"#app", // vue实现逻辑代码的作用域,挂载节点放在div中 data:{ // 存放变量(对象格式) num:0 }})为什么组件的data必须是个函数?在使用vue脚手架(vue cli)创建的vue项目中,将data属性定义成一个对象会原创 2022-01-26 23:28:51 · 190 阅读 · 0 评论