精华内容
下载资源
问答
  • Vue1.0过滤器和Vue2.0自定义指令的用法

    设置默认图片或者日期比较操作等用到过滤器或者指令

    Vue1.0过滤器在文件common\static\static\lib\vue\vue.filter.js

    图片:

      <img:src="member.portrait | imgShow 0,'/img/default/default-head.jpg'">

    日期格式化:

      <span>{{parkEnterpriseVO.establishTime|formatDateStr'yyyy-MM-dd'}}</span>

     

    Vue2.0自定义指令在文件common\static\static\lib\vue \vue2.0\vue.directive.js

    Vue2.0里不能用之前的fiter过滤器了,通过自定义指令实现和过滤器类似的功能,用到的引入这个js即可,用法参考:

      图片:

      <img v-imgshowmodule="{code:activityDetailSite.activityDetail.imgPath,type: 0,def:'/img/default-activity-form.png'}">

      日期格式化:

      <spanv-formatdatestr="{date:activityDetailSite.activityDetail.activityTime,format: 'yyyy年MM月dd日 HH:mm'}"></span>

    日期比较:

    <button type="button"v-comparetodate="{beginTime:activityDetailSite.activityDetail.registrationDeadline,endTime:activityDetailSite.activityDetail.activityDeadline}">报名已截止</button>

    展开全文
  • vue中<slot></slot>标签代表插槽一、内容插槽顾名思义,插槽作用就是存放内容html代码如下:<javascript代码如下:Vue效果如下:二、后备插槽在组件模板<slot></slot>中添加内容,...

    vue中<slot></slot>标签代表插槽

    一、内容插槽

    顾名思义,插槽的作用就是存放内容

    html代码如下:

    <test-man>
          <v-card dark>
            is handsome
          </v-card>
    </test-man>

    javascript代码如下:

    Vue.component('test-man', {
        template:`
        <v-card>
          <div>
          pingchangxin
          </div>
          <slot>
          </slot>
        </v-card>
        `
      })
    

    效果如下:

    cfe89016616b672e8c4b554fad0d05ca.png

    二、后备插槽

    在组件模板的<slot></slot>中添加内容,如果html利用的这个组件中没有内容的话,就是默认显示插槽里面的内容,如果有内容则覆盖插槽中的内容 html代码如下:

    <test-man></test-man>
    <test-man>
      <v-btn>保存</v-btn>
    </test-man>

    javascript代码如下:

    Vue.component('test-man', {
        template:`
        <v-card>
          <div>
          pingchangxin
          </div>
          <slot>
          <v-btn>提交</v-btn>
          </slot>
        </v-card>
        `
      })
    

    效果如下:

    6fa252723b2a5473f73fff6ba89194a9.png

    三、作用域插槽

    这类插槽可以让父组件使用子组件的数据,只需子组件在插槽中用v-bind绑定自身的数据,然后父组件在使用组件时就可以用v-slot="slotProps"接收,注意:这里的slotProps可以自定义。

    html代码如下:

    <test-man v-slot="slotProps">
          <v-btn >{{slotProps.obj2.name}}</v-btn>
        </test-man>

    javascript代码如下:

    Vue.component('test-man', {
        data(){
          return {
            obj2:{
            name:'zhubajie',
            age:3
            }
          }
        },
        template:`
        <v-card>
          <div>
          pingchangxin
          </div>
          <slot v-bind:obj2="obj2">
          </slot>
        </v-card>
        `
      })
    

    效果如下:

    a171d7c86b17c9aee6f7a7ae643a53b1.png

    四、具名插槽

    这类插槽可以有多个,每个都用name属性绑定一个不同的名字,在接收内容时避免发生混乱,在组件使用时用v-slot:名字的方式进行绑定。

    html代码如下:

    <test-man>
          <template v-slot:second>
            <span>这是第二个插槽的内容</span>
          </template>
          <template v-slot:first>
            <span>这是第一个插槽的内容</span>
          </template>
        </test-man>

    javascript代码如下

    Vue.component('test-man', {
        data(){
          return {
            obj2:{
            name:'zhubajie',
            age:3
            }
          }
        },
        template:`
        <v-card>
          <div>
          pingchangxin
          </div>
          <div>
          <slot name="first">
          </slot>
          </div>
          <span>-----这是一条分界线-----</span>
          <div>
          <slot name="second">
          </slot>
          </div>
        </v-card>
        `
      })
    

    效果如下:

    677dd07afe5edc267bca6f7f68aa8161.png
    展开全文
  • 在说bug之前,先看看vue官方是如何说明deep的用法的。为了保证每个组件css唯一性,避免污染全局或者被全局污染,vue提供了scoped作用域<上述代码会被编译成.vue官方对于deep选择器说明这么写是没有问题,.....

    七夕了,写个昨天遇到的bug来缓解下没有人约的尴尬。

    昨天和QA过历史bug时,发现有好几个浏览器不兼容的导致式样变形的bug,调查了一番发现是因为deep选择器的原因。

    在说bug之前,先看看vue官方是如何说明deep的用法的。

    为了保证每个组件的css唯一性,避免污染全局或者被全局污染,vue提供了scoped作用域

    <

    上述代码会被编译成

    .
    vue官方对于deep选择器的说明

    这么写是没有问题的,但是实际项目中,还有人深度嵌套的写法

    <

    生成的代码如下

    .

    在Chrome浏览器下是没有问题的,但是在其他浏览器上就完全不可行了

    .

    上面这部分代码完全失效了,为什么尼?

    因为/deep/选择器这个是chrome浏览器自己的标准,其他浏览器并没有实现这个标准,所以其他浏览器是失效的。

    有意思的是,google说会在chrome的63这个版本,移除/deep/的支持,不知道为啥现在最新的还是会有?

    17年google说要废弃/deep/

    既然问题知道了,bug自然就好解决了,不要用/deep/嵌套就好了。

    vue官方也说了,当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍,当然这种写法对于程序员来说是最友好的。

    渲染测试

    之前写react时用的是CSS Modules,他比较麻烦的是需要导入一个变量,其他的一切完美,vue也提供了支持,新项目还是用CSS Modules吧,解决更彻底。

    vue的CSS Modules解决方案

    参考文档

    关于deep的stackoverflow

    展开全文
  • vue自定义指令的用法

    千次阅读 2018-09-19 21:18:55
    上周有一个长按某一块文本弹出一个弹窗需求,关于这个长按姿势想到了使用vue的自定义指令来进行开发这个需求,因为报告很多页面都要使用到这个长按姿势,所以自定义指令是最佳解决方法首选。刚好借此机会...

    上周有一个长按某一块文本弹出一个弹窗的需求,关于这个长按的姿势想到了使用vue的自定义指令来进行开发这个需求,因为报告中很多页面都要使用到这个长按的姿势,所以自定义指令是最佳解决方法的首选。刚好借此机会学习自定义指令。
    官网提供的全局自定义和组件自定义的例子,都很简单明了了告诉我们怎么使用:官网自定义例子链接

    下面主要讲解我全局自定义指令的整个流程,整体思路与官网的一样,但是一般实际项目开发中要规范化自己的开发风格,这里主要是学习各种框架会使用一套方法来实现:
    (1)longTap.js:这个文件主要用来实现主要的业务逻辑,即长按(touchstart,touchmove,touchend)事件的处理

    //核心代码
    export default {
    //使用钩子函数inserted(被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中));此外还有=>(1)bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(2)update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 
    (3)componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。(4)unbind:只调用一次,指令与元素解绑时调用。上面这些钩子函数可以根据自己所需场景进行选择。
    
      inserted (el, bind, vNode) {
        el.addEventListener('touchstart', event => {
        //按下去的逻辑代码
        }, false)
        
        el.addEventListener('touchmove', event => {
        //手指按下去移动的逻辑代码
        }, false)
        
        el.addEventListener('touchend', event => {
        //手指离开页面时的逻辑代码
        }, false)
      }
    }
    

    (2)add.js:这个文件主要用来实现添加longtap的指令

    import LongTap from 'longTap'   //引入上面的longTap.js
    Logntap.install = function (Vue, option) {
      Vue.directive('longtap', Longtap)
    }
    export default LongTap
    

    (3)long-tap.js:这个文件一般放在plugins文件夹下面,到时要引入nuxt.config.js中

    import Vue from 'vue'
    import LongTap from 'add'
    
    Vue.use(LongTap)
    

    (4)在test.vue文件中使用指令v-longtap

    <div v-longtap></div>
    

    上面就是整个自定义指令的使用流程。

    展开全文
  • 说出至少4种vue当中的指令和它的用法? (1){{}} 、v-html 和v-text ==》 非表单元素 {{}}:以{{data的属性名}}的方式直接使用在标签之间 例如: {{name}} {{}}不能解析data中属性值中的标签 当vue.js没有加载出来...
  • 下面介绍Vue中集成的指令以及用法和作用 v-bind v-on v-model v-for v-html v-text v-if v-else-if v-else v-show v-once v-pre v-cloak 1、声明式渲染有两种方法 A、文本插值,用两个花括号:{{内容}} html如下...
  • 自定义指令的用法 <script> //1,创建model var exampleData = { count:0, color:"#000" }; //2,创建Vue例子 new Vue({ el:"#app", data:exampleData, directiv...
  • 等到后来Vue玩的差不多了,开始写项目的时候发现,常见的指令也就那么几个,比如“v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”。  你可以认为这是一种语法糖或者这是一种命令。在常见的这些指令,...
  • 1、Vue.js介绍Vue.js是一个轻巧、高性能、可组件化 MVVM 库,同时拥有非常容易上手APIVue.js是一个构建数据驱动Web界面库。Vue.js是一套构建用户界面 渐进式框架。与其他重量级框架不同是,Vue 采用自底...
  • 1:什么是MVVM;MVVM是Model(模型) - View(试图) - Viewmodel(试图模型)的...2:Vue中的生命周期有哪几种钩子,分为八种钩子;beforeCreate (创建前)created(创建后)beforeMount (载入前)mounted(载入后)beforeUpdate ...
  • 主要介绍了详解vue中v-on事件监听指令的基本用法,文中讲解非常细致,代码帮助大家更好理解学习,感兴趣朋友可以了解下
  • vue自定义指令用法

    2020-05-12 11:42:12
    vue中,普通 DOM 元素进行底层操作,这时候就可能用到自定义指令。也就是说我们在操作普通DOM时候有可能会用到自定义指令。 自定义指令和自定义组件一样,也是先注册后使用,其注册和组件注册很类似,也分为...
  • Vue中内置指令v-ifv-show区别

    千次阅读 2020-09-21 22:04:17
    在学习vue框架基础时候,大家可能对v-ifv-show这两个内置指令比较模糊,分不清楚这两个内置指令的用法,今天来区分一下这两个内置指令 v- 内置指令我们实际上是用来操作元素attributes v-ifv-show,两个指令实现...
  • 1.v-bind 想要让标签上的属性使用data中的数据,前面加上v-bind,简写 :。 2.v-on 给元素加事件,v-on:click=“say”,方法定义在methods里面, 简写@click="say“。 3.v-text 跟插值表达式功能类似,可以向指定元素...
  • vue中插值表达式14个vue指令详解

    千次阅读 2020-03-29 15:27:28
    在学习vue时,插值表达式vue指令可谓是基础中的基础,这篇文章,就让你彻底了解怎么使用插值表达式vue中所有指令用法。 一、插值表达式:{{ }} 可以将vue中的数据填写在插值表达式中 <div id="app">{{...
  • - 模板中的变量函数必须是实例中的属性或者方法 - 对于js全局函数,有些可以使用,有些不可以,即(白名单): 对于全局window下的方法Vue设置了白名单,只有在白名单下的方法,模板才可以使用。 `白名单`: ...
  • Vue插件作用和用法

    2020-06-14 23:13:37
    插件组件关系:插件包含组件,插件里面可以包含很多东西,例如组件、自定义指令vue中使用插件是为了让代码不那么零散,看起来更有整体性。 <div id="app"> <aaa>删除</aaa> <bbb>...
  • 问题一:请说出vue几种常用的指令v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。v-show:根据表达式之真假值,切换元素的 display CSS 属性。v-for:循环指令,基于一个...
  • vue中的自定义指令

    2020-08-06 16:37:00
    vue中有很多自定义指令,比如:v-on、v-for、v-textv-html、v-showv-if、v-bind、v-model等,在这些指令中,部分指令我们很容易弄混淆。今天我们就来梳理总结下几个比较像是的指令。 v-on 作用:为元素绑定...
  • 在.vue扩展名文件下,data属性必须定义为函数形式,在普通的Vue对象,data属性就是一个对象。 相当于reactstate,代表了当前组件状态;组件呈现一个什么样状态,data属性就必须有什么样描述。 el属性 Vue...
  • vue指令 v-html v-text 的用法和区别 作用: 都是用于渲染页面 区别: v-html可以识别html标签并渲染到页面,而v-text不能识别标签,只可以渲染文本。 用法: <div id="app"> <p v-html="html">我...
  • 其透明与透光度如同玻璃一般,是一种开发较早重要热塑性塑料。...与玻璃相比,亚克力出色透光率质轻韧强特点,让它非常适合各类招牌、灯箱、标牌制作应用。常见亚克力板如果按照外形分类话大致...
  • vue 指令和模板

    千次阅读 2017-06-05 23:05:22
    今天我来总结一下vue的指令和模板。指令和模板是vue比较基础的东西,也是vue中很重要的东西。一、vue指令vue指令有很多,比如: v-bind, v-click, v-style, v-class, v-once, v-if, v-else-if, v-model ...
  • Vue中的v-cloak用法

    2018-04-02 15:33:00
    v-cloak 作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译 Mustache 标签直到实例准备完毕。 <div id="app"> ...
  • https://cn.vuejs.org/ Vue的官网,中文方便阅读查阅 1、指令: ...1、v-if 是“真实”条件渲染,因为它会确保条件块(conditional block)在切换过程, 完整地销毁(destroy)重新创建(re-cre...
  • animation)的用法,无论是实现过渡还是动画,在VueJS它们使用都是类似,你可以根据标准过渡或动画类自定义然后使用。指令是指示VueJS以某种方式进行操作,我们之前已经看到了诸如v-if、v-show、v-else、v-for、...
  • v-for 指令需要使用 item in items 形式特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代数组元素别名在 v-for 时候,建议设置key值,并且保证每个key值是独一无二,这便于diff算法...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 194
精华内容 77
关键字:

vue中的指令和用法

vue 订阅