vue基础学习总结一
目录
一、基础知识回顾
1.v-bind、v-model、v-html它们什么时候使用以及区别
它们原本的写法以及简化后的写法
v-bind绑定，简写: v-on监听，简写@
2.数据和方法
当一个vue实例被创建时，它向vue的响应式系统中加入其data对象中能找到的所有属性，当这些属性的值发生改变时，视图就会产生响应，即匹配更新为新的值，当这些数据改变时，视图会重新渲染。值得注意的是`只有当实例被创建时data中存在的属性才是响应式的。
3.生命周期钩子
4.v-once数据改变，内容不会更新
5.v-bind可以动态的绑定data中的数据，如果是父子组件那么就可以给子组件传值，如果是普通的标签，那么就会显示冒号后面的属性。
6.使用javascript表达式
对于所有数据绑定，Vue.js都提供了完全的javascript表达式支持。
-
{{ number + 1 }}
-
-
{{ ok ? 'YES' : 'NO' }}
-
-
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
二、计算属性缓存和方法的区别
(1)写法不同
计算属性：
-
-
<div id="example">
-
-
<p>Original message: "{{ message }}"</p>
-
-
<p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({
-
-
el: '#example',
-
-
data: {
-
-
message: 'Hello'
-
-
},
-
-
computed: {
-
-
// 计算属性的 getter
-
-
reversedMessage: function () {
-
-
// `this` 指向 vm 实例
-
-
return this.message.split('').reverse().join('')
-
-
}
-
-
}})
方法：
<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中
-
methods: {
-
-
reversedMessage: function () {
-
-
return this.message.split('').reverse().join('')
-
-
}}
从上面代码中我们会发现，计算属性直接在双大括号中写变量名即可，并且代码写在computed中，方法是需要在变量名后面加括号，表示调用这个方法，代码写在methods中。
(2)缓存不同
计算属性是基于它们的依赖进行缓存的，只有相关依赖改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。假设我们有一个性能开销比较大的计算属性 ，它需要遍历一个巨大的数组并做大量的计算，我们一般会采用计算属性。
三、计算属性的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]
-
-
}
-
-
}}
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
四、class和style绑定
属性绑定分为两种，一种是标签自带的属性，一种是自定义属性。前者绑定的属性可以直接在标签中显示出效果，比如id、class等，后者一般用在自定义组件中，用于父子组件传值。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。注意：只是针对class 和 style，如果是其他属性还是字符串，除了父子组件传值。
class绑定
第一种是class绑定字符串。
第二种是class绑定对象，对象的属性是class名，值为布尔值。
第三种是class绑定数组，数组中的元素可以是字符串、三目运算、变量名、对象。
如果在组件上写class类，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
style绑定
v-bind:style的对象语法十分直观，看着非常像css，但其实是一个javascript对象。
第一种是style绑定对象，对象的属性是样式名，值为样式的值。
css属性名可以用驼峰式或短横线分隔(需要用单引号括起来)来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
第二种是style绑定数组：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
注意：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。v-show 不支持 <template> 元素。
五、列表渲染
vue使用v-for渲染列表，列表可以是数组也可以是对象
-
// 数组的情况<ul id="example-1">
-
-
<li v-for="item in items">
-
-
{{ item.message }}
-
-
</li></ul>var example1 = new Vue({
-
-
el: '#example-1',
-
-
data: {
-
-
items: [
-
-
{ message: 'Foo' },
-
-
{ message: 'Bar' }
-
-
]
-
-
}})
-
-
// 对象的情况<div v-for="(value, key, index) in object">
-
-
{{ index }}. {{ key }}: {{ value }}</div>new Vue({
-
-
el: '#v-for-object',
-
-
data: {
-
-
object: {
-
-
firstName: 'John',
-
-
lastName: 'Doe',
-
-
age: 30
-
-
}
-
-
}})
从上面代码中我们可以看到如果渲染的是数组，第一个元素是值，第二个元素是下标，如果渲染的是对象，第一个元素是值，第二个元素是属性，第三个元素是下标。
六、数组更新检测
数组在改变时有的情况可以触发新视图有的是不会触发。如果原始数组被改变，比如使用push()、pop()、shift()、unshift()、splice()、sort()、reverse()都会触发新视图更新，但如果使用ilter()、concat() 和 slice()这几种方法不会改变原始数组，是不会触发视图更新的。
注意：由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，你也可以使用vm.set 的方法：
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)
######## 对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
-
var vm = new Vue({
-
-
data: {
-
-
a: 1
-
-
}})// `vm.a` 现在是响应式的
-
-
-
-
vm.b = 2// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
-
Object.assign(vm.userProfile, {
-
-
age: 27,
-
-
favoriteColor: 'Vue Green'})
你应该这样做：
-
vm.userProfile = Object.assign({}, vm.userProfile, {
-
-
age: 27,
-
-
favoriteColor: 'Vue Green'})
七、显示过滤/排序结果
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。例如：
<li v-for="n in evenNumbers">{{ n }}</li>
-
-
data: {
-
-
numbers: [ 1, 2, 3, 4, 5 ]},
-
-
computed: {
-
-
evenNumbers: function () {
-
-
return this.numbers.filter(function (number) {
-
-
return number % 2 === 0
-
-
})
-
-
}}
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：
<li v-for="n in even(numbers)">{{ n }}</li>
-
-
data: {
-
-
numbers: [ 1, 2, 3, 4, 5 ]},
-
-
methods: {
-
-
even: function (numbers) {
-
-
return numbers.filter(function (number) {
-
-
return number % 2 === 0
-
-
})
-
-
}}
八、一段取值范围的v-for
v-for 也可以取整数。在这种情况下，它将重复多次模板。
-
<div>
-
-
<span v-for="n in 10">{{ n }} </span></div>
结果：
1 2 3 4 5 6 7 8 9 10
v-for用于template
类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素。比如：
-
<ul>
-
-
<template v-for="item in items">
-
-
<li>{{ item.msg }}</li>
-
-
<li class="divider" role="presentation"></li>
-
-
</template></ul>
注意：v-for的优先级比v-if高
文章来源: zhulin1028.blog.csdn.net，作者：zhulin1028，版权归原作者所有，如需转载，请联系作者。
原文链接：zhulin1028.blog.csdn.net/article/details/121185295
- 点赞
- 收藏
- 关注作者
评论（0）