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

    2019-10-31 08:42:34
    vue指令 指令式带有 v- 前缀的特殊特性v-textv-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指令指令式带有 v- 前缀的特殊特性v-textv-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

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

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

    欢迎关注达叔小生的简书!

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

    ca023a8f8547abf5acc3390f9813d0fb.png
    展开全文
  • vue自定义指令用法

    2020-05-12 11:42:12
    自定义指令和自定义组件一样,也是先注册后使用,其注册和组件的注册很类似,也分为全局注册和局部注册。只是注册组件时是使用的component关键字,而注册指令时要使用directive关键字。 全局注册使用自定义指令: ...

    在vue中,有的情况下,仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令。

    自定义指令和自定义组件一样,也是先注册后使用,其注册和组件的注册很类似,也分为全局注册和局部注册。只是注册组件时是使用的component关键字,而注册指令时要使用directive关键字。

    自定义指令有以下几个钩子函数:

    • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    • update:所在组件的 VNode 更新时调用(但是可能发生在其子 VNode 更新之前)。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    • unbind:只调用一次,指令与元素解绑时调用。

    指令钩子函数会被传入以下参数:

    • el:指令所绑定的元素,可以用来直接操作 DOM。
    • binding:一个对象,包含以下 property:
      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
      • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      • expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
      • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
      • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
    • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

    举个例子:

    <div id="app">
      <input v-mydirective:[pos]="100"/> 
    <div>
    <!-- 这里的pos是动态指令参数 -->
    

    全局注册使用自定义指令:

    Vue.directive('mydirective',{
      // 钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      bind:function(el,binding,vnode){
        el.style.position = 'fixed'
        var s = (binding.arg == 'left' ? 'left' : 'top')
        el.style[s] = binding.value + 'px'
      },
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      },
      // 钩子函数update:每当元素本身更新(但是子元素还未更新)时触发
      update:function(el,binding,vnode,oldVnode){
        if(bingding.oldValue!== bingding.value){
          ...
        }
      },
    })
    

    局部注册:

    new Vue({
      data:{
        pos: 'left'
      },
      directives:{
        'mydirective':{
          bind:function(el,binding,vnode){
            el.style.position = 'fixed'
            var s = (binding.arg == 'left' ? 'left' : 'top')
            el.style[s] = binding.value + 'px'
          },
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          },
          update:function(el,binding,vnode,oldVnode){
            ...
          },
        }
      }
    })
    

    template内部写法:

    export default{
      data(){
        return{
          pos: 'left'
        }
      },
      directives:{
        'mydirective':{
          bind:function(el,binding,vnode){
            el.style.position = 'fixed'
            var s = (binding.arg == 'left' ? 'left' : 'top')
            el.style[s] = binding.value + 'px'
          },
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          },
          update:function(el,binding,vnode,oldVnode){
            ...
          },
        }
      }
    }
    

    参考:
    vue官网-自定义指令

    展开全文
  • 语法:v-for: 使用时请注意:    1. 当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地...为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用重新排序现有元素,需要为每项提供一个唯一的ke...

    语法:v-for:

    使用时请注意:

       1. 当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。 如果数据项的顺序被改变,Vue则不是移动DOM元素来匹配数据项的顺序,而是简单复用此处的每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

       2.为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一的key属性。

    v-for循环普通数组、对象数组、以及对象属性,代码演示:
    <!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>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     
    </head>
    <body>
        <div id="app" >
         		<h3>一、使用v-for循环普通数组</h3>
        		<!-- 循环遍历把数据放到p标签里 -->
            	<!-- <p v-for="(item,i) in arr">索引:{{i}},姓名:{{item}}</p> -->
           		<!-- 如果没有i可以省略小括号 -->
            	<p v-for="item in arr">姓名:{{item}}</p>
            	<hr/>
         		<h3> 二、使用v-for循环对象数组</h3>
         		<ul>
    	            <li v-for="(item,i) in heros">
    	                索引:{{i}} - ID: {{item.id}} - 
    	                姓名:{{item.name}} - 年龄:{{item.age}}
    	            </li>
    	        </ul>
    	        <hr/>
    	 		<h3> 三、使用v-for循环对象上的属性</h3>
    	  		<p v-for="(val,key) in obj">属性:{{key}},名称:{{val}}</p>
            	<p v-for="i in 5">{{i}}</p>
        </div>
    <script>
        var vm = new Vue({
                el:'#app',
                data:{
                   arr:['a','b','c'],
                   heros:[{
                         id:0,
                         name:'a',
                         age:16
                      },
                      {
                          id:1,
                          name:'b',
                          age:17
                      },
                      {
                          id:2,
                          name:'c',
                          age:17
                      }],
                      obj: {
                          id:1,
                          name:'小美子',
                          age:17
                     }
                },
                methods:{
                }
        })
    </script>
    </body>
    </html>
    
    
    
    展开全文
  • 语法:v-model: 使用时请注意: ... v-model 是vue中唯一支持双向绑定的指令 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp...
  • vue 指令和模板

    千次阅读 2017-06-05 23:05:22
    一、vue指令vue指令有很多,比如: v-bind, v-click, v-style, v-class, v-once, v-if, v-else-if, v-model 等等。 这些指令我就不一一讲解用法了。具体用法可以去看vue 官网的APIhttps://cn.vuej
  • vue自定义指令用法

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

    2018-11-28 20:54:00
    指令v-text v-html <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > Title title > < meta name ="viewport" content ="width=device-width, initial...
  •    1.v-if v-show 的作用都是切换界面上元素的显示或隐藏的    2. v-if 的实现原理:通过动态创建或移除元素实现元素的显示与隐藏    3. v-show 的实现原理:通过动态切换元素的display样式,来控制元素的...
  • Vue1.0中过滤器和Vue2.0中自定义指令用法
  • vue指令 v-html v-text 的用法和区别 作用: 都是用于渲染页面 区别: v-html可以识别html标签并渲染到页面中,而v-text不能识别标签,只可以渲染文本。 用法: <div id="app"> <p v-html="html">我...
  • 一、指令 1、什么是指令?...实现原理是:先让插值表达式隐藏,当VUE编译结束后把结果显示在页面。 3、v-text / v-html / v-pre注意点 ① v-text::可替代v-cloak, 用法比v-cloak简洁; <span v-text=
  • Vue尽可能通过简单的API实现响应的数据绑定组合的视图组件。 vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变,模型内容也跟着改变, 业界称...
  • vue指令

    2021-03-22 22:58:14
    定义好这个容器下面在开始写js代码的时候引入一下vue文件,vue也就是一个对象一个实例对象(就是一个被new调用的一个对象在这个实例对象中有一些配置,我先简单写一些基础的指令和用法) 在引入这个文件之后就开始...
  • 自定义指令是用来操作DOM的。自定义指令就是一种有效的补充扩展,不仅可用于定义任何的DOM操作,并且是可复用的。这篇文章主要介绍了Vue.js自定义指令用法与实例解析,一起看看吧
  • vue中插值表达式14个vue指令详解

    千次阅读 2020-03-29 15:27:28
    在学习vue时,插值表达式和vue指令可谓是基础中的基础,这篇文章,就让你彻底了解怎么使用插值表达式vue中所有指令的用法。 一、插值表达式:{{ }} 可以将vue中的数据填写在插值表达式中 <div id="app">{{...
  • Vue指令学习文档

    千次阅读 2021-03-09 17:24:13
    文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on``跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写``事件修饰符`事件修饰符:Vue指令之`v-model`...
  • - Vue指令 - Vue基本属性 - Vue组件通信 Vue 基本属性 data属性 在.vue扩展名文件下,data属性必须定义为函数形式,在普通的Vue对象中,data属性就是一个对象。 相当于react中state,代表了当前组件的状态;组件...
  • Vue的基本代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
  • Vue指令

    2019-10-18 21:09:05
    属性前加 v (指令【 借鉴angular 】) js的支持性 null undefined 是不会显示的,其他数据类型都是支持的,可以显示的 挂载在window身上的全局属性,我们都不能用的: 比如; console alert mustache语法中 不写...
  • 注意:Vue.directive(‘参数名称’,{}) 定义全局指令,它有两个参数 参数1:指令名称,注意在定义的时候,指令名称前不需要加 v- 前缀,但是在调用的时候,必须加v- 前缀。 参数2:参数2是一个对象,这个对象身上有...
  • 市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景用例,以致于即便明白了怎么写,也不知道怎么用。本文不讲语法,就讲自定义指令用法。  自定义指令是用来操作DOM的。尽管Vue推崇数据...
  • vue指令参考

    2019-03-17 20:12:42
    今天主要学习一下vue指令,想要代码撸得快,就要多看书,多看看官方的文档学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨。进行Vue的指令烹饪吧。 v-text :...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 443
精华内容 177
关键字:

vue指令和用法

vue 订阅