1 WEB前端技术回顾
2 Vue介绍
3 标准vue应用
4 指令区别
绑定指令
v-bind：绑定属性
{{}}：以原始数据方式绑定
v-html：以html解析后的方式绑定
事件处理
v-on:click
把属性显示到视图层
v-model
例子
1
2
3
5 点击图片转换
1
2
3
6
1
2
7 设置颜色与大小
1
2
3
8 点击列表显示与隐藏（条件指令 v-if）
9 循环标签（v-for）
1
2(循环加索引)
10 下拉框
11 左边学生表单form，一点提交，自动提交到右边表格
<html>
<head>
<meta charset="utf-8">
<title>student</title>
<script src="js/vue.js"></script>
<style>
#right{
float:right;
width:550px;
}
</style>
</head>
<body>
<div id="app">
<div id="left">
<form>
<div>
<label>学号:</label><input type="text" v-model="stu.no"/></br>
<label>姓名:</label><input type="text" v-model="stu.name"/></br>
<label>性别:</label><input type="radio" value="男" v-model="stu.sex"/>男
<input type="radio" value="女" v-model="stu.sex"/>女</br>
<label>爱好:</label><input type="checkbox" value="跳舞" v-model="stu.hobbies"/>跳舞
<input type="checkbox" value="唱歌" v-model="stu.hobbies"/>唱歌
<input type="checkbox" value="打球" v-model="stu.hobbies"/>打球</br>
<label>籍贯:</label><select v-model="stu.addr">
<option>安徽</option>
<option>陕西</option>
</select></br>
<label>备注:</label><textarea v-model="stu.beizhu"></textarea>
</div>
<div>
<button type="button" @click="add">添加</button>
</div>
</form>
</div>
<div id="right">
<table width="100%" border="1">
<tr>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
<td>籍贯</td>
<td>备注</td>
<td>操作</td>
</tr>
<tr v-for="(s,index) in stulist">
<td>{{index+1}}</td>
<td>{{s.no}}</td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.hobbies}}</td>
<td>{{s.addr}}</td>
<td>{{s.beizhu}}</td>
<td><span @click="remove(index)">删除</span></td>
<td><span @click="update(index)">修改</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var vue=new Vue({
el: "#app",
data:{
message: "测试",
stu:{
no:"001",
name:"test",
sex:"男",
hobbies:[],
addr:"陕西",
beizhu:""
},
stulist:[]
},
methods:{
add:function(){
var tmp={};
tmp.no=this.stu.no;
tmp.name=this.stu.name;
tmp.sex=this.stu.sex;
tmp.hobbies=this.stu.hobbies;
tmp.addr=this.stu.addr;
tmp.beizhu=this.stu.beizhu;
this.stulist.push(tmp);
},
remove:function(idx){
this.stulist.splice(idx,1)
},
/* update:function(index){
var temp={};
temp.no=this.stu.no;
temp.name=this.stu.name;
temp.sex=this.stu.sex;
temp.hobbies=this.stu.hobbies;
temp.addr=this.stu.addr;
temp.beizhu=this.stu.beizhu;
this.stulist.$set(tmp,index,temp);
}*/修改部分有问题
}
});
</script>效果图
12 省市二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="test" style="width:100%;">
<span>二级联动：</span>
<select v-model="indexId">
<option v-for="option1 in YX">{{option1.name}}</option>
</select>
<select>
<option v-for="option2 in selection">{{option2.name}}</option>
</select>
</div>
</body>
</html>
<script>
var vue = new Vue({
el:'#test',
data:{
YX:[
{
name:'陕西省',
ZY:[
{name:'西安市'},
{name:'宝鸡市'},
{name:'渭南市'},
{name:'咸阳市'},
{name:'榆林市'},
{name:'汉中市'},
{name:'商洛市'},
{name:'延安市'},
{name:'铜川市'},
]
},
{
name:'安徽市',
ZY:[
{name:'马鞍山市'},
{name:'芜湖市'},
{name:'黄山市'},
{name:'合肥市'},
{name:'安庆市'},
{name:'铜陵市'},
{name:'淮南市'},
{name:'淮北市'},
{name:'阜阳市'},
]
},
],
indexId:""
},
computed:{
selection: function() {
for (var i = 0; i < this.YX.length; i++) {
if (this.YX[i].name === this.indexId) {
return this.YX[i].ZY;
}
}
}
},
});
</script>