查询所有案例

1.实现过程
查询所有案例_第1张图片
2.案例代码
brand.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <!-- 引包 -->
    <script src="vue2.0.js"></script>
</head>
<body>
    <div id="root">
        <!-- 添加功能跳转添加页面 -->
        <a href="add.html"><input type="button" value="添加"></a><br>
        <hr>
        <table id="brand" border="1" cellspacing="0" width="100%">
            <tr align="center"><!-- 一行 -->
                <th>序号</th><!-- 列头 -->
                <th>名字</th>
                <th>操作</th>
            </tr>
            <!-- v-for遍历数据项 -->
            <tr v-for="(brand,index) in brands"align="center"><!-- 一行 -->
                <td>{{index+1}}</td><!-- 数据单元格 -->
                <td>{{brand}}</td>
                <td><a href="#">修改</a>
                <a href="#">删除</a>
                </td>
            </tr>

        </table>
    </div>
    <script>
        // 创建Vue核心对象
        new Vue({
            el:"#root",//指定容器id
            data(){
                return{
                    brands:["日用品","学习用品","生活用品"]//为模型数据赋初值
                }
            },
            // mounted:function(){//完整写法
            // }
            mounted(){//简化写法,页面加载完成后发送异步请求,查询数据
                alert("我是发送异步请求的代码....");
            }
        });
    </script>
</body>
</html>

add.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>add</title>
    <script src="vue2.0.js"></script>
</head>
<body>
    <div id="root">
        <h3>添加</h3>
        <form option="" method="post">
            类型:<input id="brandName" v-model="brand" name="brandName">
            <input type="button" id="btn" @click="submit" value="提交">
        </form>
    </div>
    <script>
        new Vue({
            el:"#root",
            data(){
                return{
                    brand:[]
                }
            },
            methods: {
                submit(){//发送请求
                    alert("提交成功!");
                   location.href="brand.html"
                }
            },
        })
    </script>
</body>
</html>

你可能感兴趣的:(Vue,javascript,前端,vue.js)