第一次接触神奇的前端框架vue.js
程序员文章站
2022-05-30 08:07:07
前言
入手2016最火前端框架之一vue.js。大概从网上找了些资料看了下vue.js，从网上的资料来看只能惊叹其发展速度太快，...
前言
入手2016最火前端框架之一vue.js。大概从网上找了些资料看了下vue.js，从网上的资料来看只能惊叹其发展速度太快，让我意外的是其作者是华人的前提下作品这么受欢迎。 网上的博客和教程各种组合。以至于我都有些感觉out。各种vue+webpack、vue+react、vue+es6+npm等等。琳琅满目。真是三天不学习赶不上*。
开篇主要是初次了解下vue.js，包括v-model、v-if、v-else、v-show、v-for(2.0对$index和$key舍弃，2.0要用index属性语法为 v-for="(person,index) in persons")、v-on。
看图
看代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js curd</title>
<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="row" id="app">
<div class="col-xs-12 col-md-8">
<fieldset>
<legend>new person</legend>
<div class="form-group">
<label>id</label>
<input type="text" v-model="newperson.id"/>
</div>
<div class="form-group">
<label>name:</label>
<input type="text" v-model="newperson.name"/>
</div>
<div class="form-group">
<label>age:</label>
<input type="text" v-model="newperson.age"/>
</div>
<div class="form-group">
<label>sex:</label>
<select v-model="newperson.sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
</div>
<div class="form-group">
<label></label>
<button @click="createorupdate">ok</button>
</div>
</fieldset>
</div>
<div class="col-xs-12 col-md-8">
<table class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr v-for="(person,index) in persons">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td><button @click="deleteperson(index)">delete</button></td>
<td><button @click="update(index)">update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
array.prototype.arrindex=function(obj){
for(let i=0;i<this.length;i++){
var tmp=this[i];
if(tmp==obj){
return i;
}
}
}
var vm=new vue({
el:'#app',
data:{
editlock:1,
newperson:{
id:0,
name:'',
age:0,
sex:'male'
},
persons:[{
id:1,
name: 'jack',
age: 30,
sex: 'male'
}, {
id:2,
name: 'bill',
age: 26,
sex: 'male'
}, {
id:3,
name: 'tracy',
age: 22,
sex: 'female'
}, {
id:4,
name: 'chris',
age: 36,
sex: 'male'
}]
},
methods:{
create:function(){
this.persons.push(this.newperson);
this.newperson={id:0,name:'',age:0,sex:'male'};
},
createorupdate:function(){
if(this.editlock===1){
this.persons.push(this.newperson);
}else{
//删除老对象
var aindex=this.persons.arrindex(this.newperson);
console.log(aindex);
this.persons.splice(aindex,1);
//插入新对象
this.persons.push(this.newperson);
}
this.newperson={id:0,name:'',age:0,sex:'male'};
},
deleteperson:function(idx){
this.persons.splice(idx,1);
},
update:function(idx){
var p =this.persons[idx];
this.editlock=0;
this.newperson=p;
}
}
})
</script>
</body>
</html>
参考资料:
本文已被整理到了《vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 小孩子学的快，用的很搞笑。
下一篇： 几件令人发笑的雷人囧事