Vue学习笔记(1)

Vue的基本架构

放假了!

学学Vue吧!

QQ图片20200701233222.webp

Hello World

美好的一天从Hello World开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
</head>
<body>
<!--View-->
<div id="hello">
<p>{{Hello}}</p>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
Hello: "hello vue"
}
});
</script>
</body>
</html>

版本用的大概比较旧。

这个地方主要的处理逻辑,其实是将一个Vue对象和一个DOM进行绑定。具体到这个例子,el属性对应的就是绑定对象。

data对象里,分别通过对应的方法进行赋值。可以看成一种模板,我们通过改变内里的值进行动态渲染。

这里的Hello我们称作插值。我们可以使用一些其他用法,比如:

1
<p>{{Hello.toUpperCase()}}</p>

我们是支持插入一个表达式的。这样的结果会输出HELLO VUE

内置指令(上)

Vue的指令可以当作其他语言的“关键字”,虽然具有其他语言的特点,但是在使用上又有一些区别。

指令和插值最大的区别就在于,指令是操作一个DOM的属性并将其运作在DOM上,插值是对DOM内容的限定。

v-show

这个指令用来显示或隐藏某些元素。例如:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="hello">
<p v-show="name.indexOf('qwq')>=0">{{Hello}}</p>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
name: "qwqqaq",
Hello: "hello vue"
}
});
</script>

如果name里能找到qwq,就显示Hello。

一个常见的技巧是,使用template来操作某个块。template是一个HTML5的新增元素,默认不显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="hello">
<template v-show="!isLogin">
<form>
<p>username: <input type="text"></p>
<p>password: <input type="password"></p>
</form>
</template>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
isLogin: true
}
});
</script>

v-if, v-else-if, v-else

这三个如果连用可以用来分情况显示不同的DOM。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="hello">
<span v-if="gpa>=4.0">人?</span>
<span v-else-if="gpa>=3.0"></span>
<span v-else></span>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
gpa:2
}
});
</script>

不过这个地方有一些小坑。且看下面这个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
</head>
<body>
<!--View-->
<div id="hello">
<template v-if="loginType === 'username'">
<label>Username:</label>
<input placeholder="Input username">
</template>
<template v-else>
<label>Email:</label>
<input placeholder="Input email">
</template>
<p><button v-on:click="changeLoginType">切换登陆方式</button></p>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
loginType: 'username'
},
methods: {
changeLoginType() {
if(this.loginType === 'username') {
this.loginType = 'email';
} else {
this.loginType = 'username';
}
}
}
});
</script>
</body>
</html>

这个例子我们预期结果是按一下切换登录方式,就会有不同的登陆结果。但是假如我们输入了一个username是qwq,再点切换登录方式,发生了什么呢?

明明应该输入email的地方却赫然写着qwq。

这是因为,vue在更新的时候并不会对所有的组件都进行渲染,只会渲染他觉得需要的组件。这就导致这两个输入框明明用途不一样,可是他们都是输入框,那有什么必要渲染呢?莫得(

那怎么办呢?我们只需要标志出来这两个框框不一样就行了。

所以我们可以给input加一个key属性。

v-for

这个v-for就很有灵性了(

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="hello">
<ul>
<li v-for="ele in items">{{ele.title}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
items: [
{title: 'qwq'},
{title: 'qaq'},
{title: 'ovo'}
]
}
});
</script>

怎么感觉这玩意这么像我写的伪代码

如果数组调用了如下方法,也会实时更新:

  • push
  • pop
  • shift
  • unshift
  • splice
  • sort
  • reverse

然而对于

  • filter
  • concat
  • slice

这类会返回新的数组东西,就需要赋值给原数组里。

另外需要注意的一点是,我们有时会直接设置数组的某些值。此时是无法被检测的。

此时,我们可以使用Vue的Set方法:

1
Vue.set(vm.items, 0, {title: 'qwq'});

或者

1
vm.$set(vm.items, 0, {title: 'qwq'});

也可以用splice。

接下来一个例子展示了如何得到一个数组的偶数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="hello">
<ul>
<li v-for="ele in even(arr)">{{ele}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
arr : [1,3,2,12,9,109,10]
},
methods: {
even: arr => {
return arr.filter(ele => {
return ele % 2 === 0;
})
}
}
});
</script>

除去遍历数组,v-for也可以遍历整数,例如

1
<span v-for="n in 10">{{n}}</span>

也可以用来遍历对象。这里遍历对象可有三种参数:

1
2
3
<span v-for="value in obj">{{value}}</span>
<span v-for="(value, key) in obj">{{key}}</span>
<span v-for="(value, key, idx) in obj">{{index}} . {{key}} : {{value}} </span>

同理对对象属性的添加删除,我们也需要使用Vue的set()和delete()方法,或者用实例的$set()和$delete()。

我们接下来考虑一个实例:一个支持添加元素的清单。这个实例在传统过程中必须使用DOM操作,通过添加节点来完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
</head>
<body>
<!--View-->
<div id="hello">
<p>
ID: <input type="text" v-model="bookID">
Name: <input type="text" v-model="bookName">
<button v-on:click="add()">Add</button>
</p>
<p v-for="book in books">
<input type="checkbox">
<span>ID: {{book.ID}}, Name: {{book.name}}</span>
</p>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
books: [
{ID: 1, name: 'qwq'},
{ID: 2, name: 'qaq'},
{ID: 3, name: 'quq'}
]
},
methods: {
add() {
this.books.unshift({
ID: this.bookID,
name: this.bookName
});
this.bookID = '';
this.bookName = '';
}
}
});
</script>
</body>
</html>

但是我们发现一个很有趣的现象:如果我们选中某个复选框,再添加元素之后,复选框没有发生变化。

这还是因为复选框没有被渲染。为此,我们可以给每个元素加一个key:

1
<p v-for="book in books" v-bind:key="book.ID">

最后我们谈谈如何嵌套使用for和if。for比起if来说具有更高的优先级,所以可以用来嵌套。以上面求偶数的例子来说:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="hello">
<ul>
<li v-for="ele in arr" v-if="isEven(ele)">{{ele}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el : '#hello',
data: {
arr : [1,3,2,12,9,109,10]
},
methods: {
isEven: ele => {return ele % 2 == 0 ? true : false;}
}
});
</script>
# JS, Vue, 前端

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×