![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
newbie (⊙o⊙)
这个作者很懒,什么都没留下…
展开
-
uniapp 调用安卓原生插件 安卓原生又调用了第三方sdk(第三方原生开发的aar怎么转成uni可以使用的aar)
uniapp原生第三方插件,怎么给uniapp使用原创 2022-10-12 14:44:53 · 12397 阅读 · 17 评论 -
vue3.0 中的provide和reject使用,$ref,teleport
App.vue<template> <img alt="Vue logo" src="./assets/logo.png"> <modal :isOpen="modalisopen" @close-modal="onCloseModal"> 插槽 </modal> <div id="test"></div> <button @click="openModal" ref="modal">打开模态框原创 2022-03-16 17:15:49 · 1413 阅读 · 0 评论 -
AES 加密解密
// var CryptoJS = require("crypto-js");import CryptoJS from 'crypto-js' // npm安装//解密方法// function Decrypt(word) {// let key = CryptoJS.enc.Utf8.parse("3W4D2aZ6YyEf0Cx5FR<1A{lSLP8oBMvu");// let decrypt = CryptoJS.AES.decrypt(word, key, {//原创 2021-12-21 16:00:12 · 314 阅读 · 0 评论 -
vue3.0中vue-router路由的创建及使用
下载vue-router,一定要注意版本!npm install vue-router@/next --savesrc目录下创建router文件夹,router文件夹下创建index.jsvue3.0下需要引入createRouter, createWebHistory 模块去创建路由createWebHistory 使用history模式import { createRouter, createWebHistory } from 'vue-router'import Home fr..原创 2021-09-02 09:59:50 · 4999 阅读 · 0 评论 -
vue项目问题总结
一,组件切换缓存问题(优化方向),下有下拉框的情况下,用户切换,选择下拉值后,切换回去,在数据没有变的情况下,不应该重新发起请求。可以利用vue computed 计算属性处理数据,将数据缓存下来。数据筛选也可以利用计算属性筛选好,在数据需要做判断在做v-for 渲染时,计算属性可以起到很好的筛选属性,可以利用js 的 filter的筛选方法。二, 在ios 和 Android 下 flex 的flex-flow:column 存在兼容性问题,应使用flex-direction: column三,设原创 2021-07-30 17:46:59 · 83 阅读 · 0 评论 -
父子组件传值,双向绑定
<!-- 父组件 --><template> <div class="audioCate"> <child :show.sync="showModel" @closeModel="handleCloseModel"></child> </div></template><script> import child from './child' export default{ compone原创 2021-07-21 14:23:41 · 135 阅读 · 0 评论 -
避免 v-for 和 v-if 同时使用
<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} </li></ul>`` 可以看到,这里是先遍历(v-for),再判断(v-if),这里有个问题就是:如果你有一万条数据,其中只 有 100 条是isActive状态的,你只希望显示这 100 条,但是实际在渲染时,每一次渲染,这一万条数据 都会被遍历一遍。比如你原创 2021-07-06 10:09:32 · 204 阅读 · 0 评论 -
vue中$nextTick的作用
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。使用时机:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染原创 2021-06-02 20:00:26 · 539 阅读 · 0 评论 -
vue父组件中调用子组件中的方法 及vue父组件调用孙子组件的方法
一:通过ref直接调用子组件的方法;子组件child.vue:<template> <div>我是子组件</div></template><script>export default { methods: { childFun() { console.log('我是子组件的方法'); }, },};</script>父组件:<template> <di原创 2021-06-02 18:51:06 · 6381 阅读 · 0 评论 -
@Provide+@Inject组合使用
@Provide+@Inject组合使用// 组件Aexport default { provide() { return { reload: this.reload; } } methods: { reload() { // 刷新页面的代码。。。 } }}// 组件BCDEFG都可以使用export default { inject: ['rel原创 2021-05-27 13:51:20 · 673 阅读 · 0 评论 -
vue-property-decorator用法
vue-property-decorator用法基础用法@Component@Emit@Inject@Provice@Prop@Watch@Model组件引入@Component<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({ components: { HolleWorld } })原创 2021-05-27 13:48:58 · 666 阅读 · 0 评论 -
vue3 获取当前路由
<script>import {useRouter} from 'vue-router'export default { setup(){ const router = useRouter() //使用 //router.push..... 等等方法 }}</script>原创 2021-05-05 16:26:25 · 2399 阅读 · 0 评论 -
vue3组件自定义事件
emits自定义事件vue3中组件发送的自定义事件需要定义在emits选项中emits.vue<template> <div @click="$emit('my-click')"></div></template><script> export default { // 这里一定要注册,不然会触发两次,原生的点击事件也会触发 emits: ['my-click'] }</script>helloworld.v原创 2021-05-04 17:52:31 · 1252 阅读 · 0 评论 -
vue3 Teleport基础用法
Teleportmodal.vue<template> <div class="hello"> <button @click="modal=true">弹出窗口</button> <teleport to="body"> //传送的就是modal 这个div块 <div v-if="modal" class="modal"> <div> 这里是模态框原创 2021-05-04 17:38:58 · 390 阅读 · 0 评论 -
vuex 页面刷新之后数据消失解决办法
及如何把vuex数据进行本地持久化vuex数据存储于内存,页面刷新会导致数据消失,本地持久化可以解决这个问题,可以使用本地存储sessionStorage或loaclStorage如果需要更保持更长久,浏览器关掉,再打开任然有数据需要使用loaclStoragestate的持久化分别需要在state数据初始化。更新的时候进行读取和设置本地存储操作export default new Vuex.store({ state:{ user:loaclStorage.getItem('user')原创 2021-04-23 17:34:58 · 274 阅读 · 0 评论 -
vue中keep-alive的使用
keep-alive是vue的内置组件,当它包裹动态组件是,会缓存组件实例,不会销毁他们。例如:我们的项目中有很多列表,列表较长,在列表来回切换时,就可以把这个列表缓存上,避免性能消耗,提升用户体验。在组件切换过程中将状态保存在内存中,防止重复渲染DOM,减少加载时间和性能的消耗。生命周期函数1.activated 在keep-alive组件激活时调用该钩子函数在服务器端渲染期间不被调用2.deactivated在keep-alive组件停用时调用被包含在keep-alive中原创 2021-04-23 17:20:32 · 209 阅读 · 0 评论 -
vue配置proxy解决跨域
前台与后台间存在跨域,前端浏览器的问题后台与后台间没有跨域概念解决跨域1.jsonp --使用script的src发送请求 只能get请求2.cors后台设置允许跨域 需要后台设置允许跨域,所有后台语言 都可以设置3.服务器代理现在前端vue框架 是可以自己设置 服务器代理的proxy步奏:1.vue.config.js 可以配置重写webpack2.module.exports = { devServer: { proxy: { // 如果你的地址以/api 开头,它就会请求到原创 2021-04-23 15:40:05 · 241 阅读 · 0 评论 -
vue项目打包成app
原创 2021-04-21 16:57:53 · 186 阅读 · 0 评论 -
vue的那些事儿
computed与watch的区别计算属性computed和监听器watch都可以观察属性的变化从而做出响应不同的是:计算属性computed更多是作为缓存功能的观察者,它可以将一个或者多个data的属性进行复杂的计算生成一个新的值,提供给渲染函数使用,当依赖的属性变化时,computed不会立即重新计算生成新的值,而是先标记为脏数据,当下次computed被获取时候,才会进行重新计算并返回。而监听器watch并不具备缓存性,监听器watch提供一个监听函数,当监听的属性发生变化时,会立即执行该函数。原创 2021-04-19 11:18:45 · 111 阅读 · 0 评论 -
vue响应式原理
Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新,其原理对data的getter/setter方法进行拦截(Object.defineProperty或者Proxy),利用发布订阅的设计模式,在getter方法中进行订阅,在setter方法中发布通知,让所有订阅者完成响应。在响应式系统中,Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者,而监听器watch、计算属性computed、视图渲染template/render三个角色同时作为订阅者,对于监听器watch,会原创 2021-04-19 10:47:14 · 75 阅读 · 0 评论 -
vue hash与history的区别
原创 2021-04-16 17:09:45 · 178 阅读 · 0 评论 -
Vue3数据双向绑定原理learn
function vue(){ this.data = { content:'双向绑定开始' } this.el = document.getElementById('app') this._html = '' this.observe(this.data) this.render()}vue.prototype.observe = function(obj){ var _this = this this.data原创 2021-03-22 11:12:20 · 339 阅读 · 0 评论 -
Vue2数据双向绑定原理learn
function vue(){ this.data = { content:'双向绑定开始' } this.el = document.getElementById('app') this._html = '' this.observe(this.data) this.render()}vue.prototype.observe = function(obj){ var value; var _this = this原创 2021-03-22 11:10:14 · 85 阅读 · 0 评论 -
vue3原型添加方法
```javascriptimport { createApp } from 'vue'import App from './App.vue'import api from './api/api'const app = createApp(App)app.config.globalProperties.$api = apiapp.use(api).mount('#app')原创 2021-03-01 16:35:23 · 2727 阅读 · 1 评论 -
axios网络封装
import axios from 'axios'import qs from 'qs'// 真实情况下可能会分环境// 在webpack 会设置一个环境变量//process.env.NODE_ENV // 在package.json中的script配置// "serve:test": "set NODE_ENV=test&&vue-cli-service serve"//"serve:production": "set NODE_ENV=production&原创 2021-03-01 16:26:08 · 148 阅读 · 0 评论