vue 使用小技巧

你好小同志

已于 2023-04-25 13:09:32 修改

阅读量111

点赞数

文章标签： vue.js 前端 javascript

于 2023-04-18 10:17:17 首次发布

本文链接：https://blog.csdn.net/wangkangyang/article/details/130215612

版权

1如果渲染的数据只想使用1次可以用


  // 这个时候无论message 怎么变化页面都保持初始化的值
<div v-once> {{message}}</div>

2 vue中的动态参数如何使用

 
   data () {
   return {
     obj = { 
        event： 'click',
         name :'title'
      }
    }
  }

 <div  @[obj.event]='clickDiv' :[obj.name]></div>

3 事件绑定多个方法的语法

methods ： {
   handleBtnClick () { 
     console.log(1)
   },
  handleBtnClick1 () { 
     console.log(1)
   }
}

<div>
   <button @click="handleBtnClick(), handleBtnClick1 ()"></button>
</div>

4 vue常用的事件修饰符

 <div>
      <button @click.stop="">阻止冒泡</button>
      <button @click.prevent="">阻止默认事件</button>
      <button @click.capture="">改变</button>
      <button @click.self="">提交按钮</button>
      <button @click.once="">提交按钮</button>
      <button @scroll.once="">提交按钮</button>
      <!--  这个可以提高浏览器的性能 -->
      <button @scroll.passive="">提交按钮</button>
 </div>

5 组件之间的通信是单向数据流，如果需要双向绑定有两种方法

一、这是常用的方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue3 的模板语法</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
    </div>
    <script>
        
      const app = Vue.createApp({
        data() {
          return {
             count: 100,
          };
        },
        methods: {
          handleAdd (parm) { 
             this.count += parm
          }
        },
        template : ` 
           <counter-part @addcount="handleAdd"  :count='count' />
         `,
        
      })
      app.component('counter-part' , {
        props : ['count'] ,
        template : `<div @click="handleSon">{{count}}</div>`,
        methods : { 
          handleSon() { 
             this.$emit('addcount', this.count);
          }
        }
      })
      app.mount("#app")
    </script>
  </body>
</html>

二、利用vue 中的 v-model 的语法进行双向绑定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue3 的模板语法</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
    </div>
    <script>
        
      const app = Vue.createApp({
        data() {
          return {
             count: 100,
          };
        },
        methods: {
          handleAdd (parm) { 
             this.count += parm
          }
        },
        template : ` 
           <counter-part v-model="count" />
         `,
        
      })
     // 这里要注意modelValue 是固定写法， 不过也可以改变这个值具体的代码请移步百度
      app.component('counter-part' , {
        props : ['modelValue'] ,
        template : `<div @click="handleSon">{{modelValue}}</div>`,
        methods : { 
          handleSon() { 
             this.$emit('update:modelValue', this.modelValue + 3);
          }
        }
      })
      app.mount("#app")
    </script>
  </body>
</html>

6 vue的自定义指令使用小技巧

      //   如果说mounted 和updated 里面的js 表单式是一样的就可以用下面替换
      app.directives ('focus' , { 
       mounted(el , binding) {
         el.style.top = (binding.value +'px')
       },
       updated(el , binding) {
        el.style.top = (binding.value +'px')
       },
      })
      app.directives ('focus' , (el , binding)=> { 
        el.style.top = (binding.value +'px')
      })

7 vue 将标签传送到想要的标签位置例如挂载到body上面使用teleport

         <div class='arer'>
               <button @click="handleBtnClick">按钮</button>
               <teleport to="body">
                 <div class='mask' v-show = 'show'></div>
                </teleport>
            </div>