vue
关注
分享
扫一扫
妙莲
这个作者很懒，什么都没留下…
展开
-
vue面试 写出页面渲染值，并解释为什么？
<template> <div>{{a.b}}</div></template><script>export default { data() { return { a: {} } }, created() { this.a.b = 1 }, mounted() { this.a.b = 2 }}</script>vue3之前1vue3 2解析涉及到两个知识点，一个是vue响应式原原创 2021-06-07 18:09:22 · 136 阅读 · 0 评论 -
vue2迁移vue3
vue2: v-on="$listeners"vue3:v-bind="$attrs"代替过滤器vue2: <p class="font-26 gray">金额{{ detail.money | currency('', 2) }}</p> import * as filters from './util/filter' Object.keys(filters).forEach((k) => Vue.filter(k, filters[k]))vue3.原创 2021-05-12 16:53:43 · 948 阅读 · 0 评论 -
vue 父子组件生命周期执行顺序
加载渲染过程父beforeCreate|父created|父beforeMount|子beforeCreate|子created|子beforeMount|子mounted|父mounted子组件更新过程父beforeUpdate|子beforeUpdate|子updated|父updated销毁过程父beforeDestroy|子beforeDestroy|子destroyed|父destroyed...原创 2021-05-06 18:15:29 · 91 阅读 · 0 评论 -
vue 访问 public 路径里面的内容怎么访问
原创 2021-04-23 15:47:46 · 5213 阅读 · 0 评论 -
vue3 setup emit 不生效 子组件中的值回传给父组件
父组件<Input v-model="val"/>子组件<input v-model="input" /> props: { modelValue: { tppe: [ String | Number], default: '', }, }, setup() { const input = ref('') const clearVal = () => { input.value = '' emit('原创 2021-04-20 17:10:54 · 4138 阅读 · 5 评论 -
vue :src 引入图片的变量不生效怎么解决？
把图片地址里的@/ 拿出来和后面的拼接就可以生效注意图片地址 @/要去掉原创 2021-04-15 15:02:01 · 1187 阅读 · 1 评论 -
vue3在style标签里css用js里的变量
原创 2021-04-15 11:55:13 · 1653 阅读 · 0 评论 -
vue双向绑定原理
原理view的变化能实时让model发生变化，而model的变化也能实时更新到view。vue采用数据劫持&发布-订阅模式的方式，通过es5提供Object.defineProperty()方法来劫持（监控）各属性的getter、setter，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。要实现vue中的双向数据绑定，大致可以划分三个模块：Observer、Compile、W.原创 2021-03-19 09:30:25 · 235 阅读 · 0 评论 -
vue+elementui Table组件splice删除表格总是删除最后一行
原因是没有给table下面的row加key,才导致的问题解决方法：在 el-table 标签里 加一个 row-key 属性<el-table :data="tableData" @cell-dblclick="tableDbEdit" :row-key="getRowKey" style="width: 100%" border> <el-table-column prop="number" label="服务件数"> </el-tabl原创 2021-03-03 10:30:21 · 3316 阅读 · 1 评论 -
为什么选择vue
声明式渲染：VUE的核心就是一个允许采用简洁的模板语法来声明的将数据渲染进DOM系统。响应式数据绑定组件化开发：组件系统是VUE的另一个非常重要的概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。Virtual DOM：减少dom操作，提升数据渲染性能...原创 2021-02-16 14:35:18 · 261 阅读 · 0 评论 -
better-scroll数据动态加载后不能滚动
1.第一个原因可以看看配置probeType是不是定义了this.bs = new Bs('.singer', { probeType: 3, click: true // 这样才能点击，不然点击事件不生效 })```2.第二个原因是数据变化后要用$nextTick()里面执行方法watch: {initSingerList() {this.$nextTick(()=>{this.initBs()})}},...原创 2021-02-10 10:12:03 · 862 阅读 · 1 评论 -
vue-cli3.0 路由是hash模式 跳子路由页面报错 chunk-vendors.js:1 Uncaught SyntaxError: Unexpected token ‘＜‘
1.第一个解决方法是把mode改成history这个问题就会消失2.第二个解决方法是publicPath设置成’/’,不能是’./’原创 2021-02-10 10:03:14 · 2945 阅读 · 1 评论 -
vue-cli 给路径配置别名
vue.config.jsconst path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: (config) => { // 给路径起别名 config.resolve.alias .set('api', resolve('./src/api')) .set('style', reso原创 2021-02-09 15:31:14 · 449 阅读 · 1 评论 -
better-scroll使用方法
npm install better-scroll还有iscroll可以用，但是这里我们用better-scrollbetter-scroll1. 必须有两层，视图层高度必须确定。2. 容器层调试要大于视图层。3. mounted生命周期里做初始化。4. 视图层内部有多个并列的容器，只有第一个有效<template> <div class="recommend"> <div class="view-box"> <ul class原创 2021-02-09 11:44:47 · 572 阅读 · 0 评论 -
vue axios 在main.js公共模块 里引入，不用每个模块都引用的方法
main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import axios from 'axios'Vue.config.productionTip = falseVue.prototype.$axios = axios // 将请求模块挂载到实例模型上new Vue({ router, render: h => h(App)}).$mount('#app'原创 2021-02-07 15:58:13 · 2323 阅读 · 0 评论 -
vue 网络请求报跨域的问题怎么解决？npm run build 打包后图片资源不能访问解决方法？要加publicPath.
参考路径：https://cli.vuejs.org/zh/config/#devserver-proxy创建一个和package.json同级的文件名称为vue.config.jsmodule.exports = { devServer: { proxy: { '/api': { target: 'http://ustbhuangyi.com/', // 目标服务器 changeOrigin: true, // 是否改变这个源 p原创 2021-02-07 15:42:18 · 791 阅读 · 0 评论 -
vue 引入图片的使用方式
public使用根路径，字符串和变量都行其他文件夹使用的是相对路径，字符串没问题如果是变量必须用import引入图片<template> <div class="my-header"> <!-- public下面的图片直接写/根路径 --> <img src="/favicon.ico" alt=""> <!-- public下的变量可以生效 --> <img :src="imgUrl1" alt原创 2021-02-07 12:32:26 · 1143 阅读 · 0 评论 -
vue 路由介绍
what根据地址栏的改变控制组件的切换原理：1.监听地址栏的改变2.根据地址栏的变化匹配路由表渲染不同的组件安装路由模块npm install vue-router控制地址栏改变是一个容器 来渲染组件配置路由表1.引入 vue2.引入 路由3.在 vue 中使用路由4.创建路由对象5.抛出路由实例里注册路由 src/router/index.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(R原创 2021-02-05 15:24:15 · 113 阅读 · 0 评论 -
vue-cli构建一个项目
sudo npm install -g @vue/clivue --version 查看是不是安装成功sudo npm install -g @vue/cli-service-globalvue create hello-world 创建项目cd hello-worldnpm run serve 启动项目原创 2021-02-05 14:04:29 · 79 阅读 · 0 评论 -
vue动态组件切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-05 14:01:45 · 291 阅读 · 0 评论 -
vue SPA优点和缺点
SPA 单页web应用优点：1.页面切换刘畅 组件之间的切换2.组件开发 组件复用可以提高效率缺点：1.首屏加载过慢2.seo优化不好MPA 多页面应用原创 2021-02-05 13:39:39 · 484 阅读 · 0 评论 -
vue cli 脚手架项目目录
public 静态资源src 源码目录src/main.js vue项目的入口文件src/App.vue 单文件组件 xxx.vue就是一个单文件组件.xxx 插件配置文件.gitnore git上传的忽略文件dis 编译打包后文件目录指令npm run serve 本地开发环境启动npm run build 编译打包 后会产生dist文件 文件里面的路径是绝对路径，如果想在本地打开要做修改成相对路径...原创 2021-02-05 13:31:48 · 142 阅读 · 1 评论 -
vue 计算属性 computed
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-05 11:43:16 · 73 阅读 · 0 评论 -
vue watch
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-05 11:34:54 · 87 阅读 · 0 评论 -
vue过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-05 11:22:48 · 76 阅读 · 0 评论 -
vue swiper不滚动 解决方法 $nextTick
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-05 10:51:40 · 1684 阅读 · 0 评论 -
vue 生命周期每个阶段都能做什么？
钩子函数是在某个时间点自动执行的函数beforeCreated -> 创建(created)beforeMounted -> 挂载(mounted)beforeUpdated -> 更新(updated)beforeDestroy -> 销毁(destroy)研究的5个方向：this 数据 dom 能干啥 不能干啥ios10 以下不支持 swiper3 以上beforeCreate 可以数据请求created 可以数据请求 可以修改数据beforeMo原创 2021-02-05 09:47:42 · 2841 阅读 · 0 评论 -
vue生命周期_销毁
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/v..原创 2021-02-04 18:33:40 · 637 阅读 · 0 评论 -
vue 生命周期_更新
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-04 18:06:42 · 341 阅读 · 0 评论 -
vue生命周期_挂载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-04 18:03:11 · 165 阅读 · 0 评论 -
vue生命周期_创建
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-04 17:59:18 · 198 阅读 · 0 评论 -
vue 父子组件之间传值 todolist
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-04 16:56:56 · 276 阅读 · 0 评论 -
vue 远房兄弟组件之间传值 事件总线(busevent)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-03 17:33:48 · 597 阅读 · 0 评论 -
vue新兄弟组件之间传值 emit
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-03 17:13:19 · 194 阅读 · 0 评论 -
vue子组件控制父组件数据 emit
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-03 16:10:39 · 206 阅读 · 0 评论 -
vue子组件控制父组件的数据props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.原创 2021-02-03 15:29:03 · 219 阅读 · 0 评论 -
vue 父元素给子元素传数据 props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/v..原创 2021-02-03 14:35:51 · 910 阅读 · 0 评论