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
16
17
| <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
| <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
19
20
21
22
23
24
| <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
17
18
19
20
| <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
16
| <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>
|
