Vue3学习笔记
一,Vue指令
1.内容渲染指令
-
v-text
-
该指令会覆盖元素内默认的值
-
<p v-text="username"></p>
-
-
{{ }}
-
插值语法
-
<p>姓名:{{username}}</p>
-
-
v-html
- 可以把包含HTML标签的字符串渲染为页面的HTML元素,不常用。
2.属性绑定指令
想要动态响应式的绑定一个属性attribute
,可以使用v-bind
指令
<div v-bind:id="dynamicId"></div>
v-bind
指令指示 Vue 将元素的 id
attribute 与组件的 dynamicId
属性保持一致。如果绑定的值是 null
或者 undefined
,那么该 attribute 将会从渲染的元素上移除。
因为属性绑定比较常用,提供了特定的简写语法:
<div :id="dynamicId"></div>
开头为 :
的 attribute 可能和一般的 HTML attribute 看起来不太一样,但它的确是合法的 attribute 名称字符,并且所有支持 Vue 的浏览器都能正确解析它。此外,他们不会出现在最终渲染的 DOM 中。简写语法是可选的,但相信在你了解了它更多的用处后,你应该会更喜欢它。
此外,v-bind
支持JavaScript
表达式,不过也仅仅支持表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
3.事件绑定指令
- 语法
vue提供了v-on
事件绑定指令,用来辅助程序员为DOM元素绑定事件监听
const vm = new Vue({
el:'#app',
data:{count:0},
methods:{
addCount(){
this.count++;
}
}
})
<button v-on:click="addCount">+1</button>
v-on
使用频率也很高,提供了简写形式@
完整的指令语法:
- 事件修饰符
- .stop 阻止事件冒泡
- .prevent 阻止默认行为
- .self 只有在event.target是当前元素自身时触发事件处理函数
- .capture 以捕获模式触发当前的事件处理函数
- .once 绑定的事件只触发一次
4.双向绑定指令
vue 提供了 v-model
双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。
<p>用户名:{{username}}</p>
<input type="text" v-model="username"/>
<p>选中的身份是:{{province}}</p>
<select v-model="province">
<option value="">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">河北</option>
</select>
v-model
指令修饰符
5.条件渲染指令
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个,分别是:
v-if
v-show
v-if 和 v-show 的区别 实现原理不同:
-
v-if 指令会动态地创建或移除 DOM 元素,从而控制元素在页面上的显示与隐藏;
-
v-show 指令会动态为元素添加或移除 style=“display: none;” 样式,从而控制元素的显示与隐藏;
性能消耗不同: v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
- 如果需要非常频繁地切换,则使用 v-show 较好
- 如果在运行时条件很少改变,则使用 v-if 较好
v-else
v-if 可以单独使用,或配合 v-else 指令一起使用
v-else-if
v-else-if 指令,顾名思义,充当 v-if 的“else-if 块”,可以连续使用
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>不及格</div>
6.列表渲染指令
v-for
我们可以使用 v-for
指令基于一个数组来渲染一个列表。v-for
指令的值需要使用 item in items
形式的特殊语法,其中 items
是源数据的数组,而 item
是迭代项的别名:
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}
<li v-for="item in items">
{{ item.message }}
</li>
v-for
索引
v-for 指令还支持一个可选的第二个参数,即当前项的索引。语法格式为 (item, index) in items,示例代码如下:
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
<!-- 可以通过提供第二个参数表示属性名 (例如 key): -->
<li v-for="(value, key) in myObject">
{{ key }}: {{ value }}
</li>
<!-- 第三个参数表示位置索引: -->
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
- 在
v-for
里使用范围值
v-for
可以直接接受一个整数值。在这种用例中,会将该模板基于 1...n
的取值范围重复多次。
<span v-for="n in 10">{{ n }}</span>
注意此处 n
的初值是从 1
开始而非 0
。
v-for
与v-if
同时使用 v-if
和 v-for
是不推荐的,因为这样二者的优先级不明显。请转阅风格指南查看更多细节。
<!--
这会抛出一个错误,因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>
在外新包装一层 <template>
再在其上使用 v-for
可以解决这个问题 (这也更加明显易读):
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
- 使用 key 维护列表的状态
当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种 默认的性能优化策略,会导致有状态的列表无法被正确更新。
为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲 染的性能。此时,需要为每项提供一个唯一的 key 属性:
<ul>
<li v-for="user in list" :key="user.id">
<input type="checkedbox"/>
姓名:{{user.name}}
</li>
</ul>
key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性(即:key 的值不能重复)
③ 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
④ 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
⑤ 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)
二,过滤器
过滤器(Filters)常用于文本的格式化。例如: hello -> Hello
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用,示例代码如下:
<!-- 在插值表达式中通过“管道符”调用过滤器 -->
<p>{{text | capitalize}}</p>
<!-- 在v-bind中通过“管道符”调用过滤器 -->
<div v-bind:id="message | capitalize"> </div>
过滤器的两个常用位置为,插值表达式和v-bind
属性绑定
- 过滤器定义
const vm = new Vue({
el:'#app',
data:{
message:'hello vue.js',
info:'title info'
},
filters:{
capitalize(str){
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
})
1.私有过滤器和全局过滤器
在 filters 节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器,则可以按照如下的格式定义全局过滤器:
//全局过滤器,独立于每个VM实例之外
//两个参数
//一个过滤器的名字
//第二个是过滤器的处理函数
Vue.filter('capitalize',(str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
- 当然也可以连续调用多个过滤器
<p>{{text | capitalize | maxLength}}</p>
//全局过滤器 - 首字母大写
Vue.filter('capitalize',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
//全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength',(str)=>{
if(str.length <= 10) return str
return str.slice(0,10)+'...'
})