精华内容
下载资源
问答
  • vue指令用法

    2019-10-31 08:42:34
    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispaly: none; } 一般把v-cloak绑在Vue实例el...

    vue指令

    指令式带有 v- 前缀的特殊特性v-textv-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图

    解决大胡子语法闪烁案例

    [v-cloak] {
     dispaly: none;
    }

    一般把v-cloak绑在Vue实例el属性绑定的节点上

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
     <style>
     
      [v-cloak] {
         display: none;
        }
        
     </style>
     </head>
     <body>
     
      <div id="app" v-cloak>
         {{msg}}
        </div>
        <script>
         var vm = new Vue({
          el: "#app",
            data: {
             msg: "问题"
            }
        </script>
        
    </body>
    </html>

    v-bind给标签属性绑定使用

    v-bind是让标签属性可以动态的使用data参数或者写一些简单的js表达式

    v-text,v-html不同它俩是针对标签中的内容,v-bind是针对标签中的属性

    v-bind案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入Vue cdn 的网址-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    </head>
    <body>
        <div id="app" >
            <a v-bind:href="url" v-bind:title="title">v-bind的缩写是冒号:</a>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    url:"www.baidu.com",
                    title:'百度'
                }
            })
        </script>
    </body>
    </html>

    v-on绑定事件v-on方法处理器和内联处理器

    方法处理器内联处理器

    v-on对象处理v-on:keyup监听按键触发

    事件修饰符

    阻止事件冒泡--stop实现捕获触发事件的机制--capture只会阻止自己身上冒泡行为--self阻止默认事件--prevent只触发一次默认行为

    v-on绑定事件可以用v-on指令监听DOM事件

    <button v-on:click="alert('a')">v-on</button>

    v-on的缩写@符号

    v-on方法处理器和内联处理器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入Vue cdn 的网址-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    </head>
    <body>
        <div id="app" >
            <button v-on:click="doThis">v-on按钮</button>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    // es6 语法
                    doThis(){
                        if (event) {
                            alert(event.target.tagName)
                        }
                        alert('我是方法处理器')
                    }
                },
            })
        </script>
    </body>
    </html>

    使用的时候带括号:'<button v-on:click="doThat('hello', $event)"></button>'
    
    带括号的好处是可以传参,但不自带evet 事件,想使用event事件需要$event
    参数传入

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入Vue cdn 的网址-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    </head>
    <body>
        <div id="app" >
            <button v-on:click="doThat('hello', $event)">v-on按钮</button>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    // es6 语法
                    doThat(parameter, event){
                        let msg = parameter   "内联方法";
                        if (event) {
                            alert(event.target.tagName)
                        }
                        alert(msg);
                    }
                },
            })
        </script>
    </body>
    </html>

    内联处理器是指的什么呢?

    <div id="example-3">
      <button v-on:click="say">Say hi</button>
      <button v-on:click="say">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function () {
          alert('hello');
        }
      }
    });

    写法:

    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message);
        }
      }
    });

    差异一个有括号,一个没括号,对吧?

    没括号的这个,直接就是函数名,有括号的这个,实际是一条JS语句,有括号的这个就叫『内联处理器』。

    没括号的有这么一个好处:

    <div id="example-3">
      <button v-on:click="say">Say hi</button>
      <button v-on:click="say">Say what</button>
    </div>

    new Vue({
      el: '#example-3',
      methods: {
        say: function (event) {
          alert(event.target.tagName);
        }
      }
    });

    有括号的

    让有括号的也能得到无括号娘胎里自带的event参数

    <div id="example-3">
      <button v-on:click="say('hi', $event)">Say hi</button>
      <button v-on:click="say('what', $event)">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message, event) {
          alert(message);
          alert(event.target.tagName);
        }
      }
    });

    事件处理监听事件

    <div id="example">
     <button v-on:click="counter  = 1">Add</button>
     <p>the button{{counter}}time</p>
    </div>

    var example = new Vue({
     el: '#example',
     data: {
      counter: 0
     }
    })

    事件处理方法:

    <div id="example-2">
      <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>
    var example2 = new Vue({
     el: '#example-2",
     data: {
      name: "Vue.js"
        },
     methods: {
      greet: function(event) {
         alert('hello'   this.name)
         if(event){
          alert(event.target.tagName)
            }
            }
            }
    })
    example2.greet()

    内联处理器中的方法

    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })

    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>
    
    // ...
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }

    事件修饰符:在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()

    Vue.js 为 v-on 提供了事件修饰符

    .stop
    .prevent
    .capture
    .self
    .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>

    v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>

    这个 .passive 修饰符尤其能够提升移动端的性能

    不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

    按键修饰符

    <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
    <input v-on:keyup.13="submit">
    
    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">
    
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
    
    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

    自动匹配按键修饰符

    <input @keyup.page-down="onPageDown">

    处理函数仅在 $event.key === 'PageDown' 时被调用

    系统修饰键

    .ctrl
    .alt
    .shift
    .meta
    <!-- Alt   C -->
    <input @keyup.alt.67="clear">
    
    <!-- Ctrl   Click -->
    <div @click.ctrl="doSomething">Do something</div>
    
    
    .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
    
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="onClick">A</button>
    
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="onClick">A</button>
    
    .left
    .right
    .middle

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达达的简书!

    这是一个有质量,有态度的博客

    博客

    展开全文
  • Vue常用的指令及用法

    2020-07-22 08:34:35
    v-if 可以判断一个属性 的长度 或 是否true 等等 来进行控制隐藏显示 可以结合 v-else 来使用 注意:使用v-else 必须要有v-if 如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。 <div v-...

    v-if :判断是否隐藏

    • v-if 可以判断一个属性 的长度 或 是否true 等等 来进行控制隐藏显示 可以结合 v-else 来使用 注意:使用v-else 必须要有v-if
    • 如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。
    <div v-if="list.lenght > 0"> v-if </div>  
    
    <div v-else> v-else </div>
    

    v-for:数据循环

    • v-for循环普通数组
    //item代表是循环的值 ,  index代表是每一项 也可以说是下标 :key 代表标识 
     <div v-for="(item,index) in list" :key="index">
           <p>{{ item }}</p>
     </div>
    

    v-bind:class:绑定一个属性

    最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染)

    :class="{ 'active': isActive }"
    

    判断是否绑定一个active

    :class="{'active':isActive==-1}"  
    或者
    :class="{'active':isActive==index}"
    

    v-model:实现数据双向绑定

    <input type="text" v-model="search">
    data(){
         search:''
    }
    

    运行结果:
    在这里插入图片描述

    v-show:判断隐藏显示

    <div  v-show="show">v-show</div>
     // true 显示   false 隐藏
     data () {
            return {
                show:false,
                
            }
        },
    

    这里重点说明一个v-if和v-show的区别:

    共同点:都是通过判断绑定数据的true/false来展示的

    不同点:v-if只有在判断为true的时候才会对数据进行渲染,如果为false代码删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
        v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏

    展开全文
  • 主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
  • 使用时请注意: 由于在开发中,属性绑定使用特别频繁 ,所以经常被简写成一个冒号 : 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...

    语法:v-bind:(一般简写成一个冒号)

    使用时请注意:

    由于在开发中,属性绑定使用特别频繁 ,所以经常被简写成一个冒号 :

    代码演示:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>v-bind属性绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
    
            <!-- v-bind:指令  表示【属性绑定】,在开发中,使用特别频繁 -->
            <!-- <button v-bind:title="titleStr">按钮</button> -->
            <!-- 可以简写成一个冒号: -->
            <button :title="titleStr">F12查看当前dom属性</button>
    
        </div>
    
    <script>
        var vm = new Vue({
                el:'#app',
                data:{
                    flag:true,
                    titleStr:'v-bind动态绑定'
                }
        })
    </script>
    </body>
    </html>
    
    展开全文
  • Vue指令及其用法

    千次阅读 2019-06-23 22:16:02
    Vue 1.0 叫它 属性指令( 借鉴Angular来的 ) Vue 2.0 统称为 ‘指令指令是用一个 v-xxx 表示 指令是用来操作dom Vue中不允许直接操作dom mustache语法 — 属性写法 的属性值是直接写数据的,不需要使用 {{ ...

    指令

    指令是绑定在dom属性上的
    这种属性绑定的形式就是为了操作dom,我们给这种属性起了一个好听的名字
    Vue 1.0 叫它 属性指令( 借鉴Angular来的 )
    Vue 2.0 统称为 ‘指令’

    指令是用一个 v-xxx 表示

    指令是用来操作dom

    Vue中不允许直接操作dom

    mustache语法 — 属性写法 的属性值是直接写数据的,不需要使用 {{ }}

    v-html

    可以解析标签型数据( 可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML )

    v-text

    可以将一个数据展示在一个dom的内容中( 相当于使用了 innerText)

    <body>
      <div id="app">
        <p v-html = "h"></p>
        <p v-text = "h"></p>
      </div>
    </body>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
         msg: 'hello Vue.js',
         h: '<h3> hello Vue.js </h3>',
         flag: true
        }
      })
    </script>
    

    条件渲染的指令

    v-show

    可以控制一个dom的显示隐藏( 这个指令操作的是dom的display属性 )

    v-if

    可以控制一个dom的存在与否( 创建 和 销毁 )

    v-if vs v-show 区别

    • v-if 操作的是dom元素( 组件 ) 的创建或是销毁
    • v-show 操作的是dom元素的display属性
    • v-if可以有多种使用形式: 单路分支, 多路分支, 双路分支
    • v-show 只能写一个单路形式
      一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
      因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    v-if

    v-else

    可做双路分支的一个判断

    v-if

    v-else

    v-else-if

    可做多路分支的一个判断

    <body>
      <div id="app">
        <h3> v-show </h3>
          <p v-show = "showFlag"> v-show指令 </p>
        <hr>
        <h3> v-if - 单路分支 </h3>
          <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
        <h3> v-if - 双路分支 </h3>
          <p v-if = "ifFlag">  双路分支 成立  </p>
          <p v-else> 双路分支不成立 </p>
    
        <h3> v-if - 多路分支 </h3>
        <p v-if = " type === 'A'"> A </p>
        <p v-else-if = " type === 'B'"> B </p>
        <p v-else> C </p>
      </div>
    </body>
    <script>
    var vm = new Vue({
        el: '#app',//给跟实例一个模板( 挂载 )
        data: { 
          showFlag: true,
          ifFlag: false,
          type: 'A'
        }
      })
    </script>
    

    v-for

    Vue中的循环遍历

    1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
    2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
    3. json类型数据
    4. 嵌套类型数据

    key:
    给每一个循环的列表添加一个唯一的标识

    使用指令 v-bind 来绑定 key

     <div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>
    

    如果有id,那么我们就使用id,如果没有,我们才会选择index

    <body>
      <div id="app">
        <h3> 数组 </h3>
        <ul>
          <li v-for = " (item,index) in arr ">
            <p> item :{{ item }} --  index: {{ index }}</p>
          </li>
        </ul>
        <hr>
        <h3> 对象 </h3>
        <ul>
          <li v-for = "(item,key,index) in obj"> 
            <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
          </li>
        </ul>
        <hr>
        <h3> json </h3>
        <ul>
          <li v-for = "(item,index) of json">
            <p> id: {{ item.id }} </p>
            <p> task: {{ item.task }} </p>
            <p> {{ index }} </p>
          </li>
        </ul>
        <hr>
        <h3> 嵌套 </h3>
        <ul>
          <li v-for = " item in lists ">
            <p> id: {{ item.id }} </p>
            <ul>
              <li v-for = "todo in item.todos">
                todos中的数据 -- {{ todo }}
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </body>
    <script>
    new Vue({
        el: '#app',
        data: {
          arr: [1,2,3,4],
          obj: {
            id: 1,
            name: '程序员',
            sex: 'man',
            age: 18
          },
          json: [
            {
              id: 1,
              task: '敲代码1'
            },
            {
              id: 2, 
              task: '敲代码2'
            }
          ],
          lists: [
            {
              id: 1,
              todos: {
                id: 1,
                name: '张三'
              }
            },
            {
              id: 2,
              todos: {
                id: 2,
                name: '李四'
              }
            }
          ]
        }
      })
    </script>
    
    

    v-bind

    单项数据绑定: 将一个数据绑定在一个dom的属性上

    简写

     <div v-for = " (item,index) in lists" :key = " item.id "></div>
    

    类名绑定

    vue中如何给dom添加类名
    1. 直接在dom上绑定类名
    2. vue中类名绑定 - 对象形式

    目的: dom身上属性class 要和 数据绑定
    解决:v-bind
    数据中key,我们起的和绑定的对象中的key一样,但是你得知道这两个东西不一样

      <p :class = "{ size,bg_color }"></p>
      //size是自定义的属性, 它的属性值是undefined, 相当于是false
      <p :class = "{ size: true, bg_color: true }"></p>
      //size也是自定义属性,他的属性是true,那么就会加上去
      <p :class = "{ [s]: true, [bg_color]: true }"></p>
    

    格式: v-bind:class = "{ 属性: boolean }"
    格式: v-bind:class = "{ [data]: boolean }"

    3. vue中类名绑定的形式 - 数组的形式 【 推荐 】
    格式: v-bind:class = "[ 数据 ]"

    4. 类名绑定不会覆盖原先的类名

    5. 为什么要绑定类名
    指令是用来操作dom
    目的: 为了将来通过数据来操作类名,类名操作dom

    <style>
        .size{
          width: 100px;
          height: 100px;
        }
        .bg_color{
          background: red;
        }
      </style>
    <body>
      <div id="app">
        <h3> v-class </h3>
        <hr>
        <h3> vue中类名添加第一种 </h3>
        <p class="size bg_color"></p>
        <hr>
        <h3> vue中类名添加第二种 - 对象的形式</h3>
        <p :class = "{ size: true,bg_color: false }"></p>
        <p :class = "{ size: true, bg_color: true }"></p>
        <p :class = "{ [s]: true, [bg_color]: true }"></p>
        <p :class = "{ [s]: 5>3?true: false, [bg_color]: true }"></p>
        <hr>
        <h3> vue中类名添加的第三种形式 - 数组形式( 推荐 )</h3>
    
        <p :class = "['size','bg_color']"></p>
    
        <p :class = "[ s, bg_color ]"></p>
    
        <p :class = "[ flag? s:'box', bg_color]"></p>
        <p :class = "[ flag? s:'box', bg_color]"  class = "yyb"></p>
    
      </div>
    </body>
    <script>
     new Vue({
        el: '#app',
        data: {
          msg: 'hello Vue.js',
          s: 'size',
          bg_color: 'bg_color',
          flag: true
        }
      })
    
    
      var a = {
        name: 'yyb'
      }
      var b = {
        name: 'liancheng'
      }
    </script>
    

    样式绑定

    样式的绑定:
    v-bind: style = “”
    1. 对象的形式
    2. 数组的形式

    <body>
      <div id="app">
        <h3> style </h3>
        <hr>
        <h3> style - 对象形式 </h3>
        <p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>
    
        <h3> style - 数组的形式 </h3>
    
        <p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>
    
        <p :style = "[ size,bg ]"></p>
      </div>
    </body>
    <script>
    new Vue({
        el: '#app',
        data: {
          size: {
            width: '100px',
            height: '100px'
          },
          bg: {
            background: 'purple'
          }
        }
      })
    </script>
    

    v-on

    事件 v-on使用

    • 事件源

    • 事件绑定形式

    • 事件类型

    • 事件处理程序

    v-on:eventType = " handlerName "
    //简写  v-on:    --- > @
    
    <body>
      <div id="app">
        <button v-on:click = "helloHandler"> 点击 </button>
        <button @click = "helloHandler"> 点击 </button>
      </div>
    </body>
    <script>
    var vm = new Vue({
        el: '#app',
        methods: {
          // 存放事件处理程序
          helloHandler () {
            alert( 'hello' )
          }
        }
      })
      console.log( 'vm', vm )
    </script>
    

    问题: 如果事件处理程序中有三个参数,第三个参数才是事件对象e,如何实现
    分析: 我们发现事件处理程序中的第三个参数 e 不在是事件对象了,而是一个undefined
    解决: 在函数执行时,传入一个实际参数 $event 来代表事件对象

    <body>
      <div id="app">
        <!-- <button v-on:click = "helloHandler"> 点击 </button> -->
        <button @click = "helloHandler( 10,20,$event)"> 点击 </button>
      </div>
    </body>
    <script>
    var vm = new Vue({
        el: '#app',
        methods: {
          // 存放事件处理程序
          helloHandler ( a,b,e ) {
            console.log( a )
            console.log( b )
            console.log( e )
          }
        }
      })
      console.log( 'vm', vm )
    </script>
    

    v-model

    双向数据绑定
    默认绑定value值
    v-model应用于表单元素

    <body>
      <div id="app">
        <input type="text" v-model = "msg">
        <p> {{ msg }} </p>
      </div>
    </body>
    <script>
    new Vue({
        el: '#app',
        data: {
          msg: 'hello Vue.js'
        }
      })
    </script>
    

    记得引入Vue.js的cdn或是安装模块来使用

    //https://www.bootcdn.cn/
    
    展开全文
  • 主要为大家详细介绍了Vue指令的钩子函数使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多。 什么是图片懒加载 当我们向下...
  • 问题描述,在vue的for循环中使用指令,然后对数据进行筛选的时候,发现指令没有起作用。   如图前面的图标是根据文件名的后缀名,返回响应图标的,通过指令实现的。然后我们在搜索框中删选以后,数据更新了,但是...
  • 什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
  • 主要介绍了vue自定义指令directive的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 插值表达式是vue框架提供的【指令】 插值表达式中 不可以写代码片段 会报错 属性节点中不能使用插值表达式,如果要为元素节点动态绑定数据,我们要用 v-bind 动态绑定属性(下篇文章讲) 代码演示: < ! ...
  • 今天小编就为大家分享一篇vue 使用自定义指令实现表单校验的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue自定义指令用法

    2020-05-12 11:42:12
    vue中,普通 DOM 元素进行底层操作,这时候就可能用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令。 自定义指令和自定义组件一样,也是先注册后使用,其注册和组件的注册很类似,也分为...
  • 但是这种方法是与根实例写在同一个文件中,如果要同时注册多个全局组件,就会使根实例文件过重,因此使用Vue.use()来“安装”全局组件,就显得更轻一些。 方法: 1.新建一个plugins文件夹 2.在文件夹中创建放置全局...
  • v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中的 v-show 指令及用法详解,需要的朋友可以参考下
  • Vue自定义指令使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数 2....
  • Vue自定义指令封装及用法

    千次阅读 多人点赞 2020-02-24 16:02:41
    Vue自定义指令 vue中的指令很多,例如v-if,v-for,v-model等等,当然尤大大也给我们提供了自定义属性这一 玩意儿,让我们也可自己定义指令,例如v-hello,v-fuck等等,那我们为什么需要自定义指令呢?那好,我就问你一...
  • 1.什么是Vue.js 指令 指令是带有 v- 前缀的特殊属性 2.Vue.js 指令的用途 给元素添加特殊功能 它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,...
  • vue 指令使用

    2018-08-21 21:14:29
    指令的定义 通过全局API的定义 Vue.directive 定义指令的多种方式 简单定义 Vue.directive('test', function(el, binding, vnode) { // el 是当前元素 el.style=&quot;color:&quot; + ...
  • 节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子: function throttle (method, ...
  • 主要介绍了Vue指令v-for遍历输出JavaScript数组json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
  • 使用时请注意:    1. 当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。 如果数据项的顺序被改变,Vue则不是移动DOM元素来匹配数据项的顺序,而是简单复用此处的每个元素,并且确保它在...
  • 不同的指令可能有相同的修饰符,使用修饰符一定要找 对应指令 下的修饰符 多看api 才能知道有哪些修饰符,修饰符可以连着用, 自定义修饰符可以直接跟在参数,也可以跟在数据后 自定义指令是为了满足千奇百怪的场景...
  • 本文实例总结了vue自定义指令用法。分享给大家供大家参考,具体如下: 自定义指令: 一、属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); 参数> 指令名称: v-red -> red * 注意: ...
  • vue自定义指令定义及使用方式

    千次阅读 2020-08-01 13:27:19
    //el代表被绑定指令的哪个元素,且函数中的第一个参数都为el.el是一个原生的js对象,里面有些元素的dom方法 // 绑定到元素身上时,数据尚在内存中,无法在页面中显示,所以el.focus()没有效果,而console.log('...
  • 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...
  • Vue指令用法1

    2019-06-02 10:09:43
    Vue指令用法1 先简单介绍Vue的特点: 1、是一套构建用户界面的框架,有提过双向数据绑定的功能,实现前后端的相互通信。 2、只关注视图层,也就是说,通过框架中所提供的指令,使得前端只需要关心数据的业务逻辑,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,212
精华内容 15,684
关键字:

vue的指令及用法

vue 订阅