Vue笔记-02简单语法
VUE插值表达式
插值表达式
vue可以通过data提供数据,注意:data必须是一个函数,并且返回一个对象
1 | <script> |
通过插值表达式显示数据
插值表达式:小胡子语法 {{ }}
{{变量,表达式,自己下面定义的函数(实参)}}
使用 data 中的数据渲染视图(模板)
基本语法,支持简单数据处理
1
2
3
4{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }}
{{ obj.age > 18 ? '成年' : '未成年' }}vue中插值表达式的注意点
- 使用的数据在 data 中要存在
1
<h1>{{ gaga }}</h1>
- 能使用表达式, 但是不能使用 if for
1
<h1>{{ if (obj.age > 18 ) { } }}</h1>
- 不能在标签属性中使用
1
<h1 id="box" class="box" title="{{ msg }}"></h1>
VUE指令
vue指令, 实质上就是特殊的 html 标签属性, 特点:
v- 开头
每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能
v-bind指令
- 描述:插值表达式不能用在html的属性上,如果想要动态的设置html元素的属性,需要使用v-bind指令
- 作用:动态的设置
html的属性
- 语法:
v-bind:标签内的属性名="变量名"
- 简写:
:title="msg"
1 | <!-- 完整语法 --> |
v-on指令
基本使用
语法
1.v-on:事件名=“要执行的少量代码”
2.v-on:事件名=“methods中的函数名”
3.v-on:事件名=“methods中的函数名(实参)”
基本结构
<button v-on:事件名="事件函数">按钮</button>
,需要在methods中提供事件处理函数
methods
用于存放函数方法
this
是指当前的组件简写:
@事件名="事件函数"
v-on:可以简写成@
1 | <button v-on:click="fn">搬砖</button> |
传递参数
<button v-on:事件名="事件函数(参数)">按钮</button>
,需要在methods中提供事件函数,接受参数
1 | <button v-on:click="addMoney(1)">搬砖</button> |
如果事件的逻辑足够简单,可以不提供函数
1 | <button v-on:click="money++">搬砖</button> |
vue中获取事件对象(了解)
需求:默认a标签点击会跳走, 希望阻止默认的跳转, 阻止默认行为 e.preventDefault()
vue中获取事件对象
- 没有传参, 通过形参接收 e
- 传参了, 通过$event指代事件对象 e
1 | <template> |
插值表达式:标签
行外数据
绑定v-bind:标签
行内属性
绑定v-on:标签
事件
绑定
修饰符
v-on 事件修饰符
vue中提供的事件修饰符
.prevent
阻止默认行为.stop
阻止冒泡
1 | <div id="app"> |
按键修饰符
需求: 用户输入内容, 回车, 打印输入的内容
在监听键盘事件
时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符
@keyup.enter
回车@keyup.esc
返回
1 | <div id="app"> |
v-if 和 v-show 指令
基本使用
v-show 和 v-if 功能: 控制盒子的显示隐藏
v-show
语法:
v-show="布尔值"
(true显示,false隐藏)原理:实质是在控制元素的 css 样式,
display: none;
v-if
语法:
v-if="布尔值"
(true显示, false隐藏)原理: 实质是在动态的创建 或者 删除元素节点
应用场景:
如果是频繁的切换显示隐藏, 用 v-show
v-if, 频繁切换会大量的创建和删除元素, 消耗性能
如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销
1 | <template> |
v-if v-else 和 v-else-if
1 | <div id="app"> |
指令可以配套!标签不用配套!
v-model
基本用法
作用:给表单元素使用, 双向数据绑定
- 数据变化了, 视图会跟着变
- 视图变化了, 数据要跟着变
- 输入框内容变化了(监听用户的输入, 监听input事件), 数据要跟着变
语法:v-model='值'
1 | <input type="text" v-model="msg"> |
v-model 处理其他表单元素
数据双向绑定,双向更新,不写的话,就单项变化
select
checkbox
textarea
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<input type="checkbox" v-model="key">
<textarea v-model="msg"></textarea>
<select v-model="num">
<option value="1">山东</option>
<option value="2">上海</option>
<option value="3">山东商务</option>
</select>
<script>
export default {
data(){
return {
msg:'这是txt',
key:true,
num:3
}
}
}
</script>
注意:v-model 会忽略掉表单元素原本的value, checked等初始值
v-model 修饰符
number
如果想自动将用户的输入值, 用parseFloat转成数字类型, ,可以给
v-model
添加number
修饰符:1
<input v-model.number="age" type="number">
trim
如果要自动过滤用户输入的首尾空白字符,可以给
v-model
添加trim
修饰符:1
<input v-model.trim="msg">
lazy
在
change
时而非input
时更新,可以给v-model
添加lazy
修饰符:(用户离开输入框时才触发更新操作,而不是用户每输入一个字符就进行一次更新)
1
<input v-model.lazy="msg">
v-text 和 v-html
v-text指令
解释:更新元素的
textContent/innerText
。如果要更新部分的textContent
,需要使用{{ Mustache }}
插值。1
2
3
4
5
6
7
8
9<h1 v-text="msg"></h1>
export default {
data(){
return {
msg:'<button>这是按钮</button>'
}
}
}
v-html指令
解释:更新DOM对象的
innerHTML
,html标签会生效1
2
3
4
5
6
7
8
9<h1 v-html="msg"></h1>
export default {
data(){
return {
msg:'<button>这是按钮</button>'
}
}
}
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。
只在可信内容上使用
v-html
,永不用在用户提交的内容上。
v-for
基本使用
v-for 作用: 遍历对象
和数组
- 遍历数组(常用)
1 | v-for="item in 数组名" item每一项 |
- 遍历对象 (一般不用)
1 | <!-- |
- 遍历数字
1 | <!-- |
v-for 的key的说明
- 设置 和 不设置 key 有什么区别?
- 不设置 key, 默认同级兄弟元素按照下标进行比较。
- 设置了key,按照相同key的新旧元素
比较
。
- key值要求是?
- 字符串或者数值,唯一不重复
- 有 id 用 id, 有唯一值用唯一值,实在都没有,才用索引
- key的好处?
- key的作用:提高虚拟DOM的对比复用性能
以后:只要是写到列表渲染,都推荐加上 key 属性。且 key 推荐是设置成 id, 实在没有,就设置成 index
注意:key是用来虚拟dom
比较
,而不是排序 (diff算法
)
v-computed 计算属性
基本使用
计算属性是一个
属性
,写法上是一个函数
,这个函数的返回值
就是计算属性最终的值。
- 计算属性必须定义在
computed
节点中 - 计算属性必须是一个
function
,计算属性必须有返回值 - 计算属性不能被当作方法调用,当成
属性
来用
定义计算属性
1 | // 组件的数据: 需要计算的属性 |
使用计算属性
1 | <p>{{ reverseMsg }}</p> |
未完待续…