以下代码公共样式属性

<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>


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

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>

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