hugo 怎么做网站googlechrome
目录
什么是vue指令
v-cloak
v-text
v-html
v-pre
v-show /v-if
v-else/v-else-if
v-on
v-bind
v-for
v-model
常用指令的修饰符
v-model 指令修饰符
事件修饰符
按键修饰符
什么是vue指令
指令就是带有 v- 前缀 的特殊 属性，不同的属性对应不同的功能。
分类汇总
- 内容渲染指令（v-html、v-text）
- 条件渲染指令（v-show、v-if、v-else、v-else-if）
- 事件绑定指令（v-on）
- 属性绑定指令 （v-bind）
- 双向绑定指令（v-model）
- 列表渲染指令（v-for）
v-cloak
- 【作用】解决浏览器在加载页面时因存在时间差而产生的
闪动问题- 【原理】先隐藏元素挂载位置，处理好渲染后再显示最终的结果
- 【注意】需要与CSS规则一起使用
如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上（id="app"顶级的div上）。
<style>[v-cloak] {display: none;}
</style>
<div v-cloak>{{ message }}
</divv-text
v-text：直接输出属性值，相当于 innerText。
- 【语法】
<p v-text="username">hi</p>，意思是将 username值渲染到 p 标签中
- v-text 填充纯文本
相比插值表达式更加简洁
不存在插值表达式的闪动问题
v-html
v-html：解析标签型数据，相当于innerHTML。
- 【语法】
<p v-html="showInfo">hi</p>，意思是将 showInfo值渲染到 p 标签中- 使用该语法，会覆盖 p 标签原有内容
- 使用该语法，能够将HTML标签的样式呈现出来。
v-pre
v-pre指令用于跳过这个元素和它的子元素的编译过程。可以用于显示原始的Mustache标签。
- 【语法】<span v-pre>{{ raw }}</span> 通过v-pre指令，可以让span元素及其子元素跳过Vue的编译过程，从而显示原始的
{{raw}}内容。- 跳过编译
- 显示原始内容
v-show /v-if
v-show
- 【语法】 v-show = “表达式” 表达式值为 true 显示， false 隐藏
- 【作用】 控制元素显示隐藏
- 【原理】切换 display:none 控制显示隐藏
- 【场景】频繁切换显示隐藏的场景
v-if
- 【语法】 v-if= “表达式” 表达式值 true显示， false 隐藏
- 【作用】 控制元素显示隐藏（条件渲染）
- 【原理】基于条件判断，是否创建 或 移除元素节点
- 【场景】要么显示，要么隐藏，不频繁切换的场景
v-else/v-else-if
- 【语法】 v-else v-else-if= “表达式”
- 【作用】 辅助v-if 进行判断渲染
- 【注意】要紧挨着v-if使用
v-on
- 【语法】v-on:事件名='内联语句' v-on:事件名='methods中的函数名'
- 【作用】 注册事件 = 添加监听 + 提供处理逻辑
- 【简写】@事件名（事件名：click、change、submit等等）
<body><div id="app"><!-- 内联语句 --><button @click="count--">-</button><span>{{ count }}</span><!-- methods中的函数 --><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">java</h1></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100.isShow: true},methods: {fn() { this.isShow = !this.isShow }}})</script>
</body>
v-bind
- 【语法】v-bind:属性名='表达式'
- 【作用】动态设置html标签——>src、url、title
- 【简写】:属性名='表达式'
v-bind对样式控制的增强
为了方便开发者进行样式控制，Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。
【语法】 class=”对象/数组”
- 对象 →键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类
<div class="box" :class="{ 类名1:布尔值，类名2:布尔值}"></div>使用场景：一个类名，来回的切换 (导航高亮切换)
- 数组 →数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
<div class="box":class="[ 类名1，类名2，类名3 ]"></div>适用场景：批量的添加或删除类
【语法】style="样式对象'
<diy class="box" style=" { csS属性名1: CSS属性值, CSS属性名2:CSS属性值 }" ></diV><div class="box" :style="width:'400px',height:'400px'}"></div>v-for
- 【语法】v-for="(item,index)in 数组'
- 【作用】基于循环多次渲染整个元素——>可以是‘数组’、‘对象’、数字...
- 【参数】item是每一项、index是下标。
- 【注意】v-for中的key，给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
1.key 的值只能是 字符串 或 数字类型。
2.key 的值必须具有 唯一性。
3.推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)。
v-model
- 【语法】v-model='变量'
- 【作用】给 表单元素 使用，双向数据绑定→ 可以快速 获取 或 设置 表单元素内容
双向绑定
1、数据变化→ 视图自动更新
2、视图变化- 数据自动更新
常用指令的修饰符
v-model 指令修饰符
.number: 输入字符串转为有效的数字。.trim: 输入首尾空格过滤。.lazy: 取代 input 监听 change 事件。
<input v-model.number="age" type="number"> <!-- 将输入值转为数字 -->
<input v-model.trim="username"> <!-- 自动过滤首尾空格 -->
<input v-model.lazy="message"> <!-- 不是即时更新，而是在 change 事件后更新 -->
事件修饰符
.stop 修饰符：阻止事件冒泡。
在内层元素使用了.stop 修饰符来阻止点击事件向外层元素进行冒泡，这样点击内层元素时就不会触发外层元素的点击事件。.prevent 修饰符：阻止事件的默认行为。
在<a>标签使用了.prevent 修饰符，点击链接时会调用 noReload方法，同时也会阻止浏览器刷新页面的默认行为。.capture 修饰符：使用事件捕获模式。
.capture修饰符来指示事件在捕获阶段处理，而不是冒泡阶段处理。.self 修饰符：只有事件由当前元素自身触发时才会触发处理函数。
使用了.self 修饰符来确保只有当点击当前元素自身时，才会触发事件处理函数。.once 修饰符：事件只会触发一次。
使用了.once 修饰符来确保事件只会在第一次触发时执行，之后的触发将被忽略。.passive 修饰符：指示浏览器不要阻止事件的默认行为。
使用了.passive 修饰符来告诉浏览器不要阻止默认行为，比如在事件处理函数中使用 event.preventDefault()。鼠标事件修饰符
.left 修饰符：表示左键鼠标按钮。.right 修饰符：表示右键鼠标按钮。.middle 修饰符：表示中键（滚轮键）鼠标按钮。
<template><div><!-- .stop 修饰符示例：阻止事件冒泡 --><div @click="outerClick"><div @click.stop="innerClick">点击此区域，不会触发外层的点击事件</div></div><!-- .prevent 修饰符示例：阻止默认行为 --><a @click.prevent="noReload" href="https://www.example.com">点击将不会刷新页面</a><!-- .capture 修饰符示例：使用事件捕获模式 --><div @click.capture="captureClick">在事件捕获阶段处理事件</div><!-- .self 修饰符示例：只有事件由当前元素自身触发才会触发处理函数 --><div @click.self="selfClick">只有点击当前元素时才触发事件处理函数</div><!-- .once 修饰符示例：事件只会触发一次 --><button @click.once="onetimeClick">点击按钮，事件只会触发一次</button><!-- .passive 修饰符示例：指示浏览器不要阻止事件的默认行为 --><div @touchmove.passive="onTouchMove">触摸移动时不阻止默认行为</div></div>
</template><script>
export default {methods: {outerClick() {console.log('外层点击事件被触发');},innerClick() {console.log('内层点击事件被触发');},noReload() {console.log('链接被点击');},captureClick() {console.log('捕获阶段处理点击事件');},selfClick() {console.log('当前元素触发点击事件');},onetimeClick() {console.log('点击事件只触发一次');},onTouchMove(event) {console.log('触摸移动事件被触发');event.preventDefault();}}
};
</script>按键修饰符
.enter 修饰符：当用户按下回车键时触发相应的事件处理函数。.tab 修饰符：当用户按下 Tab 键时触发相应的事件处理函数。.delete 修饰符：当用户按下 Delete 键时触发相应的事件处理函数。delete.esc 修饰符：当用户按下 Esc 键时触发相应的事件处理函数。.up 修饰符：当用户按下上箭头键时触发相应的事件处理函数。.space 修饰符：当用户按下空格键时触发相应的事件处理函数。.down 修饰符：当用户按下下箭头键时触发相应的事件处理函数。.left 修饰符：当用户按下左箭头键时触发相应的事件处理函数。.right 修饰符：当用户按下右箭头键时触发相应的事件处理函数。
<template><div><!-- 当用户按下回车键时触发事件处理函数 --><input @keyup.enter="onEnter"><!-- 当用户按下 Tab 键时触发事件处理函数 --><input @keyup.tab="onTab"><!-- 当用户按下 Delete 键时触发事件处理函数 --><input @keyup.delete="onDelete"><!-- 当用户按下 Esc 键时触发事件处理函数 --><input @keyup.esc="onEsc"><!-- 当用户按下上箭头键时触发事件处理函数 --><input @keyup.up="onUp"><!-- 当用户按下空格键时触发事件处理函数 --><input @keyup.space="onSpace"><!-- 当用户按下下箭头键时触发事件处理函数 --><input @keyup.down="onDown"><!-- 当用户按下左箭头键时触发事件处理函数 --><input @keyup.left="onLeft"><!-- 当用户按下右箭头键时触发事件处理函数 --><input @keyup.right="onRight"></div>
</template><script>
export default {methods: {onEnter() {console.log('Enter 键被按下');},onTab() {console.log('Tab 键被按下');},onDelete() {console.log('Delete 键被按下');},onEsc() {console.log('Esc 键被按下');},onUp() {console.log('上箭头键被按下');},onSpace() {console.log('空格键被按下');},onDown() {console.log('下箭头键被按下');},onLeft() {console.log('左箭头键被按下');},onRight() {console.log('右箭头键被按下');}}
};
</script>