美文网首页
日常工作知识点集合之vue(二)

日常工作知识点集合之vue(二)

作者: Roseska | 来源:发表于2020-04-30 11:28 被阅读0次

    1.vue中element-ui实现的slot分发和route路由

      <!--单个激活 并以 index 作为 path 进行路由跳转-->
        <el-menu unique-opened router v-show="!collapsed">
         <!--动态路由到子组件 将不可见的路径隐藏-->
         <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
           <el-submenu :index="index+''" v-if="!item.leaf">
             <!--用el ui 的title进行slot分发菜单-->
             <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
               <!--item.name和item.children.name来配置菜单栏和子菜单栏的名称-->
             <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
           </el-submenu>
           <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
         </template>
       </el-menu>
    

    slot分发其实就是父组件需要在子组件内放一些DOM,它就是负责这些DOM是否显示,在哪个地方显示的。

    具名slot

    <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。

    使用:(1)父组件要在分发的标签中添加属性"slot=name名"

    (2)子组件在对应分发位置上的slot标签添加属性"name=name名"

    代码如下:

    <body>
    <div id="app">  
    <child>
       <span slot="one">123456</span>
       <span slot="two">abcdef</span>   
    </child>    
    </div>
    <script>
      new Vue({
        el:'#app',
        components:{
        child:{
         template:"<div><slot name='two'></slot>我是子组件<slot name='one'></slot></div>"
       }
      }
    });
    </script>
    </body>
    

    2.vue中设置管道

    Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
    

    Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

    如果你想获取一个对象的所有属性,,甚至包括不可枚举的,请查看Object.getOwnPropertyNames。
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

    3.反向代理调用api

     env: require('./dev.env'),
        port: 8092,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/bdc-xapi': {
            target: '',
            changeOrigin: true,
            pathRewrite: {
                '^/bdc-xapi': '/'
            }
        },
        },
    

    4.token机制完成登录状态保持/身份认证

    https://www.jianshu.com/p/8d28e60af440

    5.nextTick

    this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
    });
    

    this.$nextTick作用:在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获得更新后的dom。

    6.element-ui组件中方法调用问题

    <el-input type="text" :placeholder="fileName" v-model="uploadForm.reNameTxt" @keyup.enter.native="reNameSuccess"></el-input>
    

    @keyup.enter.native多加了个native

    关于keyup.enter.native
    https://blog.csdn.net/fifteen718/article/details/80359844

    注意!!!如果用了封装组件的话,比如element,这个时候使用按键修饰符需要加上.native

    !!当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent ;

    即@submit.native.prevent是用来阻止默认行为的

    7.el-upload组件使用

     <el-upload
          class="avatar-uploader"
          :http-request="handleGiftImgUpload"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="
            (res, file) => {
              return onUploadSuccess(res, file)
            }
          "
        >
        <img v-if="bindForm.urlPic !== ''" :src="bindForm.urlPic" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      if (!isJPG) {
        this.$message.error('只能上传图片格式!')
      }
      return isJPG
    },
    
    handleGiftImgUpload(fileObj) {
      const formData = new FormData()
      formData.append('file', fileObj.file)
      return giftManagerUpdateImage(formData)//接口名字
    },
    
    onUploadSuccess(res) {
      this.bindForm.urlPic = res.data
    },
    

    8. vue中backgroundImage的写法

    <div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
    https://blog.csdn.net/qq_35393869/article/details/80333564

    9. vue的生命周期

    beforecreate : el 和 data 并未初始化。这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作(可以在这加个loading事件 )

    created :完成了 data 数据的初始化,el没有。(在这结束loading,还做一些初始化,实现函数自执行 )

    beforeMount:完成了 el 和 data 初始化。在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

    mounted :完成挂载。数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情...
    (在这发起后端请求,拿回数据,配合路由钩子做一些事情)

    beforeUpdate:当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿

    updated:当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom

    beforeDestroy: 当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等(比如你确认删除XX吗?)

    destroyed :当前组件已被删除,清空相关内容

    10.vue中绑定class的方法

    https://blog.csdn.net/qq_38093702/article/details/81205370

    绑定style的方法

    <img :src="logo" :style="{'display':isShowImg==true?'block':'none'}" />
    

    11.调接口时记住做异常处理判断

    12.vue的路由传参,子页面刷新保证参数不丢失

    1.使用query:

    this.$router.push({ path: '/NewsDetail', query: { newsUrl: url } })

    2.在路由配置页面配置好,然后可以用params方法传

    routes: [ { path: '/list/:id', name: 'list' } ]

    this.$router.push({name:'list', params:{id: id}});

    13. ...mapGetters(vuex)

    // 使用对象展开运算符将 getter 混入 computed 对象中
     ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
    

    14. checkbox:true-label

    true-label,false-label规定v-modle的值。
    如true-label="a",false-label="b"。 v-modle="data"
    当选中时data为a,当没选中时data为b
    

    15.微信小程序和vue的双向数据绑定有什么区别

    http://www.cnblogs.com/zhangruiqi/p/9412948.html







    以上内容仅供参考,有错误的地方还请多多指教

    相关文章

      网友评论

          本文标题:日常工作知识点集合之vue(二)

          本文链接:https://www.haomeiwen.com/subject/oghzwhtx.html