网站设计 完成 <script> new Vue({ el: '#app', data:{ 代码后边的内容，要求可以成功完成查询和新增功能

网站设计通常包括前端和后端两部分。前端负责用户界面的设计和交互体验，常见的技术和框架有HTML、CSS、JavaScript以及Vue.js等。你提供的`<script>`代码片段是一个简单的Vue.js应用程序示例，它使用了Vue库在一个id为'app'的元素上创建了一个新的组件。

在这个例子中：
1. `new Vue({})` 创建了一个新的Vue实例，`data:` 属性用于定义初始的数据模型，这里的键值对将作为视图层的数据源。
2. `el: '#app'` 指定了应用的挂载点，即页面上的id为'app'的DOM元素，Vue将在该元素内渲染应用。

为了完成查询和新增功能，你可能需要添加以下内容：

methods: {
    // 查询函数
    fetchData(query) {
        axios.get('/api/data', { params: { query } }) // 使用axios发起GET请求
            .then(response => {
                this.dataList = response.data; // 接收数据并更新数据列表
            })
            .catch(error => console.error('Error:', error));
    },
    
    // 新增函数
    addData(item) {
        axios.post('/api/data', item) // 发起POST请求添加新数据
            .then(response => {
                console.log('Item added successfully:', response.data);
                this.fetchData(); // 添加后刷新查询结果
            })
            .catch(error => console.error('Error:', error));
    }
},
// 在模板中添加按钮和列表展示
<template>
    <div id="app">
        <input v-model="query" @keyup.enter="fetchData(query)">
        <button @click="addData(newData)">添加</button>
        <ul>
            <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
</template>

这里假设你已经安装了axios库用于API请求，并且后端API支持查询和新增操作。记得在实际项目中替换'/api/data'为实际的API路径。