一、vue复习
为什么要使用vue.js
1、轻量级，体积小是一个重要指标。vue.js压缩后只有20多kb
1、移动优先。更适合移动端，比如移动端的Touch事件
3、易上手，学习曲线平稳，文档齐全
4、汲取了Angular（模块化）和 React （虚拟DOM）的长处，并拥有自己独特的功能，如：计算机属性
5、开源，社区活跃度高
插值表达式{
{}},读取vue中data里面的数据,应用于文本范围
v-for标签属性，用来循环遍历数组，e in arr
e是数组arr中的每一个元素
v-bind:value单向绑定某个属性，让属性中读取data中的数据，通常简写为：
v-model:value 双向绑定，可以读取，也可以改变data中的数据，
通常简写为v-model，只是应用于表单项input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vue.js -->
<script src="vue.min.js"> </script>
</head>
<body>
<!--
插值表达式{
{}},读取vue中data里面的数据,应用于文本范围
v-for标签属性，用来循环遍历数组，e in arr
e是数组arr中的每一个元素
v-bind:value单向绑定某个属性，让属性中读取data中的数据，通常简写为：
v-model:value 双向绑定，可以读取，也可以改变data中的数据，
通常简写为v-model，只是应用于表单项input
-->
<div id="app">
<p>大家好，我是 {
{person.name}} ，我今年{
{person.age}} 岁了</p>
<p>
厚浦的分公司地点有：
<ul>
<li v-for="(hp,i) in hpList">
{
{hp}}--{
{i}}
</li>
</ul>
普通的循环:
<ul>
<li v-for="i in 10">
{
{i}}
</li>
</ul>
</p>
<h3>单向绑定</h3>
<input type="text" name="" id="" v-bind:value="person.name " placeholder="请输入姓名">
<input type="text" name="" id="" :value="person.age " placeholder="请输入姓名">
<h3>双向绑定</h3>
<input type="text" name="" id="" v-model:value="person.name " placeholder="请输入姓名">
<input type="text" name="" id="" v-model="person.age " placeholder="请输入姓名">
</div>
</body>
<script>
//创建vue实例
new Vue({
el:'#app',
data:{
person:{
name:'曹操',age:36},
hpList:['武汉','湖南','河南','陕西']
}
})
</script>
</html>
二、vue表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作|<button @click="addHero">新增</button></th>
</tr>
<tr v-for="hero in heroList">
<td>{
{hero.id}}</td>
<td>{
{hero.name}}</td>
<td>{
{hero.age}}</td>
<td><button @click="deleteHero(hero.id)">删除</button> | <button>修改</button></td>
</tr>
</table>
<div v-show="isInputShow">/*v-show和v-if之间有着看似相同的效果，但优化上却有区别，v-show实际上会将标签的css样式的display属性设置为none来达到隐藏的效果
而v-if是直接在页面上添加和删除标签来达到效果，因此v-show在反复切换的应用场景下，效率比v-if更高
*/
<h3>新增英雄</h3>
<input type="text" v-model="hero.id" placeholder="请输入序号"><br><br>
<input type="text" v-model="hero.name"placeholder="请输入姓名"><br><br>
<input type="num" v-model="hero.age"placeholder="请输入年龄"><br><br>
<input type="submit" @click="insertHero"><br><br>
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
//控制表单隐藏和显示
isInputShow:false,
//双向绑定实现表单数据的获取
hero:{
id:'',
name:'',
age:''
},
heroList:[
{
id:1,name:'曹操',age:36},
{
id:2,name:'刘备',age:32},
{
id:3,name:'孙权',age:28},
]
},
methods:{
deleteHero(id){
// alert(id)
this.heroList=this.heroList.filter((e,i)=>{
return e.id!=id
})
},
addHero(){
this.isInputShow=!this.isInputShow
},
insertHero(){
// console.log(this.hero)
this.heroList.push(this.hero)
}
}
})
</script>
</html>