Vue(一)-基础笔记

最新推荐文章于 2024-10-12 11:42:40 发布

小样จุ๊บ

最新推荐文章于 2024-10-12 11:42:40 发布

阅读量277

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44076273/article/details/105636109

版权

Vue指令

v-once
只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能

v-bind
数据绑定
//完整语法
…
< a v-bind:href=“url”>…< /a>
//缩写
< a :href=“url”>…< /a>
动态参数的缩写 (2.6.0+)
< a :[key]=“url”> … < /a>

v-on
用于监听 DOM 事件

在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
< button v-on:click=“warn(‘Form cannot be submitted yet.’, $event)”>
Submit
< /button>
// …
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为

按键修饰符

按键码

系统修饰键

exact修饰符

鼠标按钮修饰符

.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮

使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

v-if
用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染

也可以用 v-else 添加一个“else 块”：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
< h1 v-if=“awesome”>Vue is awesome!< /h1>
< h1 v-else>Oh no< /h1>

在 < template> 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个< template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 < template> 元素。

< template v-if=“ok”>
< h1>Title< /h1>
< p>Paragraph 1< /p>
< p>Paragraph 2< /p>
< /template>

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后

< div v-if=“type === ‘A’”>
A
< /div>
< div v-else-if=“type === ‘B’”>
B
< /div>
< div v-else-if=“type === ‘C’”>
C
< /div>
< div v-else>
Not A/B/C
< /div>

v-show 注意，v-show 不支持 <template> 元素，也不支持 v-else。
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display
.
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

v-for
v-if 和 v-for 不要一起使用 , 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表
好处：
过滤后的列表只会在 users 数组发生相关变化时才被重新运算，过滤更高效。
使用 v-for=“user in activeUsers” 之后，我们在渲染的时候只遍历活跃用户，渲染更高效。
解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强
为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)
好处：
通过将 v-if 移动到容器元素，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for
详情例子

v-for 指令需要使用item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名 , 也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。
< ul id=“example-2”>
< li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
< /li>
< /ul>
–
data: {
parentMessage: ‘Parent’,
items: [
{ message: ‘Foo’ },
{ message: ‘Bar’ }
]
}

还可以用三个参数作为索引：
< div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
< /div>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
< div v-for=“item in items” v-bind:key=“item.id”>
< !-- 内容 -->
< /div>
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值

在 v-for 里使用值范围
< span v-for=“n in 10”>{{ n }} < /span>
…
在 < template> 上使用 v-for
类似于 v-if，你也可以利用带有 v-for 的来循环渲染一段包含多个元素的内容。比如：
…
维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染

用 key 管理可复用的元素
在官网操作一下就很容易明白了

数组

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

变异方法 :
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法 (不会改变原始数组，而总是返回一个新数组) , 当使用非变异方法时，可以用新数组替换旧数组
filter()
concat()
slice()

显示过滤 / 排序后的结果

显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}

在计算属性不适用的情况下 , 可以使用一个方法：
< li v-for=“n in even(set)”>{{ n }}< /li>
data: {
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}

选项 / 数据

计算属性缓存VS方法
计算属性是基于它们的响应式依赖进行缓存的(例:只要传进去的参数不变, 多次访问计算属性会返回之前的计算结果, 而不必再次执行函数)
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代

计算属性的 setter
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
//…
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ’ ’ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(’ ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

表单

这个在官网操作比较容易理解

组件基础

每用一次组件，就会有一个它的新实例被创建

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册 和 局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component(‘my-component-name’, {
// … options …
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板

通过 Prop 向子组件传递数据

也可以接受一个自定义对象

监听子组件事件

使用事件抛出一个值

 在组件上使用 v-model

通过插槽分发内容

解析 DOM 模板时的注意事项

绑定内联样式
// 对象语法
< div v-bind:style=“styleObject”>< /div>
data: {
styleObject: {
color: ‘red’,
fontSize: ‘13px’
}
}
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
< div v-bind:style="[baseStyles, overridingStyles]">< /div>

多重值
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
< div :style="{ display: [’-webkit-box’, ‘-ms-flexbox’, ‘flex’] }">< /div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex