学习Vue(四)

闲来没事,又开始了瞎折腾,嗯……

基本指令

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本指令</title>
<script src="../js/vue.js"></script>
</head>
<body>


<!--v-cloak 一般不用了-->
<div id="app" v-cloak>
{{message}}
</div>

<script>
var app = new Vue({
el:"#app",
data:{
message:"这是一段文本"
}
});
</script>


</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本指令</title>
<script src="../js/vue.js"></script>
</head>
<body>


<!--v-once 只渲染一次,再次更改数据的时候,就不会渲染了,app.message="21321" 输入这个的时候一个会变,一个不会变-->
<div id="app">
<span>{{message}}</span>
<span v-once>{{message}}</span>

</div>

<script>
var app = new Vue({
el:"#app",
data:{
message:"这是一段文本"
}
});
</script>


</body>
</html>

条件渲染指令

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染指令</title>
<script src="../js/vue.js"></script>
</head>
<body>

<!--1.app.status=2 在控制台输入这个,会有不同的变化-->

<div id="app">
<p v-if="status===1">当status=1的时候显示该行</p>
<p v-else-if="status===2">当status=2的时候显示该行</p>
<p v-else>是否显示该行</p>
</div>

<!--2.templete的使用,最终的渲染结果不会包含templete的使用-->
<div id="app2">
<template v-if="status===1">
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
</template>
</div>

<!--3.Vue在渲染元素是,尽可能的服用已有的元素,而不重新渲染-->
<div id="app3">
<template v-if="type === 'name'">
<label>用户名:</label>
<input placeholder="输入用户名">
</template>

<template v-else>
<label>邮箱:</label>
<input placeholder="输入邮箱">
</template>

<button @click="qiehuan">切换输入类型</button>
</div>

<!--4.增加key属性,就不会复用了-->
<div id="app4">
<template v-if="type === 'name'">
<label>用户名:</label>
<input placeholder="输入用户名" key="name">
</template>

<template v-else>
<label>邮箱:</label>
<input placeholder="输入邮箱" key="mail">
</template>

<button @click="qiehuan">切换输入类型</button>
</div>

<script>
var app = new Vue({
el:"#app",
data:{
status:1
}
});

var app2 = new Vue({
el:"#app2",
data:{
status:1
}
});

var app3 = new Vue({
el:"#app3",
data:{
type:"name"
},
methods:{
qiehuan: function () {
//在输入框里输入文字,然后再点击切换类型按钮,文字是没有改变了,复用了input标签
this.type = this.type === "name"?"mail":"name";
}
}
});

var app4 = new Vue({
el:"#app4",
data:{
type:"name"
},
methods:{
qiehuan: function () {
//在输入框里输入文字,然后再点击切换类型按钮,文字是没有改变了,复用了input标签
this.type = this.type === "name"?"mail":"name";
}
}
});
</script>


</body>
</html>

列表渲染指令

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染指令</title>
<script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
<ul>
<!--in 换成 of 也是可以的-->
<li v-for="book in books">{{book.name}}</li>
</ul>

<hr>

<ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul>

<hr>

<!--同时渲染多个数据-->
<ul>
<template v-for="book in books2">
<li>{{book.name}}</li>
<li>{{book.price}}</li>
</template>
</ul>

<hr>

<!--也可以遍历对象的属性-->
<span v-for="value in user">
{{value}}
<br>
</span>

<hr>

<!--也会有索引的-->
<span v-for="(value,key,index) in user">
{{value}}- {{key}}- {{index}} <br>
</span>


<hr>


<!--也能迭代整数-->
<span v-for="value in 10">
{{value}}<br>
</span>
</div>



<script>
var app = new Vue({
el:"#app",
data:{
books:[
{name:"知更鸟女孩1"},
{name:"知更鸟女孩2"},
{name:"知更鸟女孩3"},
{name:"知更鸟女孩4"}
],
books2:[{name:"知更鸟女孩1",price:"20"},
{name:"知更鸟女孩2",price:"30"},
{name:"知更鸟女孩3",price:"40"}
],
user:{
name:"anthony",
age:23
}
}
});
</script>


</body>
</html>

数组更新

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
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组更新</title>
<script src="../js/vue.js"></script>
</head>
<body>

<div id="app">

<!--同时渲染多个数据-->
<ul>
<template v-for="book in books">
<li>{{book.name}}</li>
<li>{{book.price}}</li>
</template>
</ul>

</div>



<script>
var app = new Vue({
el:"#app",
data:{
books:[{name:"知更鸟女孩1",price:"20"},
{name:"知更鸟女孩2",price:"30"},
{name:"知更鸟女孩3",price:"40"},
{name:"测试教程",price:"40"}
]
}
});

app.books = app.books.filter(function (item) {
return item.name.match(/知更鸟女孩/);
});

app.books.push({
name:"java",
price:"50"

});
</script>


</body>
</html>

排序和过滤

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排序和过滤</title>
<script src="../js/vue.js"></script>
</head>
<body>

<div id="app">

<!--同时渲染多个数据-->
<ul>
<template v-for="book in sortBooks">
<li>{{book.name}}</li>
<li>{{book.price}}</li>
</template>
</ul>

</div>



<script>
var app = new Vue({
el:"#app",
data:{
books:[{name:"知更鸟女孩1111",price:"20"},
{name:"知更鸟女孩222",price:"30"},
{name:"知更鸟女孩33",price:"40"},
{name:"测试教程",price:"40"}
]
},
computed:{
//过滤
filterBooks:function () {
return this.books.filter(function (book) {
return book.name.match(/知更鸟女孩/);

})
},

//排序
sortBooks:function () {
return this.books.sort(function (a,b) {
return a.name.length < b.name.length;
});

}
}
});


</script>


</body>
</html>

方法

还没有学……