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>

本节案例