Vue.js指令实验2_用vue2:通过表单绑定实现一个创建图书的功能,图书属性包括书名、作者、单价、所属-CSDN博客

本文链接：https://blog.csdn.net/baby1215665/article/details/146377156

Web前端开发技术实验报告

Vue.js指令实验2

一、实验目的：

理解Vue指令
掌握结构渲染指令的使用
掌握表单绑定的使用
掌握事件处理方法

二、实验要求：

掌握Vue.js指令的基本语法及使用。
编写程序并调试，完成以下实验内容。
上交实验报告电子文档。文档包含源程序，以班级、学号后两位、姓名依次出现组成的字符串如“计算机20-1班01张三实验2” 标识。各班学委收齐本班本次实验后进行打包（打包文件为.rar或.zip类型），使用名称如“1班Web前端开发技术实验2”提交。

三、实验内容：

1、模拟电商网站显示的商品列表如图1所示。所用图片可从网上搜集。

图1 实验题1运行效果

2、通过表单绑定实现一个创建图书的功能，图书的属性包括书名、作者、单价、所属分类、封面、简介、是否发布。点击“创建”按钮，控制台内输出提交的信息对象。

3、在页面上定义一个div元素，通过CSS设置边长为128px的正方形，并加上边框。当鼠标进入此div范围内，就在正方形的上方显示鼠标在正方形内的位置坐标，，使正方形的背景色随鼠标位置的变化而变化如图2所示。（提示：可在正方形上侦听mousemove事件并进行处理。）

图2 实验题3运行效果

四、实验过程中遇到的问题及解决手段：

1.如图报错，如图1

图1

解决方法：绑定数据的时候忘记加“：”了，加上“：”即可如图2

图2

2.展示图片时发现，展示失败如图3

图3

解决方法：把图片路径写到页面发现乱码如图4，原来是路径没有转义字符，把“/”改成“\”即可如图5。

图4

图5

3.绑定内联样式的时候无从下手，如下图style中的GRB（）中的参数不知道怎么引用数据模型的数据

解决方法：:style="{'background-color':`RGB(${x},${y},${x+y})`}"

五、实验结果和代码：

（一）实验1

1.实验结果，如图6

图6

2.实验代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>

<img :src="item.id"alt=""

height="100px"

width="150px">

</td>

<td>

￥{{item.price}}/斤

</td>

</tr>

<hr>

</template>

</div>

</body>

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({

el:'#root',

data:{

shangpin:[

{name:"橙",id:"D:\\vue.js\\代码\\代码\\vue_basic\\21_实验2\\img\\橙.png",price:"9"},

{name:"草莓",id:"D:\\vue.js\\代码\\代码\\vue_basic\\21_实验2\\img\\草莓.png",price:"20"},

{name:"香蕉",id:"D:\\vue.js\\代码\\代码\\vue_basic\\21_实验2\\img\\香蕉.png",price:"3"},

{name:"樱桃",id:"D:\\vue.js\\代码\\代码\\vue_basic\\21_实验2\\img\\樱桃.png",price:"15"},

]

})

</script>

</html>

（二）实验2

1.实验结果，如图7，图8，图9

图7（原始页面）

图8（添加了一本书）

图9

2.实验代码

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>

    <style>

        .grid {

            margin: auto;

            width: 100%px;

            text-align: center;

        }



        .grid table {

            border-top: 1px solid #fff;

            width: 100%;

            border-collapse: collapse;

        }



        .grid th,

        td {

            padding: 10px;

            border: 1px dashed green;

            height: 35px;

            line-height: 35px;

        }



        .grid th {

            background-color: green;

        }



        a {

            text-decoration: none;

        }



        .book {

            background-color:green;

            padding: 20px 0;

        }



        .grid .total {

            height: 30px;

            line-height: 30px;

            background-color: green;

            border-top: 1px solidgr green;

        }

        #app{

            color: black;

        



        }

    </style>

</head>



