学习Vue(一)

闲来没事,又开始了瞎折腾,最基础的了

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>Vue示例</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="输入你的名字">
<h1>你好,{{name}}</h1>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
name:"你好"
}
});
</script>

</body>
</html>

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
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的生命周期</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="输入你的名字">
<h1>你好,{{name}}</h1>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
name:"2"
},
create:function () { //vue实例创建完成之后调用,这个时候还没有el
// console.log("create方法",this.name)
console.log(this.name) //2 ,试了下没有打印出来
},
mounted: function () { //el加载完成之后调用,一般业务的第一个逻辑从这里开始
console.log(this.$el); //<div id="app">

}
});
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值与表达式</title>
</head>
<body>
<div id="app">
<!--{{}} 这种事Mustache 也是最基本的文本插值方法,它会自动讲我们双向绑定的数据实时显示出来-->
<h1>{{book}}</h1>
</div>

<div id="app2">
<h1>{{date}}</h1>
</div>

<div id="app3">
<h1>{{htmlText}}</h1>
<span v-html="htmlText"></span>
<span v-pre>{{这里的内容是不会被编译的}}</span>
</div>


<div id="app4">
{{number /10}}<br>
{{isOk ? "yes" : "no"}}<br>
{{text.split(",").reverse().join("-")}}
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
book:'<<Vue 实战1>>'
}
});

var app2 = new Vue({
el:"#app2",
data:{
date:new Date() //"2018-05-19T16:37:50.404Z"
},
mounted: function () {
var _this = this;

//定时修改timer数据
this.timer = setInterval(function () {
_this.date = new Date()
},1000)
},
beforeDestory:function () {
if(this.timer){
clearInterval(this.timer)
}
}
});

var app3 = new Vue({
el:"#app3",
data:{
htmlText:"<a href='2.1.2.html'>这是一个超链接</a>"
}
});

var app4 = new Vue({
el:"#app4",
data:{
number :100,
isOk:false,
text:"123,456"

}
})


</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!--过滤器的用法-->

<!--只用一个过滤器-->
<h1>{{myDate | formatDate}}</h1>

<!--也可以用两个过滤器-->
<h1>{{myDate | formatDate | testFilters}}</h1>

<!--也能接受参数-->
<h1>{{myDate | formatDate | paramsFilters('当前时间','北京时间')}}</h1>


</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

//在个位数前加0
var preDate = function (value) {
return value < 10 ? '0' + value : value;
};

var app = new Vue({
el: "#app",
data:{
myDate:new Date()
},
filters:{ //过滤器
formatDate:function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = preDate(date.getMonth()+1);
var day = preDate(date.getDate());
var hours = preDate(date.getHours());
var minutes = preDate(date.getMinutes());
var seconds = preDate(date.getSeconds());
return year + "-" + month + "-" + day + " " + hours + "-" + minutes + "-" + seconds;
},
testFilters: function (value) { //第二个过滤器
return "现在的时间是:"+value+" :北京时间"
},
paramsFilters:function (value, arg2, arg3) {
return "参数1:"+value +" 参数2:"+arg2+" 参数3:"+arg3
}
},
mounted: function () {
var _this = this;
this.timer = setInterval(function () { //定时器
_this.myDate = new Date();
},1000);
},
beforeDestory: function () {
if (this.timer) {
clearInterval(this.timer);
}
}
});


</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
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>指令</title>

</head>
<body>
<div id="app">
<h1 v-if="show">v-if</h1>
</div>

<hr>

<div id="app2">
<a v-bind:href="url">v-on</a>
<img v-bind:src="imageUrl">
</div>

<hr>

<div id="app3">
<p v-if="show">这是一段文本</p>
<button v-on:click="mybutton">v-on 的点击效果</button>
</div>

<script src="../js/vue.js"></script>
<script>


<!-- v-if -->
var app = new Vue({
el: "#app",
data:{
show:true
}
});

var app2 = new Vue({
el:"#app2",
data:{
url:"http://www.baidu.com",
imageUrl:"tet"
}
});

var app3 = new Vue({
el:"#app3",
data:{
show:true
},
methods:{
mybutton:function() {
this.show = !this.show;
}

}
});

</script>

</body>
</html>