一、vue介绍
一个mvvm框架（库）
比较容易上手、小巧
个人容易维护项目
vue的发展势头很猛，github上start数量已经超越angular
适合：移动端小巧的项目
兼容：不兼容低版本IE
官网：https://cn.vuejs.org/v2/guide/installation.html
手册：https://cn.vuejs.org/v2/api/
二、搭建vue实例
<div id="app">
{{msg}}
</div>
<script src="./vue.js"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el:'#app',
data:{
msg:'welcome vue!'
}
})
}
</script>
image.png
三、常用指令：
1.v-model && 一般表单元素（input）
<div id="app">
<input type="text" v-model="msg">
<br>
{{msg}}
</div>
image.png
修改input的值
image.png
因为vue实例是双向绑定，所以在input值改变后
vue实例里msg的值同步被改变，从而改变了{{msg}}的值
<div id="app">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{msg2}}
<br>
{{msg3}}
<br>
{{arr}}
<br>
{{json}}
</div>
<script src="./vue.js"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el:'#app',
data:{
msg:'welcome vue!',
msg2:12,
msg3:true,
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'}
}
})
}
</script>
image.png
msg的值可以是string、number、boolean、array,object类型
2. v-for="item in items"（遍历）
<div id="app">
数组
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
json对象
<ul>
<li v-for="value in json">
{{value}}
</li>
</ul>
<ul>
<li v-for="(v,k) in json">
{{v}} {{k}}
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el:'#app',
data:{
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'}
}
})
}
</script>
image.png
使用v-for指令来遍历数组和对象
3. v-on && method（绑定事件和方法函数）
<div id="app">
<input type="button" value="按钮1" onclick="alert(1)">
<input type="button" value="按钮2" v-on:click="alert(2)">
<input type="button" value="按钮3" v-on:click="show()">
</div>
<script src="./vue.js"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el:'#app',
data:{
},
methods:{
show:function(){
alert(3)
}
}
})
}
</script>
image.png
- 按钮1和按钮3点击会分别弹出1、3
- 但按钮2无效，在使用了Vue的指令后，事件处理函数必须使用Vue实例参数上method的函数
- 如果使用了Vue的指令，则最好全部使用Vue指令
4. v-on :click/keyup/mouseover && data（绑定事件和数据更改）
<div id="app">
<input type="button" value="按钮" v-on:click="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el:'#app',
data:{
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
})
}
</script>
image.png
image.png
method里的this指向Vue实例，Vue又可以代理data
所以this.data.arr === this.arr
5.v-show="true/false"（显示隐藏）
<div id="app">
<input type="button" value="按钮" v-on:click="istrue=false">
<br>
<div style="width:20px;height:20px;background:red" v-show="istrue"></div>
</div>
<script src="./vue.js"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el:'#app',
data:{
istrue:true
}
})
}
</script>
image.png
image.png
点击按钮之后，v-show指令的值由true变成false，红色方块隐藏了，相当于display:none;
四、总结
在了解了前面的一些指令之后，就可以完成一些比较简单的小项目了
我将会将前面的指令，综合运用在github项目上
五、Vue实战__人事档案项目
小项目源码和预览
image.png
github项目功能
- 将人员登记在表单上，表格同步获取数据，放在相应的表格格子里
- 可以对某个成员的数据删除，也可以删除全部成员的数据
- 当表格数据为空时，会显示一句“暂无数据”，当添加数据上去时，这句话会自动消失
我将项目放在我的github上
欢迎大家去了解一下