<body>

    <div id="app" >

        <div class="grid">

            <div>

                <h1>图书管理</h1>

                <div class="book">

                    <label for="id">编号：</label>

                    <input type="text" id="id" v-model='id' :disabled='flag' v-focus>

                    <label for="id">书名：</label>

                    <input type="text" id="name" v-model='name'>

                    <label for="id">作者：</label>

                    <input type="text" id="author" v-model='author'>

                    <label for="id">单价：</label>

                    <input type="text" id="price" v-model='price'><br><br>

                    <label for="id">所属分类：</label>

                    <input type="text" id="classify" v-model='classify'>

                    <label for="id">封面：</label>

                    <input type="text" id="face" v-model='face' >

                    <label for="id">简介：</label>

                    <input type="text" id="introduction" v-model='introduction'>

                    <label for="id">是否发布:</label>

                    <input type="text" id="isPublic" v-model='isPublic'>



                    <button @click='handle' :disabled="submitFlag">创建</button>

                </div>

            </div>

            <div class="total">

                <span>图书总数：</span>

                <span>{{total}}</span>

            </div>

            <table>

                <thead>

                    <tr>

                        <th>编号</th>

                        <th>书名</th>

                        <th>作者</th>

                        <th>单价</th>

                        <th>所属分类</th>

                        <th>封面</th>

                        <th>简介</th>

                        <th>是否发布</th>



                    

                    </tr>

                </thead>

                <tbody>

                    <tr :key='item.id' v-for='(item,index) in books'>

                        <td>{{item.id}}</td>

                        <td>{{item.name}}</td>

                        <td>{{item.author}}</td>

                        <td>{{item.price}}</td>

                        <td>{{item.classify}}</td>

                        <td>

                            <img :src="item.face"alt=""  

                            height="100px"

                            width="150px">

                        </td>

                        <td>{{item.introduction}}</td>

                        <td>{{item.isPublic}}</td>     

                    </tr>

                </tbody>

            </table>

        </div>

    </div>



    <script>

        new Vue({

            el: "#app",

            data: {

                id:"",

                name: '',

                author: '',

                price:"",

                face:"",

                classify:"",

                introduction:"",

                isPublic:"",

                flag: false,

                submitFlag: false,

                books: '',



            },

            methods: {

                handle() {

                    // 判断是否为编辑模式

                    if (this.flag) {

                        // 根据当前的id更新数组中对应的数据

                        this.books.forEach(item => {

                            if (item.id == this.id) {

                                item.name = this.name;

                                return;

                            }

                        });

                        this.flag = false;

                    } else {

                        // 添加图书

                        let book = {};

                        book.id = this.id;

                        book.name = this.name;

                        book.author=this.author;

                        book.pricer=this.price;

                        book.face=this.face;

                        book.classify=this.classify;

                        book.introduction=this.introduction

                        this.books.push(book);

                        console.log(book);

                    }

                    // 清空表单

                    this.id = '';

                    this.name = '';

                },

                toEdit(id) {

                    // 禁止改变id

                    this.flag = true;

                    // 根据id查询要编辑的数据

                    let book = this.books.filter(item => {

                        return item.id == id;

                    });

                    // 把获取的信息填充表单

                    this.id = book[0].id;

                    this.name = book[0].name;

                },

           

            },

            filters: {

                format(value) {

                    let date = new Date(Number(value));

                    let year = date.getFullYear();

                    let month = date.getMonth() + 1;

                    if (month < 10) {

                        month = `0${month}`;

                    }

                    let day = date.getDate();

                    if (day < 10) {

                        day = `0${day}`;

                    }

                    return `${year}-${month}-${day}`;

                }

            },

            // 自定义指令

            directives: {

                focus: {

                    inserted(el) {

                        el.focus();

                    }

                }

            },

            computed: {

                total() {

                    // 计算图书总数

                    return this.books.length;

                }

            },

            watch: {

                name: function (val) {

                    // 验证图书名称是否已经存在

                    this.submitFlag = this.books.some(item => {

                        // 如果存在则为真，将submitflag等于true

                        return item.name == val;

                    })



                }

            },

            // 该声明周期钩子函数被触发时，模板已经可以使用了

            // 一般此时用于获取后台数据，然后将数据填充到模板

            mounted() {

                var data = [

                    {

                        id: 1,

                        name: '三国演义',

                        author: '罗贯中',

                        price:"111",

                        face:"D:/vue.js/代码/代码/vue_basic/21_实验2/img/草莓.png",

                        classify:"文学",

                        introduction:"经典文学",

                        isPublic:"是",

                        flag: false

                    },]



                this.books = data;

            },

        })

    </script>

</body>
</html>

（三）实验3

1.实验结果，如图10