Hiccup博客

菜单

Hiccup
发布于 2023-04-09 / 29 阅读
0
0

Vue基本使用

#Vue

Vue 基本使用

模板（指令、插值）

  • 插值、表达式

  • 指令、动态属性

  • v-html：会有 XSS 风险，会覆盖子组件

<template>
    <div>
        <p>文本插值 {{message}}</p>
        <p>JS 表达式 {{ flag ? 'yes' : 'no' }} （只能是表达式，不能是 js 语句）</p>

        <p :id="dynamicId">动态属性 id</p>

        <hr/>
        <p v-html="rawHtml">
            <span>有 xss 风险</span>
            <span>【注意】使用 v-html 之后，将会覆盖子元素</span>
        </p>
        <!-- 其他常用指令后面讲 -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'hello vue',
            flag: true,
            rawHtml: '指令 - 原始 html <b>加粗</b> <i>斜体</i>',
            dynamicId: `id-${Date.now()}`
        }
    }
}
</script>

computed 和 watch

  • computed 有缓存，data不变则不会重新计算；

  • watch 如何深度监听？

  • watch 监听引用类型，拿不到oldval

computed缓存

<template>
    <div>
        <p>num {{num}}</p>
        <p>double1 {{double1}}</p>
        <input v-model="double2"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 20
        }
    },
    computed: {
        double1() {
            return this.num * 2
        },
        double2: {
            get() {
                return this.num * 2
            },
            set(val) {
                this.num = val/2
            }
        }
    }
}
</script>

Watch

<template>
    <div>
        <input v-model="name"/>
        <input v-model="info.city"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '双越',
            info: {
                city: '北京'
            }
        }
    },
    watch: {
        name(oldVal, val) {
            // eslint-disable-next-line
            console.log('watch name', oldVal, val) // 值类型，可正常拿到 oldVal 和 val
        },
        info: {
            handler(oldVal, val) {
                // eslint-disable-next-line
                console.log('watch info', oldVal, val) // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val
            },
            deep: true // 深度监听
        }
    }
}
</script>

class 和 style

  • 使用动态属性

  • 使用驼峰式写法

<template>
    <div>
        <p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
        <p :class="[black, yellow]">使用 class （数组）</p>
        <p :style="styleData">使用 style</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isBlack: true,
            isYellow: true,

            black: 'black',
            yellow: 'yellow',

            styleData: {
                fontSize: '40px', // 转换为驼峰式
                color: 'red',
                backgroundColor: '#ccc' // 转换为驼峰式
            }
        }
    }
}
</script>

<style scoped>
    .black {
        background-color: #999;
    }
    .yellow {
        color: yellow;
    }
</style>

条件渲染

  • v-if v-else 的用法，可使用变量，也可以使用 === 表达式

  • v-if 和 v-show 的区别
    v-if 为 fasle 的分支里的代码，不会绘制dom进行渲染，但是v-show即使为false对应的dom也会被渲染出来，只是追加了隐藏的样式；

  • v-if 和 v-show 的使用场景
    v-if 适用于一次渲染，或者dom切换频率较低的场景；
    v-show 适合于切换频率较高的场景；

循环（列表）渲染

  • 如何遍历对象？—— 也可以用 v-for

  • key 的重要性。key 不能乱写（如 random 或者 index）

  • v-for 和 v-if 不能一起使用！

事件

  • event 参数，自定义参数；
    event 是原生的event对象，MouseEvent，没有进行过任何装饰；
    事件被挂载到当前元素（event.target，event.currentTarget）；

<template>
    <div>
        <p>{{num}}</p>
        <button @click="increment1">+1</button>
        <button @click="increment2(2, $event)">+2</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 0
        }
    },
    methods: {
        increment1(event) {
            // eslint-disable-next-line
            console.log('event', event, event.__proto__.constructor) // 是原生的 event 对象
            // eslint-disable-next-line
            console.log(event.target)
            // eslint-disable-next-line
            console.log(event.currentTarget) // 注意，事件是被注册到当前元素的，和 React 不一样
            this.num++
            // 1. event 是原生的
            // 2. 事件被挂载到当前元素
            // 和 DOM 事件一样
        },
        increment2(val, event) {
            // eslint-disable-next-line
            console.log(event.target)
            this.num = this.num + val
        },
        loadHandler() {
            // do some thing
        }
    },
    mounted() {
        window.addEventListener('load', this.loadHandler)
    },
    beforeDestroy() {
        //【注意】用 vue 绑定的事件，组建销毁时会自动被解绑
        // 自己绑定的事件，需要自己销毁！！！
        window.removeEventListener('load', this.loadHandler)
    }
}
</script>

  • 事件修饰符，按键修饰符；

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<from 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>

按键修饰符

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

  • 【观察】事件被绑定到哪里？

表单

  • v-model

  • 常见表单项：textarea checkbox radio select

  • 修饰符：lazy number trim

Vue表单修饰符

去除获取的value值的首尾空格
<input type="text" v-model.trim="name"/>
当输入框失去焦点的时候才获取value值
<input type="text" v-model.lazy="name"/>
将获取的value转换为Number型的数据
<input type="text" v-model.number="age"/>

常见表单项

  • 多行文本

<template>
    <div>
        <p>多行文本: {{desc}}</p>
        <textarea v-model="desc"></textarea>
        <!-- 注意，<textarea>{{desc}}</textarea> 是不允许的！！！ -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            desc: '自我介绍'
        }
    }
}
</script>

  • 复选框

<template>
    <div>
        <p>复选框 {{checked}}</p>
        <input type="checkbox" v-model="checked"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checked: true
        }
    }
}
</script>

  • 多个复选框

<template>
    <div>
        <p>多个复选框 {{checkedNames}}</p>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checkedNames: []
        }
    }
}
</script>

  • 单选

<template>
    <div>

        <p>单选 {{gender}}</p>
        <input type="radio" id="male" value="male" v-model="gender"/>
        <label for="male">男</label>
        <input type="radio" id="female" value="female" v-model="gender"/>
        <label for="female">女</label>
    </div>
</template>

<script>
export default {
    data() {
        return {
            gender: 'male'
        }
    }
}
</script>

  • 下拉列表

<template>
    <div>
        <p>下拉列表选择 {{selected}}</p>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: ''
        }
    }
}
</script>

  • 下拉列表-多选

<template>
    <div>
        <p>下拉列表选择（多选） {{selectedList}}</p>
        <select v-model="selectedList" multiple>
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
</template>

<script>
export default {
	data() {
        return {
            selectedList: []
        }
    }
}
</script>

Vue 原理简介
Vue使用-简介

评论