发表于： 2017-02-16 20:31:57
1 1147
今天完成的事：今天将vue的组件知识搞懂了并且写了个小demo，并把之前学习到的vue知识综合写了另一个demo，一会一并发上来。
明天计划的事：继续学习剩下的部分，最近发现学习效率突然变高了，面试刺激的？？...
遇到的问题：今天遇到的问题主要是vue升级部分，由于1和2有部分内容更新的，并且移除了一部分方法，所以在找更新的内容。解决只是时间的问题。
另外今天遇到一个对象写法的问题，咨询了桦伟师兄也没找到原因，现在贴出来，希望路过的能找到原因、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div id="app">
<fieldset>
<legend>
人员登记表
</legend>
<div class="form-group">
<label>名字:</label>
<input type="text" v-model="newPerson.name">
</div>
<div class="form-group">
<label>年龄:</label>
<input type="text" v-model="newPerson.age">
</div>
<div class="form-group">
<label>性别:</label>
<select v-model="newPerson.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label></label>
<button v-on:click="creatPerson">创建</button>
</div>
</fieldset>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td v-bind:class="'text-center'">{{person.name}}</td>
<!--此处绑定的class的值必须带上引号-->
<td class="text-center">{{person.age}}</td>
<td class="text-center">{{person.sex}}</td>
<td class="text-center"><button v-on:click="deletePerson($index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
newPerson:{
name:'',
age:'',
sex:'男'
},
people:[{
name:'王义山',
age:'26',
sex:'男'
},{
name:'陈红原',
age:'25',
sex:'男'
},{
name:'韩沈明',
age:'26',
sex:'男'
}
]
},
methods:{
creatPerson:function (argument) {
if (this.newPerson.name!==''&&this.newPerson.age!=='') {
this.people.push(this.newPerson);
// this.newPerson.name=''
// this.newPerson.age=''
// this.newPerson.sex='男'，用这三个代替为什么不行？
this.newPerson={name:'',age:'',sex:'男'}
}else(
alert("姓名和年龄不能为空")
)
},
deletePerson:function (index) {
this.people.splice(index,1)
}
}
})
</script>
</html>
收货：今天收货蛮大的，主要是关于vue部分这几天的困惑都解决了。并且学习了很多有用的部分
.sync可以显示地指定双向绑定，父子可以互相都影响，默认子是无法影响父的
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
.once表示单次绑定。
box-flex：属性表示弹性盒子按照倍数显示
<fieldset>
<legend>标签是表格中常用到的
返回列表
评论