精华内容
下载资源
问答
  • Vue指令可根据元素宽度自动调整字体大小。 它使字体大小在灵活或响应式布局上具有灵活性。 :调整浏览器视口的大小以查看实际效果 安装 通过NPM安装 $ npm install vue-resize-text --save 通过CDN安装 < ...
  • 主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue.resize 检测HTML调整大小事件的vue指令
  • 在本篇文章里我们给大家整理的是关于vue指令v-html使用过滤器filters功能的实例内容,需要的朋友们学习下。
  • 用于在加载数据之前占用内容位置的Vue指令
  • 解决移动端fixed遮罩弹窗滚动击穿的vue指令
  • 主要介绍了Vue 指令实现按钮级别权限管理功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • v-track通过 Vue 自定义指令的方式将埋点代码与业务代码完全解耦~
  • 2.vue指令.ppt

    2020-04-10 09:08:27
    vue指令
  • Vue指令,你可以很方便地对页面中所有input和textarea的自动聚焦行为进行流程控制
  • vue指令实现防止连点

    2020-07-08 15:02:01
    应用vue指令,实现防止按钮连点,此文件内容只是局部指令,全局指令需要自己完成,但是核心功能是一样的
  • 什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
  • 材质纹波效果作为Vue指令。 该指令适用于您希望实现这种波纹效果的任何元素。 安装 npm install vue-ripple-directive --save 重要通知 如果附加指令的位置相对,则该指令将更好地工作。 尽管该指令将尝试设置...
  • 本文为大家分享了vue指令directive的使用方法,供大家参考,具体内容如下 1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){  //定义指令 }); ...
  • vue指令

    千次阅读 2019-05-27 09:05:15
    vue指令 指令:带有v-前缀的指令,代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。 v-text 作用:更新元素的textContent,若只更新部分文本内容需要使用{{ Mustache }}插值。 <span v-...

    本文参考官方文档

    vue指令

    指令:带有v-前缀的指令,代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。

    v-text

    • 作用:更新元素的textContent,若只更新部分文本内容需要使用{{ Mustache }}插值。
    <span v-text="msg"></span>
    

    v-html

    • 作用:更新元素的innerHTML。
    • 注意:v-html不能用来复合局部模板,因为vue不是基于字符串的模板引擎。另外只对可信内容使用v-html,避免xss攻击带来重大危险。
    <span v-html="html"></span>
    

    v-show

    • 作用:根据指令的表达式值的真假,切换元素的display css属性。当条件变化时,会触发过渡效果。
    • 说明:v-show会让元素始终渲染并保留在DOM中,因为只是改变css属性display。
    <h1 v-show="ok">Hello!</h1>
    

    v-if

    • 作用:根据指令的表达式值的真假渲染元素。
    <h1 v-if="awesome">Vue is awesome!</h1>
    

    v-else

    • 作用:表示v-if的“else块”,不需要表达式,但必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
    <div v-if="Math.random() > 0.5">
    	Now you see me
    </div>
    <div v-else>
    	Now you don't
    </div>
    

    v-else-if

    • 作用:表示 v-if 的 “else if 块”。可以连续使用。必须紧跟在带 v-if 或者 v-else-if 的元素之后。
    	<div v-if="type === 'A'">
    		A
    	</div>
    	<div v-else-if="type === 'B'">
    		B
    	</div>
    	<div v-else-if="type === 'C'">
    		C
    	</div>
    	<div v-else>
    		not A/B/C
    	</div>
    

    v-for

    • 作用:
      基于源数据(该数据类型可以是Array | Object | number | string | Iterable),进行多次渲染元素或模板块。该指令的值必须使用特定的语法alias in expression,为当前遍历的元素提供别名。
    	<ul id="example">
    		<li v-for="item in items">
    			{{ item.id }}
    		</li>
    	</ul>
    	
    <script>
    		var app = new Vue({
    
    			el: '#example',
    			data: {
    				items: [
    					{ text: "foo"},
    					{ text: "bar"}
    				]
    			}
    		})
    	</script>
    

    上面结果:

    • foo
    • bar

    另外也可以为数组索引指定别名 (或者用于对象的键):

    	<div v-for="(item, index) in items"></div>
    	<div v-for="(val, key) in object"></div>
    

    v-for 默认行为试着不改变整体,而是替换元素。如果需要重新对元素进行排序,则需要使用 key 属性:

    	<div v-for="item in items" :key="item.id">
    		{{ item.id }}
    	</div>
    

    v-on

    • 缩写:@
    • 参数:event
    • 修饰符
      • .stop -调用event.stopPropagation()。
      • .prevent -调用event.preventDefault()。
      • .capture -添加事件监听器时使用capture模式。
      • .self -只当事件是从侦听器绑定的元素本身触发时才触发回调。
      • .{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调。
      • .native -监听组件根元素的原生事件。
      • .once -只触发一次回调。
      • .left -只当点击鼠标左键时触发。
      • .right -只当点击鼠标右键时触发。
      • .middle -只当点击鼠标中键时触发。
      • .passive -以{ passive: true }模式添加侦听器。
    • 作用:绑定事件监听器。事件类型由参数指定。

    v-bind

    • 缩写: :

    • 修饰符

      • .prop -被用于绑定DOM属性.
      • .camel -.camel -将 kebab-case 特性名转换为 camelCase.
      • .sync -语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器 -
    • 作用:动态地绑定一个或多个特性,或一个组件prop到表达式。

    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">
    <!-- 缩写形式 -->
    <img :src="imageSrc">
    
    <!-- class绑定 -->
    <div :class=" { red: isRed } "></div>
    <div :class="[classA, classB]"></div>
    
    <!-- style绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="{ styleObjectA, styleObjectB }"></div>
    

    v-model

    • 修饰符:

      • .lazy -取代input监听change事件。
      • .number -输入字符串转为有效的数字。
      • .trim -输入首尾空格过滤。
    • 作用:在表单控件或组件上创建双向绑定。

    v-slot

    • 提供具名插槽或需要接收prop的插槽。
    展开全文
  • vue-spatialnavigation用于空间导航(键盘导航)的Vue指令(Vue.js 2.x)安装npm install vue-spatialnavigation --save Sp vue-spatialnavigation用于空间导航(键盘导航)的Vue指令(Vue.js 2.x)安装npm install ...
  • Vue指令指令大全

    千次阅读 2019-04-03 15:26:23
    1. v-text v-text主要用来更新textContent,可以等同于JS的text属性。 <span v-text="msg"></span> 这两者等价: <span>...为了输出真正的HTML,可以用v-html指令。它等同于JS的inn...

    1. v-text

    v-text主要用来更新textContent,可以等同于JS的text属性。

    <span v-text="msg"></span>
    

    这两者等价:

    <span>{{msg}}</span>
    

    2. v-html

    双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。

    <div v-html="rawHtml"></div>
    

    这个div的内容将会替换成属性值rawHtml,直接作为HTML进行渲染。

    3. v-pre

    v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

    <div id="app">
      <span v-pre>{{message}}</span> //这条语句不进行编译
      <span>{{message}}</span>
    </div>
    

    最终仅显示第二个span的内容

    4. v-cloak

    这个指令是用来保持在元素上直到关联实例结束时进行编译。

    <div id="app" v-cloak>
      <div>
        {{message}}
      </div>
    </div>
    <script type="text/javascript">
      new Vue({
       el:'#app',
       data:{
        message:'hello world'
       }
      })
    </script>
    

    在页面加载时会闪烁,先显示:

    <div>
      {{message}}
    </div>
    

    然后才会编译为:

    <div>
      hello world!
    </div>
    

    5. v-once

    v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。

    <span v-once>This will never change:{{msg}}</span> //单个元素
    <div v-once>//有子元素
      <h1>comment</h1>
      <p>{{msg}}</p>
    </div>
    <my-component v-once:comment="msg"></my-component> //组件
    <ul>
      <li v-for="i in list">{{i}}</li>
    </ul>
    

    上面的例子中,msg,list即使产生改变,也不会重新渲染。

    6. v-if

    v-if可以实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素。

    <a v-if="ok">yes</a>
    

    如果属性值ok为true,则显示。否则,不会渲染这个元素。

    7. v-else

    v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。

    <a v-if="ok">yes</a>
    <a v-else>No</a>
    

    8. v-else-if

    v-else-if充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句。

    <div v-if="type==='A'">
      A
    </div>
    <div v-if="type==='B'">
      B
    </div>
    <div v-if="type==='C'">
      C
    </div>
    <div v-else>
      Not A,B,C
    </div>
    

    9. v-show

    <h1 v-show="ok">hello world</h1>
    

    也是用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性。

    注意:v-if有更高的切换开销
    v-show有更高的初始渲染开销。
    因此,如果要非常频繁的切换,则使用v-show较好;如果在运行时条件不太可能改变,则v-if较好

    10. v-for

    用v-for指令根据遍历数组来进行渲染
    有下面两种遍历形式

    <div v-for="(item,index) in items"></div>  //使用in,index是一个可选参数,表示当前项的索引
    <div v-for="item of items"></div>  //使用of
    

    下面是一个例子,并且在v-for中,拥有对父作用域属性的完全访问权限。

    <ul id="app">
      <li v-for="item in items">
        {{parent}}-{{item.text}}
      </li>
    </ul>
    <script type="text/javascript">
      var example = new Vue({
       el:'#app',
       data:{
        parent:'父作用域'
        items:[
         {text:'文本1'},
         {text:'文本2'}
        ]
       }
      })
    </script>
    

    会被渲染为:

    <ul id="app">
      <li>父作用域-文本1</li>
      <li>父作用域-文本2</li>
    </ul>
    

    注意:当v-for和v-if同处于一个节点时,v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

    11. v-bind

    v-bind用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
    简写为一个冒号【 :】
    <1>对象语法:

    //进行类切换的例子
    <div id="app">
      <!--当data里面定义的isActive等于true时,is-active这个类才会被添加起作用-->
      <!--当data里面定义的hasError等于true时,text-danger这个类才会被添加起作用-->
      <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          isActive: true, 
          hasError: false
        }
      })
    </script>
    

    渲染结果:

    <!--因为hasError: false,所以text-danger不被渲染-->
    <div class = "is-active"></div>
    

    <2>数组语法

    <div id="app">
      <!--数组语法:errorClass在data对应的类一定会添加-->
      <!--is-active是对象语法,根据activeClass对应的取值决定是否添加-->
      <p :class="[{'is-active':activeClass},errorClass]">12345</p>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          activeClass: false,
          errorClass: 'text-danger'
        }
      })
    </script>
    

    渲染结果:

    <!--因为activeClass: false,所以is-active不被渲染-->
    <p class = "text-danger"></p>
    

    <3>直接绑定数据对象

    <div id="app">
      <!--在vue实例的data中定义了classObject对象,这个对象里面是所有类名及其真值-->
      <!--当里面的类的值是true时会被渲染-->
      <div :class="classObject">12345</div>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          classObject:{
            'is-active': false,
            'text-danger':true
          }      
        }
      })
    </script>
    

    渲染结果:

    <!--因为'is-active': false,所以is-active不被渲染-->
    <div class = "text-danger"></div>
    

    12. v-model

    这个指令用于在表单上创建双向数据绑定。
    v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

    <div id="app">
      <input v-model="somebody">
      <p>hello {{somebody}}</p>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          somebody:'小明'
        }
      })
    </script>
    

    这个例子中直接在浏览器input中输入别的名字,下面的p的内容会直接跟着变。这就是双向数据绑定。
    v-model修饰符
    <1> .lazy
    默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步。

    <input v-model.lazy="msg">
    

    <2> .number
    自动将用户的输入值转化为数值类型

    <input v-model.number="msg">
    

    <3> .trim
    自动过滤用户输入的首尾空格

    <input v-model.trim="msg">
    
    1. v-on

    v-on主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。
    简写为:【 @ 】

    <div id="app">
      <button @click="consoleLog"></button>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        methods:{
          consoleLog:function (event) {
            console.log(1)
          }
        }
      })
    </script>
    

    事件修饰符

    .stop 阻止事件继续传播

    .prevent 事件不再重载页面

    .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理

    .self 只当在 event.target 是当前元素自身时触发处理函数

    .once 事件将只会触发一次

    .passive 告诉浏览器你不想阻止事件的默认行为

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
     
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
     
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
     
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
     
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
     
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
     
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
     
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成 -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>
    

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

    最后

    为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

    当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

    但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

    最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

    展开全文
  • 今天小编就为大家分享一篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • smooth-vuebar smooth-scrollbar演示的Vue指令包装器您可以参考包装的库的演示。 为什么此Smooth-vuebar有很多其他包装器,用于Smooth-scrollbar演示的Vue指令包装器您可以参考包装的库的演示。 为什么该库还有许多...
  • 使用 Vue 指令快速的 “钉”住某个元素,移植于 jQuery.pin
  • 主要介绍了vue 指令之气泡提示效果的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了Vue指令的钩子函数使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vuejs-sticky-directive ...使用v-sticky指令启用元素位置粘贴 使用sticky-*属性定义其选项 Sticky元素将找到最接近其具有sticky-container属性的元素,或者如果失败则将找到其父节点作为相对元素。 <
  • vue-stickto 简体中文 A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令) Online Demo Here Install npm install vue-stickto 简体中文 A vue ...
  • vue给元素添加指令 v模糊 (v-blur) Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content... Vue指令可动态模糊元素。 对于部分隐藏元素很有用,...

    vue给元素添加指令

    v模糊 (v-blur)

    Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content is not ready among other things.

    Vue指令可动态模糊元素。 对于部分隐藏元素很有用,当内容还没准备好时,可以与微调器一起使用它。

    安装 (Install)

    $ npm install --save v-blur
    $ yarn add v-blur

    绑定值 (Binding value)

    The binding value can be a Boolean or an Object. If a Boolean is provided, the directive uses default values for opacity, filter and transition. To use a custom configuration, an object with these attributes plus isBlurred (To determine when to apply these styles) can be provided.

    绑定值可以是布尔值或对象。 如果提供了布尔值,则伪指令将不透明度过滤器过渡使用默认值。 要使用自定义配置,可以提供具有这些属性以及isBlurred (以确定何时应用这些样式)的对象。

    绑定对象属性 (Binding object attributes)

    optiondefaulttype
    isBlurredfalseboolean
    opacity0.5number
    filter'blur(1.5px)'string
    transition'all .2s linear'string
    选项 默认 类型
    isBlurred 布尔值
    不透明 0.5
    过滤 '模糊(1.5px)'
    过渡 '所有.2s线性'

    (Use)

    import Vue from 'vue'
    import vBlur from 'v-blur'
    
    Vue.use(vBlur)
    <script>
      export default {
          data () {
            return {
              isBlurred: true, // activate and deactivate blur directive example 1
              
              blurConfig: {
                isBlurred: false, // activate and deactivate blur directive example 2
                opacity: 0.3,
                filter: 'blur(1.2px)',
                transition: 'all .3s linear'
              }
            }
          }
        }
      };
    </script>
    
    <template>
      <!-- Example 1 using just a boolean (Uses default values) -->
      <div v-blur="isBlurred"></div>
    
      <!-- Example 2 using an object (Uses config values) -->
      <div v-blur="blurConfig"></div>
    </template>

    (Example)

    v-blur-image-1

    翻译自: https://vuejsexamples.com/vue-directive-to-blur-an-element-dynamically/

    vue给元素添加指令

    展开全文
  • vue指令模式 添加埋点

    2020-05-29 15:56:48
    我使用Vue的自定义指令来添加埋点,使用起来比较简单方便,下面是我的代码 Dom代码: <div class="main" v-track="{act:'browse'}"> </div> <el-button v-track="{act:'click'}">Test</el...

    埋点也叫浏览足迹,有多种类型,如浏览页面、点击、搜索等等。

    我使用Vue的自定义指令来添加埋点,使用起来比较简单方便,下面是我的代码

    Dom代码:

    <div class="main" v-track="{act:'browse'}">
    </div>
    <el-button v-track="{act:'click'}">Test</el-button>

    指令代码:

    import Vue from 'vue'
    // 埋点指令
    Vue.directive('track', {
      bind: (el, binding, vnode) => {
        // console.log(el)
        // console.log(binding)
        // console.log(vnode)
        if (binding.value && binding.value.act) {
          switch (binding.value.act) {
            case 'browse':
                  // 在此插入埋点数据(调用API)
                  console.log('browse')
              break
            case 'click':
              el.onclick = function () {
                  // 在此插入埋点数据(调用API)
                  console.log('click')
              }
              break
          }
        }
      }
    })
    

    最后请不要忘了在main.js中将指令导入

    import './directive/track'

    这样就实现了埋点的功能。各位大牛要有更好的方式,欢迎留言交流

    展开全文
  • vue-heatmapjs用于收集和显示组件上的用户活动的vue指令演示安装您可以使用NPM或Yarn将此插件添加到yo vue-heatmapjs用于收集和显示组件上的用户活动的vue指令演示安装您可以使用NPM或Yarn将此插件添加到您的项目中...
  • 我们都知道,vue是一个非常好用的框架,他给我们封装了很多好用的指令,自我体验是非常不错的,我们只要写少量代码,就能实现很理想的功能,这是因为vue在背后偷偷的帮我们做了很多操作,当然vue也不仅仅只有指令给...
  • 本章讲解Vue的相关指令的学习,包括了内容绑定和事件绑定 方法 1.内容绑定之v-text 该指令的作用在于设置标签的文本值,相当于前面所看到的设值表达式(双大括号),但是也有些许不同。 应用实例: <!...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,168
精华内容 33,267
关键字:

vue指令

vue 订阅