1:简介

从两年前我学习 web 编程开始,我参与或完成了好几个 web 项目,这几个 web 项目都是比较简单的、给自己练习用的,而在开发过程中,我一直使用 js+html+css+mdui。使用单纯的原生语言和最基础的一个 css 库开发,体验是很不好的,我一直想找一个好用的前端开发方案,让开发变得简单,直到认识了 vue。
这不是我第一次学习 vue,早在一年前,我就学习过一段时间,可惜当时没有好的 web 练手项目。导致 vue 在学习之后就荒废了,后来的项目开发也没有去使用它。经过了几个项目开发,才感觉到,我真的需要将 vue 好好的利用起来。于是在我备考之余,重新来学习 vue。之后可能还会学习 Vue Dev-ui。它提供的组件很丰富,我觉得可以完全替代 mdui。

2:Hello World

vue 使用 script 标签引入
一个简单的 html 实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="box">
{{1+1}} {{myname}} {{myhtml}}
<!-- v-指令 -->
<div v-html="myhtml"></div>
</div>
<script>
new Vue({
el: "#box",
data: {
myname: "qifei",
myjob: "student",
myhtml: "<b>hello world</b>",
},
});
</script>

3:v if 和 v show

v-if:创建和删除节点
v-show:显示和隐藏节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="box">
<div v-show="isShow"></div>
<div v-if="isCreated"></div>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
isShow: true,
isCreated: true,
},
});
vm.isShow = false; //控件显示隐藏
vm.isCreated = false; //控件创建和删除
</script>

4:class 绑定和按钮

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
<div id="box">
<button @click="handleClick()"></button>
<div :class="isActive?'red':'yellow'">动态class-三目写法</div>
<div :class="classObj">动态class-字典写法</div>
<div :class="classArr">动态class-数组写法</div>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
isActive: true,
classObj: {
a: true,
b: true,
},
classArr: ["a", "b"],
},
methods: {
handleClick() {
this.isActive = !this.isActive;
},
},
});
vm.classObj.a = false;
</script>

字典写法,不能通过添加键值对来增加 class。而数组写法,可以通过 pop(),push()方法添加元素来怎加 class

5:style 绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="box">
<div :style="'background:'+(isActive?'red':'yellow')">
动态绑定style-三目写法
</div>
<div :style="styleObj">动态绑定style-对象写法</div>
<div :style="styleArr">动态绑定style-数组写法</div>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
isActive: true,
styleObj: {
background: "red",
backgroundColor: "red",
},
styleArr: [{ backgroud: "red" }],
},
});
vm.classObj.a = false;
</script>

数组写法,可以通过 push()添加新的样式,字典写法不能新加。

6:条件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box">
<div v-if="isCreated">动态创建</div>
<div v-else>动态创建</div>
<div v-if="datalist.length">
<li v-for="data in datalist">{{data}}}</li>
</div>
<div v-else-if="datalist.length >=3">if lager than 2</div>
<div>empty</div>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
isCreated: true,
datalist: ["111", "222", "333"],
},
});
</script>

7:列表渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="box">
<li v-for="data in datalist" key="data.id">{{data}}}</li>
<li v-for="(data,key) in dataObj">{{data}}} ---{{key}}</li>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
datalist: ["111", "222", "333"],
dataObj: {
abc: "abio",
},
},
});
vm.datalist.push("666");
</script>

关键字可以是 in 也可以是 of

8:列表数组检测

filter(),contact(),map()方法对原数组没有影响,视图不会更新。
通过索引值修改数组,视图不会更新。
通过 splice 或者,
Vue.set(datalist,0,’111’)

9:列表过滤引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="box">
<input type="text" @input="handleInput()" v-model="mytext" />
<li v-for="data in datalist" key="data.id">{{data}}}</li>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
mytext: "",
datalist: ["111", "222", "333"],
list: ["111", "222", "333"],
},
methods: {
handleInput() {
var datalist = this.list.filter(
(item) => item.indexOf(this.mytext) > -1
);
},
},
});
vm.datalist.push("666");
</script>

10:事件处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="box">
<button @click="handleClick"></button>
<button @click="handleClick()"></button>
<button @click="javascript:"></button>
</div>
<script>
vm = new Vue({
el: "#box",
data: {},
methods: {
handleClick() {},
},
});
vm.datalist.push("666");
</script>

评论