vue
GGCoder
每天坚持进步一点点~
展开
-
Vue设置屏幕全屏
<template> <div> <button @click="changeFull">切换全屏</button> </div></template><script>export default { name: 'fullScrenn', data() { return { isFull: true } }, methods: { changeFu原创 2021-11-05 23:39:24 · 514 阅读 · 0 评论 -
Vue局部组件数据共享Vue.observable()
随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。创建store对象首先创建一个 store.js,包含一个 store和一个 mutations,分别用来指向数据和处理方法。//store.jsimport Vue from 'vue'原创 2021-06-28 15:43:23 · 330 阅读 · 13 评论 -
取消Vue双击显示编辑状态时的文字选中
在很多情况下我们都会遇到这种情况,input一开始是只读状态,当用户双击的时候我们就可以让用户来修改我们的属性,然后在失去焦点的时候保存数据,并将状态继续保持到只读状态一般我用的状态切换是input中的disabled属性来实现只读的,但是当我们在从只读切换到编辑状态时,我们触发双击事件,但是双击事件他有默认行为(如我你的input中用value的话,他就会默认选中value,并让input失去焦点)解决思路当切换状态的时候,我先吧我input中的value的值设置为空然后在$nextTick中通原创 2021-06-04 15:53:34 · 4433 阅读 · 24 评论 -
vue 按钮权限管理
在很多情况下,程序会根据用户的权限,对按钮的显示和隐藏有一定的限制例如:页面上现在有三个按钮(添加,删除,修改),那现在后端返回的是(当前用户只对增加按钮有权限控制)即其余的按钮选项都不显示情节交代清楚了,接下来我说一下我的思路用户登陆之后就把对按钮的权限控制信息存到vuex中写一个vue的自定义指令,根据指令中传入的信息(操作Dom的显示和隐藏)在组件中注册这个自定义指令,并应用vuex中的代码import Vue from 'vue';import Vuex from 'vu.原创 2021-05-31 16:20:14 · 3857 阅读 · 29 评论 -
CSS让子元素div的高度填满父容器的剩余空间
在写项目中很多时候都会遇到这种情况,在父级中分为上下两个部分,其中头部的header是固定的,那main就要把剩下的区域自适应填充(即减去头部header的高度自适应)对很多人都想到了直接给main设置height为100%不就行了,但是这种方式会让浏览器的滚动条出现,也就是你的高度没有减去顶部header的高度,这种写法是很不友好的试了很多次最终用的是:让头部的header浮动并且让他的width为100%,main的高度还设为100%这样。不说了直接上代码:<template>原创 2021-05-08 17:35:07 · 10478 阅读 · 3 评论 -
Vue基础
Vue入门一、什么是vue?JavaScript的框架框架是不同于向jQuery这样的js库,框架需要遵守它的规则,才能使用二、vue的特点JavaScript框架简化Dom操作响应式数据驱动三、实现第一个vue程序导入vue.js创建vue对象,并设置el属性和data属性使用简洁的模板语法把数据渲染到页面上<head> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdel原创 2020-11-04 16:54:30 · 12575 阅读 · 0 评论 -
2小时入门-Vue
Vue入门一、什么是vue?JavaScript的框架框架是不同于向jQuery这样的js库,框架需要遵守它的规则,才能使用二、vue的特点JavaScript框架简化Dom操作响应式数据驱动三、实现第一个vue程序导入vue.js创建vue对象,并设置el属性和data属性使用简洁的模板语法把数据渲染到页面上<head> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdel原创 2020-09-10 21:00:42 · 12588 阅读 · 10 评论