vue
喜欢白朴
简简单单的内向程序猿
展开
-
树状图溢出分省略号显示,鼠标移入展示数据
【代码】tree 溢出分隐藏,鼠标移入省略号显示。原创 2022-10-12 15:33:46 · 432 阅读 · 1 评论 -
websocket 封装在vue中使用
在vue中使用websocket实现数据实时更新的大屏可视化原创 2022-09-08 17:48:21 · 618 阅读 · 0 评论 -
鼠标移动出现小手与溢出部分以省略号显示
1、鼠标移动显示小手只需要在需要的标签内添加 `cursor: pointer` 这个属性就行了2、以省略号显示首先,我们需要给标签定宽<style> p{ width: 63px; // 定宽 overflow: hidden; // 溢出部分隐藏 white-space:nowrap; // 有些标签会自动换行,这个是禁止自动换行 text-overflow:ellipsis; // 使溢出部分以省略号显示,原创 2022-04-11 15:30:09 · 733 阅读 · 0 评论 -
vue中的prop
propprop一般用于父组件向子组件进行单向通信(父向子传值),传递的可以是一个对象,也可以是一个数组。prop是数组的话会有默认的数据类型,是对象的话可以设置数据类型,是否必传等prop 是在父传子时形成一个单向下行绑定,意思是父级的更新会向下流动到子组件中,但是反过来则不行。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。props验证<test-prop-validate :prop-a="1" :pro原创 2022-02-22 14:59:44 · 15371 阅读 · 0 评论 -
v-for中的key值
key 是什么简单来说key是给每一个vnode的唯一id,同时也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点详细来说的话1.vue中使用for循环的话要加上:key 他的值是唯一的标识,这个唯一标识最好是item的id。因为vue组件高度复用的原因,增加key可以标识组件的唯一性,也是为了更好的区分个别组件,key的作用主要是为了更高效的更新虚拟DOM。2.key主要是做DOM diff算法用的,diff算法是同级进行比较,比较当前标签上的key还有他当前原创 2022-02-16 20:07:05 · 3939 阅读 · 1 评论 -
vue自定义过滤器
filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// filter是过滤器的名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })局部过滤器(组件过滤器)全局过滤.原创 2022-02-14 21:24:12 · 581 阅读 · 0 评论 -
vue路由,路由传参
路由的基本用法第一步 安装路由npm install vue-router --save在min.js中引入//Vue路由:引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由:引入并创建组件import Home from './components/Home.vue'import List './components/List.vue'import HelloWorld from './components/H原创 2022-02-14 21:17:10 · 78 阅读 · 0 评论 -
vue修饰符
一、事件的修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.p原创 2022-02-13 20:58:38 · 75 阅读 · 0 评论 -
watch深度监听
watch的作用watch它可以让我们深度监听一个值的变化,从而做出相对的反应 <div id="app"> 用户名:<input type="text" v-model='name'> <p>你的名字是:{{name}}</p> </div> <!-- 引入vue --> <script src="/node_modules/vue/dist/vue.js">原创 2022-02-10 21:23:58 · 3717 阅读 · 2 评论 -
vuex辅助函数、模块化管理
1、vuex的辅助函数辅助函数分别有mapState 在computed中使用 使用方式:…mapState([""])mapGetters 在computed中使用 使用方式:…mapGetters([""])mapMutations 在methods中使用 使用方式:…mapMutations([""])mapActions 在methods中使用 使用方式:…mapActions([""])使用前需要先引入import { mapAc原创 2022-02-09 20:05:00 · 285 阅读 · 0 评论 -
浏览器的回流、重绘
1、回流当页面中的尺寸,布局,显示隐藏等改变时需要重新构建页面,就会引起回流2、重绘当页面中元素属性发生改变,而这些属性只是影响外观,风格,不会影响布比如background-color局。就叫称为重绘。3、区别**回流必将引起重绘,而重绘不一定会引起回流。**比如:只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变...原创 2022-02-07 20:46:03 · 364 阅读 · 0 评论 -
vue 虚拟dom 和diff算法
虚拟DOM虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象,因为他不是真实dom,所以才叫虚拟dom。为什么要使用虚拟DOM创建真实DOM成本比较高,而如果用js对象来描述一个dom节点,成本比较低,另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。diff算法diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。特点:比较只会在同层级进行, 不会跨层原创 2022-02-07 20:31:00 · 582 阅读 · 0 评论 -
Vue的双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体是:1、 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化2、 compile(模板解析器)解析模板指令,将模板中的变量替换成数据,然后初始.原创 2022-02-07 19:10:20 · 180 阅读 · 0 评论 -
v if与v show的区别
1、区别v-if:是控制整个DOM元素的删除和添加v-show:是控制DOM 的显示隐藏为DOM元素添加css的display:none 或者移除display:nonev-if有更高的切换消耗;v-show有更高的初始渲染消耗2、相同点都可以动态控制着dom元素的显示隐藏3、使用场景v-if适合在切换量少的情况v-show适合用在频繁切换;...原创 2022-02-07 18:47:18 · 159 阅读 · 0 评论 -
组件的data为何必须是一个函数
在vue组件中的data只能是一个函数,如果定义为对象就会警告意思是 :返回的data应该是一个函数在每一个组件实例中但是在实例中data既可以是对象,也可以说函数const arr= new Vue({ el:"#app", // 函数格式 data(){ return { app:"app" } }, // 对象格式 data:{ app:"app" } vu.原创 2022-02-07 16:56:22 · 365 阅读 · 0 评论 -
vue自定义指令
vue自定义指令vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字(不需要写上v-前缀),第二个参数可以是对象数据。// 注册一个全局自定义指令 `v-focalize`Vue.directive('focalize', { // 当被绑定的元素插入原创 2022-02-07 09:06:11 · 74 阅读 · 0 评论 -
Vue组件通信
一、父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告)父组件parent.vue代码如下: <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->原创 2022-02-07 08:24:15 · 61 阅读 · 0 评论 -
vue生命周期
生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为三个阶段,挂载阶段,更新阶段,销毁阶段分别有:创建前:beforeCreate() 只有一些实例本身的事件和生命周期函数创建后:Created() 是最早使用data和methods中数据的钩子函数挂载前:beforeMount() 指令已经解析完毕,内存中已经生成dom树挂载后:Mounted() dom渲染完毕页面和内存的数据已经同步更新前:beforeUptate() 当data的数据发生改变会执行这个钩子,内存中的数据是新的原创 2022-02-07 07:55:37 · 64 阅读 · 0 评论 -
vue常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作用原创 2022-01-28 10:30:01 · 47 阅读 · 0 评论 -
JS 作用域、自由变量
作用域:指的是变量可以使用的范围分为:全局作用域函数作用域块级作用域 (ES6新增)全局作用域直接编写在script标签之中的js代码,都是全局作用域。在全局作用域中有一个全局对象window (代表的是一个浏览器的窗口,有浏览器创建),可以直接使用。js中首先有一个最外层的作用域,全局作用域;js中可以通过函数来创建一个独立作用域称为函数作用域,函数可以嵌套,所以作用域也可以嵌套;es6中新增了块级作用域(大括号,比如:if{},for(){},while(){}…); .原创 2022-01-14 19:05:38 · 164 阅读 · 0 评论 -
vue路由守卫
我们都知道vue的路由守卫有全局路由守卫单个独享路由守卫中间路由守卫在平时我们一般主要使用的都是全局的路由守卫,他里边有全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫首先我们注册一个全局前置守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ..原创 2022-01-12 20:17:48 · 153 阅读 · 0 评论 -
vuex 用法
vuex 是什么vuex 是一个集中式的状态管理工具,通过vuex我们可以解决组件之间数据共享问题,后期也方便我们管理以及维护。介绍import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // 存放数据源 state: {}, // 唯一修改state的地方 mutations: {}, // 执行异步操作 actions: {},原创 2022-01-06 21:16:19 · 424 阅读 · 0 评论 -
点击返回顶部
首先我们要获取页面的dom元素可以通过 ref 获取给大盒子 绑定ref 属性 ref="home" //获取整个盒子 this.$refs.home<span class="hui" v-show="huiShow" @click="huiTop">回到顶部</span>//挂载后 dom渲染完毕页面和内存的数据已经同步 mounted() { console.log(this.$refs.home); // addEventListe原创 2022-01-04 21:13:27 · 347 阅读 · 0 评论 -
axios 的封装
axios 的封装使用在src目录下创建utils文件夹,里面创建一个http.js文件,文件内容如下import axios from 'axios'import { Toast } from 'vant';// 实例化一个axios对象let http = axios.create({ // 路径 baseURL:process.env.VUE_APP_BASE_URL, // 延迟时间 timeout:5000, withDirectives:true原创 2022-01-03 21:28:54 · 383 阅读 · 0 评论 -
多环境变量
配置多环境变量首先在package.json 里的 scripts 配置 serve test build,通过 --mode xxx 来执行不同环境"scripts": { "serve": "vue-cli-service serve --open", //testing 是可以自己定义的 "test": "vue-cli-service build --mode testing", "build": "vue-cli-service build",}然后在项目根目录中新建原创 2021-12-30 16:24:00 · 82 阅读 · 0 评论 -
跨域解决方法
跨域问题当你出现这个报错时,就代表你需要解决跨域,因为你请求的数据被浏览器拦截了,并不是没有请求成功。报错原因浏览器基于安全考虑而引入的同源策略当协议+域名+端口三者都相同时,才不会产生跨域问题,即同源。如何解决在根目录下新建vue.config.js文件module.exports = { devServer: { proxy: { "/api": { // 1 目标路径 /原创 2021-12-30 15:38:35 · 395 阅读 · 0 评论