vue
文章平均质量分 60
builder2991
✌
展开
-
vue之mixin混入
mixin是一个对象,但是本身也是有生命周期的,可以定义属性和方法等data() {return {msg: "我是原本的结果",},console.log("我是mixin中的created生命周期函数");},console.log("我是mixin中的mounted生命周期函数");},methods: {console.log("我是mixin中的点击事件");},},mixin.js中的msg,clickMe在混入其他组件后都可以直接使用。原创 2023-11-30 09:50:56 · 669 阅读 · 1 评论 -
vue-动态组件、keep-alive
接下来我们就看看动态组件如何创建,废话不多少直接上代码(代码中有备注)如果我们想写一个tabbar导航栏,我能想到的两种方式。原创 2023-11-29 16:33:08 · 625 阅读 · 0 评论 -
vue-全局事件总线mitt库(父子通信,兄弟通信都可,兼容vue2、vue3)
【代码】vue-全局事件总线mitt库(父子通信,兄弟通信都可,兼容vue2、vue3)原创 2023-11-29 13:40:40 · 1048 阅读 · 0 评论 -
vue-前端实现模糊查询
开始觉得前端的模糊查询肯定是非常难实现的,但后来发现还是很容易的,几行代码就可以搞定。原创 2023-11-06 16:28:34 · 1010 阅读 · 0 评论 -
vue常见指令
vue常见指令vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。1.v-html双大括号语法无法渲染HTML标签,需要使用v-html。<!DOCTYPE html><html>...原创 2020-04-22 21:56:37 · 257 阅读 · 0 评论 -
vue之vuex
vue之vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。“状态管理模式”new Vue({ // state...原创 2020-04-12 10:50:10 · 268 阅读 · 0 评论 -
vue之slot插槽
vue之slot插槽原文链接:https://blog.csdn.net/qq_38128179/article/details/85273522slot的作用:假如父组件需要在子组件内放一些DOM元素,默认情况下是不会显示的,如下图所示,页面并没有显示父组件增加的< span>哈哈哈</ span> 元素内容。那么要加DOM元素到子组件上,这就用到了slot插...原创 2020-04-08 21:47:58 · 163 阅读 · 0 评论 -
vue简析
vue简析vue的优点低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。可重用性:可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设...原创 2020-04-06 10:55:27 · 700 阅读 · 0 评论 -
什么是MVVM,MVC和MVVM的区别,MVVM框架VUE实现原理
什么是MVVM,MVC和MVVM的区别,MVVM框架VUE实现原理Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是...原创 2020-03-31 18:23:48 · 2152 阅读 · 0 评论 -
vue之v-if 和 v-show的区别
v-if 和 v-show的区别v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低共同点都是动态显示DOM元素区别手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是...原创 2020-03-31 17:50:43 · 234 阅读 · 0 评论 -
vue 之路由vue-router
vue 路由什么是路由后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换...原创 2020-03-21 11:26:37 · 288 阅读 · 0 评论 -
vue组件
vue组件全局组件定义的三种方式1. 使用 Vue.extend 配合 Vue.component 方法://第一种 var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login);//第二种 Vue.component(...原创 2020-03-20 20:07:59 · 270 阅读 · 0 评论 -
Vue.js Ajax(axios)
Vue.js Ajax(axios)GET 方法new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://www.runoob.com/try/ajax/json_demo.json') .then...原创 2020-03-31 17:07:35 · 201 阅读 · 0 评论 -
Vue之过渡 & 动画
Vue之过渡 & 动画过渡Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。语法格式<transition name = "nameoftransition"> <div></div></transition>过渡其实就是一个淡...原创 2020-03-16 18:58:54 · 335 阅读 · 0 评论 -
vue之键盘修饰符以及自定义指令
vue之键盘修饰符以及自定义键盘修饰符1.自定义键盘修饰符【了解】Vue.directive('on').keyCodes.f2 = 13;//enter键盘值2.自定义键盘修饰符通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:Vue.config.keyCodes.f2 = 13;//enter键盘值使用自定义的按键修饰符:&...原创 2020-03-06 21:15:06 · 181 阅读 · 0 评论 -
vue-resource基本使用之get,post,jsonp请求
vue-resource基本使用之get,post,jsonp请求1.get请求首先绑定事件<div id="app"> <input type="button" value="get请求" @click="getInfo"> </div>1.创建 Vue 实例,得到 ViewModel2.发起get请求3. 当发起get请求之后, 通...原创 2020-03-06 20:44:37 · 417 阅读 · 0 评论 -
vue之过滤器
vue之过滤器Vue.js 允许自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;私有过滤器HTML元素:<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>私有 f...原创 2020-03-05 22:05:32 · 129 阅读 · 0 评论 -
vue之实现列表的渲染,增加,删除和查询
vue之实现列表的渲染,增加,删除和查询1.列表的渲染首先创建 Vue 实例,得到 ViewModel,然后在列表中渲染数据 <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td v-t...原创 2020-03-05 21:44:27 · 8799 阅读 · 1 评论 -
vue双向绑定
vue双向绑定原理:vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动话,通知订阅者,触发更新回调函数,重新渲染视图。原理图:observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持,以便利用其中的setter...原创 2019-11-03 16:42:06 · 315 阅读 · 0 评论 -
Vue的生命周期
Vue的生命周期vue总共分为8个阶段:创建前/后( beforeCreate/created)载入前/后( beforeMount/ mounted)更新前/后(beforeUpdate/ updated)销毁前/后( beforeDestroy/ destroyed)接下来看看详细的解释beforeCreate(创建前):在数据观测和初始化事件还未开始created(创...原创 2019-11-03 15:41:55 · 322 阅读 · 0 评论 -
Vue3.0和Vue2.0的区别
Vue3.0和Vue2.0的区别默认进行懒观察(lazy observation)。在 2.x 版本里,不过数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。更精准的变更通知。比例来说:2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这...原创 2019-11-01 20:41:12 · 70499 阅读 · 11 评论 -
vue-cli中mock本地json数据踩雷:报错404 (GET http://localhost:8080/goods 404 (Not Found) )
标题vue-cli中mock本地json数据踩雷:报错404运用vue的脚手架进行了项目的搭建,想要通过json文件模拟后台传输数据,结果一直报错:404,经过不断的查找资料和调试终于找到问题的所在。想通过本地的json文件进行数据的请求,首先要建立一个goods.json的文件,进行数据储存。{ "status":"0", "msg":"", "result":[ {...原创 2019-09-16 21:01:57 · 11850 阅读 · 7 评论