vue中的重点指令什么是指令,指令使用的方式vue中的常见指令 v-text:内容渲染指令v-html:内容渲染指令v-for:列表渲染指令v-model:双向绑定指令v-on:事件绑定指令v-bind:属性绑定指令v-show:条件渲染指令v-if...
vue中的重点指令
- 什么是指令,指令使用的方式
- vue中的常见指令
v-text:内容渲染指令
v-html:内容渲染指令
v-for:列表渲染指令
v-model:双向绑定指令
v-on:事件绑定指令
v-bind:属性绑定指令
v-show
:条件渲染指令v-if
:条件渲染指令
vue中的常见指令: v-text
介绍:
v-text
是内容渲染指令,用来辅助开发者渲染 DOM 元素的文本内容
作用:
设置或更新元素的内容
语法:
<标签 指令='值'></标签>
,如<span v-text="msg"></span>
与插值表达式的共同点:
- 可以设置标签的内容
- 可以拼接字符串,使用api,三元表达式
与插值表达式的区别:
插值表达式可以部分更新,而v-text
会完全更新标签之间的内容,意味着如果标签之间如果还有其它的内容,使用v-text
会将原始的内容完全覆盖掉
<template>
<div>
<h1>v-text的使用</h1>
<!-- 使用插值 -->
<p>还有别的内容哦:{{msg}}</p>
<!-- 使用v-text -->
<p v-text="msg"></p>
<p v-text="msg.toUpperCase()"></p>
<p v-text="'我对你说'+msg">还有别的内容哦:</p>
</div>
</template>
<script>
export default {
data () {
return {
msg:'hello'
}
}
}
</script>
vue中的常见指令: v-html
介绍:
v-html
是内容渲染指令,用来辅助开发者渲染 DOM 元素的文本内容
作用:
设置或更新元素的内容
语法:
<标签 指令='值'></标签>
,如<div v-html="msg"></div>
与v-text的共同点
- 可以设置标签的内容,对标签之间的内容完全替换
- 可以拼接字符串,使用api,三元表达式
与v-text的区别
v-text
会将内容原样输出,而v-html
会对内容进行html解析,如果内容是合法的html结构,则会解析出对应的网页结构
<template>
<div>
<h1>这个文件主要说明v-html的使用</h1>
<h2>它和v-text一样,可以对标签之间的内容进行完整的更新,但是它可以解析html结构</h2>
<p>{{msg}}</p>
<p v-text='msg'>原始的内容</p>
<p v-html='msg'>原始的内容</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello <hr/>'
}
}
}
</script>
vue中的常见指令: v-for
介绍:
列表渲染指令,对数据进行动态渲染的
作用:
基于源数据多次渲染元素或模板块
语法:
//(1).遍历数组:value是数组的成员,index是数组的索引
<元素 v-for='(value,index) in 数组>{{value}}:{{index}}</元素>
//(2).遍历对象:value是对象的属性值,key是对象的属性名称,index是索引(一般不用)
<元素 v-for='(value,key,index) in 对象>{{value}}:{{key}}:{{index}}</元素>
使用方式:
你想循环生成什么结构,就在这个结构上添加v-for
key的作用及使用式
- 当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。
- 为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能。此时,需要为每项提供一个唯一的 key 属性
- key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性(即:key 的值不能重复)
③ 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
④ 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
⑤ 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)
vue中的常见指令: v-model
介绍:
vue 提供了 v-model
双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据
作用:
可以实现数据与元素的双向绑定
- 数据变化 会影响dom元素
- dom元素中的内容变化也会影响数据
语法:
<标签 v-model='数据'></标签>
,如<input v-model="msg"/>
使用限制:
不是任何的元素都能添加v-model
,只有input
,textarea
,select
可以使用v-model
使用场景:
一般用于展示默认数据或需要收集用户数据的场景
常用修饰符
为了方便对用户输入的内容进行处理,vue 为 v-model 指令提供了 3 个修饰符,分别是
vue中的常见指令: v-on
介绍:
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript
代码。
作用:
为元素绑定事件。表达式可以是一个方法的名字或一个内联语句
- 事件类型由
v-on
后面的参数决定 - 在普通元素上时,只能监听原生
DOM
事件 v-on
可以简写为@
语法:
自定义函数定义过程
用户自定义函数应该在methods
中定义
- methods是实例中单独的结构,主要用于定义用户自定义函数
- methods中的this指向当前的组件实例,通过this可以访问组件实例的其它成员
- data中的this指向null,意味着无法进行具体的业务处理
参数的传递
- 可以选择是否传递参数
- 在指定处理函数的时候可以进行参数的传递
- 参数传递的细节
- 如果事件处理函数没有手动的传递参数,那么就会默认传递事件源对象
- 如果手动的传递了参数,那么默认的事件源对象就不再传递了
- 如果还想使用事件源对象,则需要手动的传递 e v e n t ( event( event(event名称绝对不能改)
-
e
v
e
n
t
是
v
u
e
提
供
的
特
殊
变
量
,
用
来
表
示
原
生
的
事
件
参
数
对
象
e
v
e
n
t
。
event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event。
event是vue提供的特殊变量,用来表示原生的事件参数对象event。event 可以解决事件参数对象 event 被覆盖的问题
常用的事件(按键)修饰符
在事件处理函数中调用 event.preventDefault()
或event.stopPropagation()
,或基于某个按钮进行事件的触发,这些都是非常常见的需求。因此,vue 提供了修饰符的概念,主要有两种(事件修饰符和按键修饰符),来辅助程序员更方便的对事件的触发进行控制,这里介绍比较常见的几个修饰符
vue中的常见指令: v-bind
介绍:
绑定属性
作用:
动态地绑定一个或多个 attribute
,如果需要为元素的属性动态绑定属性值,则需要用到 v-bind 属性绑定指令
- 可以为元素的任意属性进行动态绑定
- 只要属性的值是动态变化的,就应该使用
v-bind
v-bind
可以简写为:
语法:
<标签 v-bind:属性='值'></标签>
,
如<img v-bind:src="aW1nc3Jj"/> | <img :src="aW1nc3Jj"/>
在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持 Javascript 表达式的运算
<a :href="'http://127.0.0.1:3002/userDetail?id='+id">给我简单的跳</a>
动态的为元素绑定样式
- 对象方式动态绑定样式
- 可以根据指定的bool决定是否添加指定的样式
- 数组方式动态绑定样式
- 可以同时绑定多个样式,也可以通过bool值决定是否添加指定的样式
- 可以同时绑定多个样式,也可以通过bool值决定是否添加指定的样式
vue中的常见指令: v-show
介绍:
通过控制元素的display属性 控制元素的显示隐藏
作用:
通过为元素设置display样式实现元素的显示和隐藏
如果设置的bool值为true,就移除元素的display:none样式
如果设置的bool值为false,就为元素设置样式display:none
语法:
<标签 v-show='bool值'></标签>
,
如<p v-show="ishsow">我到底能不能显示呢</p>
vue中的常见指令: v-if
介绍:
通过创建和销毁元素 实现元素的显示隐藏
作用:
根据所指定的表达式的值有条件地渲染元素
如果设置的bool值为true,就创建元素并渲染
如果设置的bool值为false,就移除元素
语法:
<标签 v-if='bool值'></标签>
,
如<p v-if="ishsow">我到底能不能创建并显示呢</p>
v-if 和 v-show 区别
-
实现原理不同:
?v-if
指令会动态地创建或移除 DOM 元素,从而控制元素在页面上的显示与隐藏;
?v-show
指令会动态为元素添加或移除style="display: none;"
样式,从而控制元素的显示与隐藏; -
性能消耗不同,v-if 有更高的切换开销,而 v-show 有更高的**初始渲染开销。**因此:
? 如果需要非常频繁地切换,则使用 v-show 较好
? 如果在运行时条件很少改变,则使用 v-if 较好
vue中的常见指令: v-else和v-else-if
介绍:
v-if
,v-else
,v-else-if
相当于js中的if,else if和else的关系
作用:
v-if 可以单独使用,或配合 v-else 指令一起使用
v-else 指令必须配合 v-if 指令一起使用,否则它将不会被识别
v-else-if 指令,顾名思义,充当 v-if 的“else-if 块”,可以连续使用
v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别
语法:
本文标题为:vue中的重点指令
- ajax实现输入提示效果 2023-02-14
- layui数据表格以及传数据方式 2022-12-13
- vue keep-alive 2023-10-08
- 1 Vue - 简介 2023-10-08
- jsPlumb+vue创建字段映射关系 2023-10-08
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- JS实现左侧菜单工具栏 2022-08-31