精华内容
下载资源
问答
  • 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指令用法1

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

    Vue指令用法1

    先简单介绍Vue的特点:

    • 1、是一套构建用户界面的框架,有提过双向数据绑定的功能,实现前后端的相互通信。
    • 2、只关注视图层,也就是说,通过框架中所提供的指令,使得前端只需要关心数据的业务逻辑,不用关心dom是如何渲染的。

    Vue指令及其试用场景:

    一、适用于文本的指令
    • v-text:使用该指令用来显示文本内容,但不会解析html标签,即把标签当做文本显示出来。

    • v-html:能够解析html标签,把文本内容渲染成指定的样式之后再显示。

    • v-cloak:(不常用),主要用来解决文本显示前闪烁的问题。场景一般为:当我们设置某个块的淡入淡出的速度很慢的时候,在页面显示内容时,会先显示出对应的html标签以及文本内容,然后在慢慢的闪烁跳转显示为html标签被解析后,内容被渲染之后的效果。

    二、属性绑定和数据绑定指令
    • v-bind:用来绑定属性。缩写是冒号。
    • v-model:实现数据的双向绑定,v-model可以将M中的数据渲染到V中,也能将V中的数据绑定到M层。但只能运用在表单元素中(text、checkbox、radio、button等)
    三、数组循环指令
    • v-for:用来实现对数组的循环遍历,通过键值对来实现查找下标和下标对应的值。
    四、事件绑定机制*
    • v-on:可简写为@,这类指令适用于按钮的点击事件.类似于jQuery中$(“button”).click(function(){})。
    <input type="button" @click="myFunction"> 
     // 该函数调用不需要传参
    <input type="button" v-on:click="myFunction()">  
    // 在methods中定义方法时,需要传递参数
    
    展开全文
  • 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

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

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

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

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

    ca023a8f8547abf5acc3390f9813d0fb.png
    展开全文
  • vue指令用法简单讲解

    2020-08-18 23:37:51
    vue指令 1.v-text 更新元素的文本内容。也可以使用 {{msg}} 插值。转义输出 <span v-text="msg"></span> <span>{{msg}}</span> 2.v-html 更新元素的文本内容。不转义输出 <span v-...

    vue指令

    总结了一些vue中常用指令及其用法 可能不是很完整 欢迎提出您的建议 之后我也会持续添加

    1.v-text

    更新元素的文本内容。也可以使用 {{msg}} 插值。转义输出

    	<span v-text="msg"></span>
    	<span>{{msg}}</span>
    
    2.v-html

    更新元素的文本内容。不转义输出

    <span v-html="msg"></span>
    
    3.v-show

    “v-show的用法与v-if基本一致,只不过v-show是改变元素的CSS属性display。当v-show表达式的值为true时,元素会显示,否则隐藏

    <div id="app" >
        	<p v-show="status==1">当status为1时,显示该行</p>
    	</div>
    	
    	<script>
        //创建vue实例
        var  vue=new Vue({
            el: '#app',
            data: {
                status: 2 	//当status为1时,隐藏
            }
        });
    	</script>
    
    4.v-if和v-else、v-else-if

    v-if为true时,显示v-if的内容,否则继续判断v-else-if的内容,如果为true则显示,否则判断下一个v-else-if,知道为true时显示,若v-else-if都为false,则显示v-else的内容
    v-else-if和v-else 前一兄弟元素必须为 v-if 或 v-else-if

    <h2 v-if="true">v-if</h2>
    <h2 v-else>v-else</h2>
    
    5.v-for

    当需要将一个数组遍历或枚举一个对象循环显示时候,我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用

    <div id="app">
    	<ul>
    		<li v-for="(user, index) in user"> {{ user.name }} </li>
    	</ul>
    </div>
    <script>
    	var app= new Vue ({
    	el: "#app",
    	data () {
    		return {
    			users: [
    				{ name: "zhangsan"},
    				{ name: 'lisi'}
    			]
    		}
    	}
    })
    </script>
    
    6.v-on

    处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
    普通使用 v-on:事件名=“函数名”
    简写方式 @事件名=“表达式”

    <button v-on:click="onClick"></button>
    <button @click="onClick"></button>
    
    7.v-bind
    v-bind指令用于给html标签设置属性。
    
    <!-- 完整语法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"></a>
    
    8.v-model
    在表单控件或者组件上创建双向绑定。
    
    	<div id="demo">
            <input v-model="msg">
            <p>{{msg}}</p>
        </div>
        <script>
            var demo = new Vue({
                el:'#demo',
                data:{
                    msg: "hello",
                },
            })
        </script>    
    
    9.v-pre

    跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑

    <span v-pre>{{hello word}}</span>   显示的是{{hello word}}
    <span v-pre>{{msg}}</span>     即使data里面定义了msg这里仍然是显示的{{msg}}
    
    10.v-cloak

    可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。

    <div id="app">
        {{context}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                context:'xxxxxxxxxxxxxxxxxxxxxx'
            }
        });
    </script>
    
    11. v-once

    被定义了 v-once 指令的元素或组件(包括元素或组件内的所有子孙节点)只能被渲染一次。首次渲染后,即使数据发生变化,也不会被重新渲染。一般用于静态内容展示。

    <div id="app">
        <div v-once>
            {{content}}
        </div>
    </div>
    script>
        var app = new Vue({
            el: '#app',
            data: {
                content:'xxxxxxx'
            }
        });
    
        this.content='123456789';
    </script>
    
    展开全文
  • Vue-指令用法

    2020-03-15 14:18:26
    指令用法 <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...Vue-指令用法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js...
  • Vue 指令相关用法

    2019-08-16 17:35:04
    Vue相关用法: v-text 绑定数据,等价于 {{}} 如下: <span v-text="msg"></span> <span>{{ msg }}</span> v-once 一次性插值,不会更新 <span v-once> {{ msg }}</span> ...
  • 主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
  • Vue指令用法

    2019-08-21 10:30:27
    1.v-text 更新元素的 textContent。 <span v-text="msg"></span> 等同于插值表达式 <...注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。 <div v-html="html">&...
  • vue自定义指令用法

    2019-12-23 18:21:24
    1、vue中的指令有: v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-once 2.自定义指令语法: // 注册一个全局自定义指令,例如 `v-focus` Vue.directive('指令名字', ...
  • vue 指令用法

    2017-03-12 23:21:00
    Vue.directive('my-directive', function (value) { var ul = "<ul class='box'>"; var li = ''; for(var i=0; i; i++){ li += "("+i+")'>"+value[i]+"</li>" } ul = ul + li + "</ul>"; this.el.innerHTML ...
  • Vue指令大全-用法

    2020-06-01 17:14:01
    1. v-text v-text主要用来更新textContent,可以等同于JS的text属性。 <span v-text="msg">...为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。 <div v-html="rawHtml"></div&g

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,196
精华内容 478
关键字:

vue指令用法

vue 订阅