vue知识点总结（持续更新）

以下代码公共样式属性

<style>
    .hidden {
        display: none;
    }

    .show {
        display: block;
    }

    .jz {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border: 1px solid green;
        text-align: center
    }
</style>

• v-html与v-text区别

<template>
    <div style="display:flex;justify-content: center;
    align-items:center; width: 100%;height: 100%;
    border: 1px solid green;text-align:center">
        <div style="width: 500px;height: 300px;border: 1px solid gold">
            <p style="margin-top: 145px" v-text="url"></p>
            <p v-html="url"></p>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                url: '<a href="www.baidu.com">百度一下</a>'
            }
        },
    }
</script>

v-html会对字符串进行html转义，v-text则不会

• 默认事件形参代码测试（event）

<template>
    <div class="jz">
        <button @click="test">fx is 1 years old</button>
        <br>
        <button @click="test1(2)">fx is 8 years old</button>
        <br>
        <button @click="test2(3, $event)">fx is 18 years old</button>
    </div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        methods: {
            test () {
                console.log(event)
            },
            test1 (num) {
                console.log(num)
                console.log(event)
            },
            test2 (num, event) {
                console.log(num)
                console.log(event)
            },
        }
    }
</script>

• vue阻止事件冒泡与事件的默认行为

<template>
    <div class="jz">
        <div style="width: 200px;height: 200px;background: red" @click="test5">
            <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
        </div>
        
        <a href="www.baidu.com" @click.prevent="test7">百度一下<a>
    </div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        methods: {
            test5 () {
                alert('out')
            },
            test6 () { // 阻止事件冒泡
                // event.stopPropagation()
                alert('inner')
            },
            test7 (event) { // 阻止事件的默认行为
                // event.preventDefault()
                console.log(event.keyCode)
                alert(event.target.value)
            }
        }
    }
</script>

• 按键修饰符
  enter => // enter键  tab => // tab键  
  delete (捕获“删除”和“退格”按键) => // 删除键
  esc => // 取消键      space => // 空格键      
  up => // 上 .down => // 下    
  left => // 左 .right => // 右
• 表单数据收集

<form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>
    <span>密码: </span>
    <input type="password" v-model="pwd"><br>
</form>

•   v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

  <p v-cloak>{{content}}</p>

• 全局指令，局部指令

  // 注册一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的容器对象
  Vue.directive('upper-text', function (el, binding) {
      console.log(el, binding)
      el.textContent = binding.value.toUpperCase()
  })
  /* eslint-disable no-new */
  new Vue({
      el: '#app',
      router,
      store,
      render: (h) => h(App)
  })
  

  <template>
      <div class="jz">
          <p v-upper-text="msg"></p>
          <p v-lower-text="msg"></p>
      </div>
  </template>
  
  <script>
      export default {
          data () {
              return {
                  msg: "I Like You"
              }
          },
          // 注册局部指令
          directives: {
              'lower-text'(el, binding) {
                  console.log(el, binding)
                  el.textContent = binding.value.toLowerCase()
              }
          },
      }
  </script>