Vue.js
文章平均质量分 85
c.
这个作者很懒,什么都没留下…
展开
-
基于Vue和Element-UI自定义分组以及分组全选Select 选择器
文章目录基于Vue和Element-UI自定义分组以及分组全选Select 选择器源代码基于Vue和Element-UI自定义分组以及分组全选Select 选择器上一篇博文我们已经实现了基于Vue和Element-UI中Select 选择器的分组全选以及样式修改问题, 但是在分组方面我们是用了element-ui 自带的使用el-option-group对备选项进行分组,它的label属性为分组名的功能,但是出来的效果样式很难自定义,就算是魔改element的样式也有一些改不了的。比如我们的需求就是需原创 2022-03-31 14:14:18 · 3311 阅读 · 0 评论 -
基于Vue和Element-UI中Select 选择器的分组全选以及样式修改问题
文章目录基于Vue和Element-UI中Select 选择器的分组全选以及样式修改问题Select选择器分组Select选择器分组加全选Select 选择器的样式修改问题参考基于Vue和Element-UI中Select 选择器的分组全选以及样式修改问题首先我们来看看最终表现出来的效果图本人前端写的比较少,因为有需求是需要做到如上图所示的效果,所以特意研究了一下。Select选择器分组关于el-select 选择器分组这个,在element-ui的官网也给出了简单的demo了,所以本博文也是基原创 2022-03-29 16:00:06 · 5700 阅读 · 0 评论 -
使用socket.io实现强制踢出其他在线账号
文章目录使用socket.io实现强制踢出其他在线账号Node使用`socket.io`Vue使用`vue-socket.io`参考使用socket.io实现强制踢出其他在线账号因为自己学习写的node项目需要这么一个功能,就是同一个账号只能在一个浏览器登录,如果有多个浏览器登录了同一个账号,那么在登陆的时候就会提示是否踢出其他在线用户,如果点击确认就会强制踢出其他在线账号。这里后端使用到了node.js, 前端使用到了vue。当然我这里只是给出了我自己的一个简单实现,其实无外乎都是推送给前台客户端告诉原创 2022-02-08 17:59:49 · 1500 阅读 · 0 评论 -
Vue.js 的watch属性的使用和computed计算属性的使用
文章目录`watch`属性的使用`computed`计算属性的使用`watch`、`computed`和`methods`之间的对比watch属性的使用考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)用以前的知识如何实现???<!DOCTYPE html><html lang="en">&am原创 2019-02-25 21:52:02 · 456 阅读 · 0 评论 -
Vue.js 命名视图实现经典布局
命名视图实现经典布局标签代码结构:<div id="app"> <router-view></router-view> <div class="content"> <router-view name=&am原创 2019-02-25 09:47:45 · 1565 阅读 · 2 评论 -
Vue.js 使用children属性实现路由嵌套
使用 children 属性实现路由嵌套 <div id="app"> <router-link to="/account">Account</router-link> <ro原创 2019-02-24 22:17:12 · 8202 阅读 · 0 评论 -
Vue.js 在路由规则中定义参数和传参方式
在路由规则中定义参数在规则中定义参数:{ path: '/register/:id', component: register }通过 this.$route.params来获取路由中的参数:var register = Vue.extend({ template: '<h1>注册组件 --- {{this.$route.params.id}}</h...原创 2019-02-24 22:12:28 · 3103 阅读 · 0 评论 -
Vue.js 路由的基本使用
什么是路由后端路由对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由...原创 2019-02-24 22:09:57 · 308 阅读 · 0 评论 -
Vue.js 使用$refs来获取元素和组件
使用 this.$refs 来获取元素和组件 <div id="app"> <div> <input type="button" value="获取元素内容" @click="getElement" />原创 2019-02-24 22:02:39 · 11211 阅读 · 0 评论 -
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据<script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components...原创 2019-02-24 21:58:11 · 14236 阅读 · 0 评论 -
Vue.js 组件切换的方式
文章目录使用`flag`标识符结合`v-if`和`v-else`切换组件使用`:is`属性来切换不同的子组件组件切换动画使用flag标识符结合v-if和v-else切换组件页面结构:<div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <my-c原创 2019-02-24 21:47:39 · 4433 阅读 · 3 评论 -
Vue组件中展示数据和响应事件
组件中展示数据和响应事件在组件中,data需要被定义为一个方法,例如:Vue.component('account', { template: '#tmpl', data() { return { msg: '大家好!' } }, methods:{ login(){ ...原创 2019-02-24 17:23:35 · 1407 阅读 · 0 评论 -
Vue.js 创建Vue组件的方式
文章目录定义Vue组件全局组件定义的三种方式定义实例内部私有组件定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前...原创 2019-02-24 17:10:12 · 4173 阅读 · 3 评论 -
Vue.js中的动画
文章目录[Vue中的动画](https://cn.vuejs.org/v2/guide/transitions.html)使用过渡类名修改v-前缀[使用第三方 CSS 动画库](https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡类名)使用动画钩子函数使用钩子函数模拟小球半场动画[v-for 的列表过渡](https://cn.vuejs.org...原创 2019-02-24 15:23:44 · 3848 阅读 · 0 评论 -
vue-resource 实现 get, post, jsonp请求
vue-resource 实现 get, post, jsonp请求除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求。ps:现在不推荐使用vue-resource,只是作为学习。之前的学习中,如何发起数据请求?常见的数据请求类型? get post jsonp测试的URL请求资源地址:get请求地址: http://vue.study...原创 2019-02-24 15:04:49 · 2796 阅读 · 3 评论 -
vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性crea...原创 2019-02-21 22:29:13 · 266 阅读 · 0 评论 -
Vue.js 键盘修饰符以及自定义键盘修饰符
键盘修饰符以及自定义键盘修饰符1.x中自定义键盘修饰符【了解即可】Vue.directive('on').keyCodes.f2 = 113;2.x中自定义键盘修饰符通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:Vue.config.keyCodes.f2 = 113;使用自定义的按键修饰符:<input type=...原创 2019-02-20 22:56:30 · 670 阅读 · 0 评论 -
Vue.js 过滤器
过滤器概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;过滤器的基本使用&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &am原创 2019-02-20 22:47:51 · 2618 阅读 · 0 评论 -
Vue.js 指令v-for和v-if和v-show
Vue指令之v-for和key属性迭代数组&amp;amp;amp;lt;ul&amp;amp;amp;gt; &amp;amp;amp;lt;li v-for=&amp;amp;quot;(item, i) in list&amp;amp;quot;&amp;amp;amp;gt;索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}&am原创 2019-02-19 23:03:11 · 8756 阅读 · 0 评论 -
Vue.js 中使用样式
文章目录在Vue中使用样式使用class样式使用内联样式源代码在Vue中使用样式使用class样式数组<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>数组中使用三元表达式<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1...原创 2019-02-18 22:54:57 · 1774 阅读 · 0 评论 -
Vue.js 双向数据绑定
Vue指令之v-model和双向数据绑定&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&am原创 2019-02-18 22:23:18 · 320 阅读 · 0 评论 -
Vue.js 基本语法
文章目录Vue之 - `基本的代码结构`和`插值表达式`Vue之 `v-cloak`Vue指令之`v-text`和`v-html`Vue指令之`v-bind`的三种用法Vue指令之`v-on`跑马灯效果Vue指令之`v-on的缩写`和`事件修饰符`使用`.stop` 阻止冒泡使用`.capture` 实现捕获触发事件的机制使用 `.prevent `阻止默认行为使用 `.self` 实现只有点击...原创 2019-02-18 21:58:18 · 1429 阅读 · 0 评论 -
Vue.js 基本简介和初学入门
什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,...原创 2019-02-17 17:04:53 · 305 阅读 · 0 评论