CSIC_716_20200212【Vue入门-属性指令、事件指令、表单指令、条件指令、循环指令、数组操作前台数据库】
"""
1、v-cloak斗篷指令
2、属性指令
v-bind:title="变量"
:class="变量" | :class="[变量1, ..., 变量n]" | :class="{类名: 布尔变量}"
:style="字典变量"
3、事件：@click @dblclick @mouseover|out|down|up
鼠标单击、双击、悬浮、移开、按下、抬起
4、表单指令：
v-model绑定变量控制value属性，可以实现双向绑定
5、条件指令：
v-show | v-if
v-if | v-else-if | v-else
6、循环指令：
字符串：v-for="v in str" | v-for="(v, i) in str"
数组：v-for="v in arr" | v-for="(v, i) in arr"
对象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
7、Array操作
arr.push(ele) arr.unshift(ele)
arr.pop() arr.shift()
arr.splice(begin_index, count, args)
8、前台数据库
localStorage | sessionStorage
1）操作就类似于obj，直接 .key 语法访问 value
2）localStorage永久存储
3）sessionStorage生命周期同所属页面标签
综合实例
books = [
{ name: '西游记', price: 66, author: 'Bob'},
{ name: '东游记', price: 77, author: 'Tom'},
{ name: '西厢记', price: 88, author: 'Jerry'},
]
用表格table渲染以上数据
扩展要求：
i) 可以在表格每条数据后加一个 删除 按钮，可以删除当前书籍
ii) 可以增加三个输入框，一个提交框，完成新增书籍
iii) 刷新页面数据不会重置
实现代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table> <thead> <tr> <th v-for="(e,k,i) in books[0]">{{k}}</th> <!-- e是值value，k是键key,i是索引index--> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(obj,i) in books"> <td>{{obj.name}}</td> <td>{{obj.price}}</td> <td>{{obj.author}}</td> <td> <button @click="delbook(i)">删除</button> </td> </tr> </tbody> </table> <form action=""> name <input name="name" type="text" v-model="n1"> price<input name="price" type="text" v-model="p1"> author<input name="author" type="text" v-model="a1"> <button type="button" @click="addbook">点我提交</button> </form> </div> </body> <script> let books = [ {name: '西游记', price: 66, author: 'Bob'}, {name: '东游记', price: 77, author: 'Tom'}, {name: '西厢记', price: 88, author: 'Jerry'}, ]; new Vue({ el: '#app', data: { n1: '', p1: '', a1: '', books: localStorage.books ? JSON.parse(localStorage.books) : books }, methods: { addbook() { let obj = { name: this.n1, price: this.p1, author: this.a1 }; // this.books.push(obj); this.books.unshift(obj); this.n1 = ''; this.p1 = ''; this.a1 = ''; localStorage.books = JSON.stringify(this.books) }, delbook(index) { this.books.splice(index, 1); localStorage.books = JSON.stringify(this.books) } } }) </script> </html>
