精华内容
下载资源
问答
  • Vue两种暴露方法
    2022-03-05 15:35:43

    1.默认暴露

    	export default {
    	name:'Student',
    	data() {
    		return {
    		...
    		}
    	},
    	methods: {
    	}
    }
     //	引入方式:
     import student from '上面代码所处文件路径'
    

    2.分别暴露

    export const mixIn={
    }
    
    //引入方式
    import {mixIn} from '上面代码所处文件路径'
    
    更多相关内容
  • Vue暴露的属性和方法

    千次阅读 2021-07-22 22:40:33
    Vue暴露 一些属性和方法 Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀 $,以便与用户定义的属性区分开来。例如: <script> const data = { a: 1...

    Vue暴露 一些属性和方法

    Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀 $,以便与用户定义的属性区分开来。例如:

    <script>
        const data = { a: 1 }
        const vm = new Vue({
          el: '#example',
          data: data
        })
    
        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true
        vm.$attrs   // 用户获取父组件传递给子组件的属性,(除props,class,style外)
        vm.$data    // vm 上的数据
        vm.$watch   // 监听
        vm.$el      // 当前el元素
        vm.$set     // 后加的属性实现响应式
        vm.$options // vm 配置 上的 所有属性
        vm.$nextTick(()=>{})   // 异步方法,等待渲染dom完成后来获取vm
        vm.$refs     // 获取dom元素或者组件实例的引用
    </script>
    

    Vue 操作DOM元素

    虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作,那么该如何处理呢,

    操作DOM元素:

    1. 在需要操作的DOM元素中使用ref属性,
    2. ref属性的值是自己随便定义的名字
    3. 通过Vue实例的$refs属性获取操作dom元素
    <template>
        <div id="app">
            <div ref="wuwei">无为</div>
        </div>
    </template>
    <script>
        var vm = new Vue({   // 根实例
            el: '#app',
            data: {
            },
            mounted() {
               //dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个
                // 如果是循环出来的,可以获取多个,获取的是一个数组
                console.log(this.$refs.wuwei)
            }
        });
    </script>
    

    关于示例中$refs属性的解释:

    1. 因为可以在多个DOM元素上使用ref.
    2. 所以$refs属性获取的是所有具有ref属性的DOM元素的集.
    3. 因此要想操作确定的DOM元素就需要在通过当初的ref值获取.

    简而言之: 就是ref在dom元素上通过 this.$refs.自定义名字 是获取dom元素

    当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行操作

    注意:Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

    展开全文
  • 1、将同一类型的组件放在一个文件夹下2、在此文件夹下创建一个index.js3、在index.js中导入组件,并把他们暴露出去1、写法一import studentcourse1 from './studentcourse.vue'import studentinfo1 from './...

    1、将同一类型的组件放在一个文件夹下

    2、在此文件夹下创建一个index.js

    3、在index.js中导入组件,并把他们暴露出去

    1、写法一

    import studentcourse1 from './studentcourse.vue'

    import studentinfo1 from './studentinfo.vue'

    export var studentcourse=studentcourse1

    export var studentinfo=studentinfo1

    2、写法二

    export var studentcourse=()=>import('./studentcourse.vue')

    export var studentinfo=()=>import('./studentinfo.vue')

    //export var studentinfo=()=>{

    return import('./studentinfo.vue')

    }

    4、最后在.vue文件中使用组件

    此处你只需引入index.js所在文件夹就行啦

    import {studentcourse,studentinfo} from './components/stucom'

    export default{

    components:{

    'studentcourse':studentcourse,

    'studentinfo':studentinfo

    }

    }

    1、将.js放在同一个文件夹下

    2、同样一定要有一个index.js文件

    3、 index.js文件内容如下

    import auth from './auth.js'

    import error from './error-log.js'

    export default{

    auth,

    error

    }

    4、在main.js中

    import utils from './utils'

    vue.use(utils.auth,{params})

    补充知识:vue项目中将方法名暴露给app端调用

    只需要将methods中的方法赋值到window对象即可

    created() {

    window.getparams = this.getparams

    },

    methods: {

    getparams(params) {

    this.id = params.id

    // ...

    },

    }

    也可以赋值给window对象中的某个对象

    以上这篇vue组件暴露和.js文件暴露接口操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。

    如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

    展开全文
  • 默认暴露实际暴露的内容: { default: 1 } 当你 import result from ‘./xxx’ 引入时 实际相当于 import { default as result } from ‘./xxx’ 写法 import result from "./test/es-module/test1";

    ES6暴露

    export { default as login } from "./acl/login"; // {default: {}}
    export { default as user } from "./acl/user";
    export { default as role } from "./acl/role";
    export { default as permission } from "./acl/permission";
    export { default as category } from "./category";
    export { default as clientUser } from "./clientUser";
    // 1. 引入默认暴露的内容重命名为order
    // 2. 将order给分别暴露出去
    export { default as order } from "./order";
    export { default as trademark } from "./product/trademark";
    
    // import { default as order } from './order' // 完整引入
    // import order from './order' // 完整引入的简写
    // export order;
    
    /*
      {
        login: { login() {}... },
        user,
        role,
        permission,
        category,
        clientUser,
        order,
        trademark
      }
    */
    

    两种特殊引入介绍

    //当你 import result from './xxx' 引入时
    //实际相当于 import { default as result } from './xxx' 写法
    
    import result from "./test/es-module/test1";
    import { default as result } from "./test/es-module/test1";
    
    // 引入所有重命名为result
    import * as result from "./test/es-module/test1";
    

    默认导出

    /* 默认导出,只能有一个 */
    const a = 1;
    // const b = 2;
    export default a;
    // export default b
    

    默认暴露实际暴露的内容:
    {
    default: 1
    }
    当你 import result from ‘./xxx’ 引入时
    实际相当于 import { default as result } from ‘./xxx’ 写法

    import result from "./test/es-module/test1";
    import { default as result } from "./test/es-module/test1";
    console.log(result);
    

    在这里插入图片描述

    // 引入所有重命名为result
    import * as result from "./test/es-module/test1";
    console.log(result);
    

    在这里插入图片描述

    • 若果暴露多个
      在这里插入图片描述
      在这里插入图片描述

    分别导出

    /* 分别导出,可以有多个 */
    export const c = 4;
    export const d = 5;
    
    import { c, d } from "./test/es-module/test1";
    console.log(c, d);
    // 引入所有重命名为result
    import * as result from "./test/es-module/test1";
    console.log(result);
    

    分别暴露实际暴露的内容:
    {
    b: 2,
    c: 3
    }

    默认暴露和分别暴露可以共存
    {
    b: 2,
    c: 3,
    default: 1
    }
    在这里插入图片描述

    统一暴露

    /* 统一暴露 */
    const e = 6;
    const f = 7;
    export { e, f };
    
    import { e, f } from "./test/es-module/test1";
    console.log(e, f);
    import * as result from "./test/es-module/test1";
    console.log(result);
    

    在这里插入图片描述
    在这里插入图片描述

    深度选择器

      lang="less"
        完整写法
        深度选择器 /deep/
      lang="sass"
        可以省略 {}
        可以省略 ;
        深度选择器 /deep/  >>>
      lang="scss"
        完整写法
    
      lang="stylus"
        可以省略 {}
        可以省略 :
        可以省略 ;
    
      scoped
        让样式只在当前组件生效
        问题:加上scoped,会让设置的子组件样式失效
        解决:使用深度选择器
    

    添加scoped以后样式失效

    <style lang="sass" scoped>
    

    >>>

    <style lang="sass" scoped>
    >>>.trademark-table
      margin: 20px 0
    >>>.trademark-image
      width: 100px
    >>>.trademark-pagination
      text-align: right
    >>>.el-pagination__sizes
      margin-left: 250px
    </style>
    

    /deep/

    <style lang="sass" scoped>
    /deep/.trademark-table
      margin: 20px 0
    /deep/.trademark-image
      width: 100px
    /deep/.trademark-pagination
      text-align: right
    /deep/.el-pagination__sizes
      margin-left: 250px
    </style>
    

    .sync/scope/$event

    .sync

      :count="count"
      v-bind:count="count" //单向数据流 / 强制绑定数据
        //子组件只能读取不能修改
        //问题:子组件需要修改数据
        //解决:数据源在哪,更新数据的方法就定义在哪
    
      :count.sync="count" //给子组件传递xxx数据以及更新数据的方法update:xxx
        //相当于:
          :count="count" @update:count="xxx"
    
        .sync用于父子通信(子向父)
     -->
    <Test :count="count" :updateCount="updateCount" /> 
     <Test :count.sync="count" /> 
    

    scope

    scope代表所有数据
    scope.row 代表当前行所有数据
    

    $event

    :page-size.sync="limit"   //可以让limit更新变成同步更新
      :current-page.sync="page" //可以让page更新变成同步更新
    
      $event
        1.DOM事件中代表 event
        <button @click="handle(123, $event)"></button>
       // 触发事件是浏览器的行为,所以$event代表event
    
        2. 在自定义事件中代表 第一个参数
          <button @aaa="handle($event)"></button>
          假设这样触发自定义事件: this.$emit('aaa', 123, 456);
          那么$event就为123(第一个参数)
    

    src图片

    //前提允许跨域
       action="http://182.92.128.115/admin/product/fileUpload"
       目标服务器地址: 代理配置中 (vue.config.js)
    
    //不允许跨域,就使用proxy
       action="/dev-api/admin/product/fileUpload"
       /dev-api -> request.js 代理
      在main.js中定义 Vue.prototype.$BASE_API = process.env.VUE_APP_BASE_API
    
    :action="`${$BASE_API}/admin/product/fileUpload`"
    

    错误解决

    input无法自动聚焦

    Autofocus processing was blocked because a document's URL has a fragment '#/product/attr/list'.
    // input
    autofocus
    ref="attrInput"
    
    // span
    edit(row) {
      // 设置属性,让其确认显示哪个,手动聚焦
      this.$set(row, "edit", true);
      this.$nextTick(() => {
        this.$refs.attrInput.focus();
      });
    },
    

    keyup.enter无法使用

             事件修饰符:
    
                .native
                专门给组件绑定事件使用的
                会给组件中的第一个标签绑定相应的原生DOM事件
    
     @keyup.enter.native="row.edit = false"
    

    响应式数据

    直接给对象添加新属性不是响应式数据, 通过this.$set添加的属性才是响应式

    this.$set(row, "edit", true);
    

    深度克隆

    // 深度克隆:防止对象中对象还存在引用关系
    this.attr = JSON.parse(JSON.stringify(attr));
    

    效验与自定义效验

     // 效验
     rules: {
       spuName: [
         { required: true, message: "请输入SPU名称", trigger: "blur" },
       ],
       tmId: [{ required: true, message: "请选择品牌名称" }],
       description: [{ required: true, message: "请输入品牌描述" }],
       spuImage: [{ validator: this.spuImageValidator, required: true }],
       sale: [{ validator: this.saleValidator, required: true }],
     },
    
        // 属性选择效验
        saleValidator(rule, value, callback) {
          if (this.spuSaleAttr.length === 0) {
            callback(new Error("请至少选择一个销售属性"));
            return;
          }
    
          const res = this.spuSaleAttr.some(
            (item) => item.spuSaleAttrValueList.length === 0
          );
    
          if (res) {
            callback(new Error("请至少选择一个销售属性名称"));
            return;
          }
    
          callback();
        },
    

    权限管理

    功能介绍

    • 菜单管理

      • 设置用户可以访问的所有路由菜单和相应的按钮权限
    • 角色管理

      • 设置角色的访问权限(路由权限和按钮权限)
    • 用户管理

      • 给创建的用户绑定上某个角色(就会拥有这个角色的权限)

    使用某个用户登录,只能访问这个用户对应角色拥有的权限路由和权限按钮

    原理实现

    1. 路由权限
    • 在全局路由前置守卫完成的
    • 首先从 vuex 中取出 token,判断是否有 token
      • 有(代表用户之前登录过)

        • 优化:取出用户数据判断是否存在
          • 存在说明之前登录成功过且数据没问题,直接放行
          • 不存在,说明之前没有登录成功过,需要进行下面步骤
        • 需要验证 token 是否有效(是否是真实 token 且没有过期)
        • 通过发送请求请求用户数据,此时在拦截器中请求头会携带上了 token,后台会自动进行验证 token 的有效性(try catch)
        • 有效
          • 得到了用户数据(其中包含了按钮权限数据和菜单权限数据)
          • 菜单权限数据需要处理组件,组件需要使用真正的组件,使用递归遍历处理所有菜单
          • 通过 router.addRoutes(),来动态添加路由,从而路由生效
            • 一上来路由中只有登录、404、首页等路由配置,其他都没有,所以一上来用户只能访问这些页面
            • 一旦动态添加路由,用户访问的路由就更多了,从而实现路由的权限控制
          • 跳转到 to.path
        • 失效
          • 清空 token,跳转到登录页面
      • 没有(代表用户之前没有登录过)

        • 判断要去路由路径(to.path)是否是 login
          • 是 调用 next()放行
          • 不是 调用 next({ path: ‘/login’ })强行跳转到 login
            • 有一个对用户体验更好的小功能 - 重定向
              • 跳转到 login 时加上一个 query 参数 redirect,值为 to.path
              • 当将来登录成功时,会拿到 redirect 进行跳转,而不是首页
    1. 按钮权限
    • 在全局路由前置守卫获取用户数据的时候,同时也获取到了按钮权限列表,存在了 vuex 中
    • 按钮权限列表就是一个数组。数组有 n 个按钮的权限值(字符串、id)
    • 每一个路由组件的功能按钮也会有自己的权限值
    • 判断路由组件的功能按钮的权限值在不在请求回来按钮权限列表中
      • 在说明有权限。通过 v-if 来显示
      • 不在说明没有权限。通过 v-if 来隐藏
    • 从而实现按钮权限控制
    • 优化:因为很多按钮都有相同的判断,设计一个公共判断的方法 hasBtnPermission,挂载到 Vue 的原型上,从而所有组件实例都可以复用

    理解区别2组业务概念

    SPU与SKU

      SPU: 某个商品所有相关信息的集合, 包括所有可选择的图片, 可选择的平台属性与销售属性
      SKU: SPU下确定了图片列表/平台属性与销售属性数据的信息集合, 商品唯一标识
      关系: 一个SPU下可以对应多个SKU
    

    平台属性与销售属性

      平台属性: 用于(出现)商品搜索的商品描述信息, 包含属性名与一系列的属性值
      销售属性: 出现在商品详情界面的商品描述信息, 包含属性名与一系列的属性值
    

    作用域样式与深度样式选择器

    	不声明scoped, 样式是全局的, 可以匹配影响所有的组件
    	声明scoped, 就不会影响到子组件内部样式(根标签除外)
    			标签的变化:
    				当前组件的所有标签都增加一个data自定义属性: data-v-2e8d0da5 => 用来标识当前组件的
    				子组件的根标签也会有此data属性, 子标签没有
    			样式的选择器变化: 选择器的最右边添加了当前组件data属性的选择  
    				.test2 .t2[data-v-2e8d0da5] {
    					color: red;
    				}
    				==> 能匹配当前组件的所有元素
    				==> 还能匹配子组件根标签, 但不可能匹配其子标签
    	使用深度选择器, 修改子组件内部任意标签的样式
    		编码: 
    			.test2 >>> .t22 {
    				font-size: 30px;
    			}
    			.test2 {
    				/deep/ .t22 {
    					color: hotpink;
    				}
    			}
    		没用深度
    			.test2 .t2[data-v-2e8d0da5] {
    				color: red;
    			}
    		用了深度
    			.test2[data-v-2e8d0da5] .t22 {
    				font-size: 30px;
    			}
    		==> 属性选择从最右边转移到了左边  ==> 此选择对目标元素没有当前data属性的要求 ==> 可以子组件任意标签
    	修改第三方组件库内部的样式: 使用deep选择器
    
    展开全文
  • 方式1 常规操作在根目录下建立units文件夹 比如我们封装一个加密解密的js mt.js export default { jiami(code){ var c=String.fromCharCode(code.charCodeAt(0)+code.length); for(var i=1;...
  • vue 配置属性mixin混入

    2021-07-21 12:59:11
    要点: 先一个小案例 ...这边发现再写这两组件的时候绿色框的,和粉色框的代码一致,那么我们就可以把这个代码存入红色框的位置,然后之后要用到相同代码就进行了调用红色框的内容,这个...默认暴露 分别暴露 ...
  • 个性化定制脚手架,修改Vue CLI的默认配置 vue脚手架默认隐藏了重要文件,可以使用在cmd使用vue inspect > output.js 令重要配置文件输出一份。 不可修改部分: public结构不可修改 src结构不可修改 main.js名称...
  • Vue中实现全局方法

    千次阅读 2020-12-23 11:55:52
    内心背景:今天偶然上到论坛,看到关于Vue的两篇阅读量破千,我TM膨胀了啊。赶快再写一篇我开始用Vue时遇到的问题。现实背景:很多时候我们会在全局调用一些方法。实现方式两种:官网的实现use方法,然后你也可以用...
  • 我们可以在全局暴露出一个配置文件,使这个文件不会被 webpack 打包,以此用来控制我们需要频繁更改的配置参数。 目录结构及使用 在 static 文件下新建一个 js 文件,我这里起名为 config.js |-- public |-- |-- ...
  • import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import second from '@/components/second' // 1、引入vue-router Vue.use(Router) // 2、定义路由,...
  • 目录 前言 正文 一、Vue3 与 Vue2 区别概览 二、Vue3 与 Vue2 区别详述 生命周期 多根节点 Composition API 异步组件(Suspense) ...不知道大家有没有留意到,Vue 官网文档已经更新为默认使用 Vue
  • 上一篇我们讲解了非父子组件如何进行数据和方法的传递,本篇我们来继续学习vue中的路由以及默认路由跳转。 本系列博文使用的Vue版本:2.6.11 一、什么是路由 我们之前开发的组件中,有两个子组件,App.vue的根组件...
  • 要点: 如果修改mian.js的名字就会报错 这是因为在webpack ===>创建中有webpage.config.js,进行了相关的配置 ...修改方法:创建与webpage.json同级的vue.config.js 这边要区分,红色框的是...
  • 三个暴露相同点 可以理解为都是暴露出一个对象给...默认暴露js代码里面,只可以有一个默认暴露(也就是只能由一个export default出现)否则出现Uncaught SyntaxError: Identifier '.default' has already been declar
  • vue cli3 默认端口修改

    千次阅读 2020-08-20 16:18:28
    所在目录:node_modules@vue\cli-service\lib\commands 需要修改的文件:serve.js 链接
  • Vue默认的$API(一)

    2021-12-08 15:51:30
    详细:Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。 vm.$props 2.2.0 新增 类型:Object 详细:当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。 vm.$el...
  • 使用默认暴露,暴露一个函数失败,显示未定义
  • Vue.js 项目接口管理

    2020-12-30 08:54:41
    vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢?本文使用vue-cli生成的项目举例。第一步.在src目录下新建一个文件夹http,在http目录下建文件夹moudules,后台提供的...
  • vue-cli对webpack配置进行了抽象,所以不能直接查看,但是vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。
  • env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", } 第一步和第二步都有ip,其实第二步优先级高,这里第二步的host可以不设置,vue默认执行...
  • 前言vue-cli是Vue.js官方推出的脚手架,它功能丰富、扩展性强,为Vue应用开发带来了极大的便捷,它提供了多种开发范式,诠释了开箱即用。vue-cli@3版本经历了alpha、beta、rc版本近7个月的迭代开发,在最近几天正式...
  • 原来,ant-design-vue关于表格UI暴露的有api:row-key。 解决:我们需要指定row-key绑定的值必须唯一(否则后面翻页发现相同的row-key时会对应选中) 小总结:发现ant-design-vue的表格对于跨页勾选支持的非常友好...
  • vue-datepicker

    千次阅读 2020-12-19 18:40:26
    vue-datepicker基于 Vue 的日期/时间选择组件。安装NodeJS 环境 (commonjs)npm i @hyjiacan/vue-datepicker或者yarn add @hyjiacan/vue-datepicker可以通过以下方式获取最新的代码git clone ...
  • ES6语法和vue基础

    2022-02-08 12:08:09
    一、使用yarn创建vue项目 1. 安装脚手架 yarn global add @vue/cli 2. 使用脚手架创建项目 vue create 项目名 || vue ui(图形化创建了解) 3. 启动项目 yarn serve 启动成功: //切换为淘宝镜像 yarn config...
  • vue项目里使用vue-router,需先安装: cnpm install vue-router --save 在main.js里面,主入口去配置路由: main.js: import Vue from 'vue' import App from './App.vue' //引入组件 import ...
  • [], onChange: this.onSelectChange } //这里需要在methods中写,不能直接暴露在外面,结合自己的业务 this.rowSelection = { selectedRowKeys: selectedRowKeys, //这里指的是选中的数组集合,例如["2","3"] ...
  • vue-cli3 的webpack配置

    2019-09-20 13:57:50
    @vue/cli的webpack配置 查看默认配置 ... vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。 vue inspect > output.js 将webpack默认配置, 重定向到一个文件中. 其中的一段为...
  • 但在request payload直接暴露了密码?不改传输格式要怎么处理?求教,谢谢! <p><img alt="" height="120" src=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,119
精华内容 4,847
关键字:

vue默认暴露