![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 56
编程界小明哥
CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,欢迎您关注,期待与您一起学习、成长、起飞!
展开
-
Vue知识点汇总
一、MVVM的理解MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View代表UI 组件,它负责将数据模型转化成UI 展现出来。 ViewModel监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View...原创 2021-04-09 18:21:08 · 1908 阅读 · 3 评论 -
用JS简单实现Vue的双向绑定
Vue实现数据双向绑定原理:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用Object.defineProperty()将它们转为getter/setter。这里来简单模拟一下双向绑定。特点1.比如input被监视,当输入发送改变时,...原创 2021-04-08 21:41:47 · 2597 阅读 · 17 评论 -
Vue 3 不再支持 IE 11!
4 月 3 日,Vue 作者尤雨溪宣布:Vue 3 将不会支持 IE11。总结放弃Vue 3的IE11支持计划。重点关注Vue 2.7的backport兼容特性。尤神表示:在漫长的开发过程中,也对IE11的兼容性进行了研究和实验,但由于涉及的复杂性和手头的其他工作的数量,所以被耽搁了下来;最近重新审视IE11的问题时,浏览器和JavaScript已经发生了很大的变化。越来越多的开发人员开始使用现代语言功能,更重要的是,微软自己也开始通过对Edge的投资,积极推动用户远离IE,IE11原创 2021-04-06 21:05:25 · 4745 阅读 · 2 评论 -
vue实现密码显示隐藏、很简单易懂
效果:思路:利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码; 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式; 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标。页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则原创 2021-03-19 18:10:35 · 5339 阅读 · 2 评论 -
Vue中Computed和Watch的用法及其区别
计算属性(computed)我们都知道vue在模板中使用表达式非常便利,比如{{message}};其实vue是支持更复杂的逻辑的,比如{{message+message1+message2}},但vue建议我们使用一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。示例a=1,b=2,c=3要计算a+b+c并展示到页面上写法1: <div id="example"> <p>{{a+b+c}}</p> </div>.原创 2021-03-16 20:37:22 · 1846 阅读 · 6 评论 -
vue中换行符不换行、不生效的处理(\n或者<br>)
先看一段代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span>{{msg}}</span> </d原创 2021-03-10 20:10:46 · 43165 阅读 · 8 评论 -
Vue中文本渲染三种方法 {{}}、v-html、v-text的区别
v-text说明:显示普通文本简写方式:{{}}语法:1:<p v-text="msg"></p>2:<p>{{msg}}</p>实例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> &l原创 2021-03-10 18:46:35 · 3571 阅读 · 0 评论 -
Vue实现省市区三级联动,下拉框,简单易懂
效果图:代码:<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style> </style> </head> <body> <div id="app" > <se原创 2020-12-24 12:02:07 · 8276 阅读 · 10 评论 -
Vue实现2级3级导航(简单易懂)
<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style> </style> </head> <body> <div id="app" > <ul id='one'>.原创 2020-12-24 11:21:44 · 1834 阅读 · 2 评论 -
vue实现标题导航,tab选项卡(一看就会)
效果图:代码:<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style> ul li { margin: 0; padding: 0; list-style: none;原创 2020-12-24 10:51:10 · 2085 阅读 · 0 评论 -
vue添加博客功能、展示博客详情,主要用到表单、双向绑定、v-show、v-for、过滤器filter等
做了一个表单添加的实例,非常适合入门没有花时间去做样式,所以不太好看,效果是这样的:1.用v-model来绑定表单中的各个内容,修改内容后会实时的反映到下面的博客总览中,比如:博客标题:<input type="text" v-model="blog.title" class='input'>作者: <select v-model="blog.author"> <...原创 2020-12-22 13:11:20 · 831 阅读 · 1 评论 -
vue实现登录、注册、退出、跳转等功能,简单实用
效果图1:效果图2:效果图3:效果图4:完整实例:<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style> ul li { margin: 0; padding: 0;原创 2020-12-22 12:06:17 · 9729 阅读 · 31 评论 -
Vue经典实例之走马灯
<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> </head> <body> <div id="app"> <button @click="attack">骑兵连进攻</button> &.原创 2020-12-10 15:39:59 · 1086 阅读 · 2 评论 -
Vue经典实例之数据搜索、数据过滤(简单易懂)
重点:1.搜索框input用到双向绑定v-model2.列表展示用到computed计算属性<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style>* { margin: 0px; padding: 0px;}body { margin: 20px; font-family: Aria.原创 2020-12-11 09:35:26 · 3779 阅读 · 0 评论 -
Vue经典实例之可编辑的表格table(史上最简单方便的处理方式,比用element容易理解),同时处理input获取焦点的问题!不好用你找我
目录重点:另外:(input获得焦点的处理)完整代码如下:欢迎指正!!!重点:1.给td添加双击事件 @dblclick="edit(k,sub_k,$event)" ,此函数的作用是将k,sub_k用下滑线组装起来,并赋值给 editKey。2.td的两个元素:input元素用v-show="editKey===k+'_'+sub_k" (默认是隐藏的);p元素使用v-show="editKey!==k+'_'+sub_k" (默认是显示的)。3.当dblclick 双击.原创 2020-12-10 20:06:07 · 853 阅读 · 1 评论 -
Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色,一看就明白
最主要就是用到属性的绑定 :class<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style> * { margin: 0px; padding: 0px; } body { .原创 2020-12-10 16:25:28 · 4490 阅读 · 2 评论