<script type="text/javascript"> // new 一个 vue实例 new Vue({ el: "#app", data: { // 定义一个数组去接受后端传过来的数据 bookList:[], }, // 方法都写在这里面 methods: { // 查询所有书籍 selectAllBook(){ const _this = this // 在这里发送请求，获取到后端的数据 $.ajax({ // 设置请求路径 url:'/book', // 设置请求方式 type:'get', // 数据：传给后端的数据 data:{ method:"selectAllBook", }, // 设置返回值类型 dataType:'json', // 设置成功的回调函数 success:function (rs) { // rs 是一个参数，接收的后端的返回数据 _this.booList = rs.data // console.log(rs); } }) } }, mounted(){ this.selectAllBook(); }, }) </script>

时间: 2024-02-10 14:20:28 浏览: 225

这段代码是使用 Vue.js 框架开发的一个前端页面，包含了一个 Vue 实例和一个方法 selectAllBook()。这个方法会发送一个 AJAX 请求到后端接口，获取所有书籍的数据并存储在 bookList 数组中。代码中使用了 jQuery 库来发送 AJAX 请求。另外，mounted() 方法会在 Vue 实例挂载后自动调用 selectAllBook() 方法，从而自动获取并显示所有书籍的数据。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> {{message}} </div> <div id="v1"> <input type="text" v-model=""> </div> </body> <script> new Vue({ el: "#app", data:{ message: "Hello Vue" } }) new Vue1({ el: "#v1", data:{ message: "123" } }) </script> </html> vue1为什么不运行

在你的 HTML 代码中，你只引入了 Vue.js 一次，而在你的 JavaScript 代码中，你却创建了两个 Vue 实例，一个是 `new Vue`，另一个是 `new Vue1`。因此，当浏览器处理到 `new Vue1` 时，会抛出一个错误，因为 Vue1 并没有被定义过。如果你想要让 `new Vue1` 正常运行，你需要在 HTML 代码中引入一个新的 Vue.js 文件，或者复制并重命名 Vue.js 文件，然后在 HTML 代码中引入它，例如： ``` <script src="vue/vue.js"></script> <script src="vue/vue1.js"></script> ``` 然后在 JavaScript 代码中创建一个新的 Vue 实例： ``` new Vue1({ el: "#v1", data: { message: "123" } }) ``` 这样就可以让 `new Vue1` 运行了。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <a v-bind:href="url">{{text}}</a><br> <a :href="url">{{text}}2</a> </div> </body> <script> new new Vue({ el: "#app", data: { url: "D:/JavaTest/web/vue/01_vue_%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.html", text: "快速入门" } }) </script> </html> 执行报错 Uncaught TypeError: (intermediate value) is not a constructor

这个错误是因为在创建Vue实例时存在一个多余的"new"关键字。在代码中，你意外地在"new Vue"之前多写了一个"new"关键字。请将代码中的第10行改为以下形式： ```javascript new Vue({ el: "#app", data: { url: "D:/JavaTest/web/vue/01_vue_%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.html", text: "快速入门" } }) ``` 这样就可以修复这个错误了。注意，我还将Vue.js库的引用路径修改为了相对路径（js/vue.min.js），以便在本地运行时能够找到该文件。你也可以根据需要调整路径。

阅读全文

相关推荐

vue中v-text / v-html使用实例代码详解

基于Vue的一个前后端分离系统的介绍及代码示例的介绍.docx

vue代码示例.docx

<nut-col :span="12" style="background-color: #1de9b6"> <router-link to="/rewards/rewardslist"> {{ rewards }} 我的嘉奖 </router-link> </nut-col> </nut-row>发送ajax获取rewards值

如何把传入的7改成img 地方小吃

a标签不在vue的生命周期里，如何和vue交互

{{item.name}} 中的centermenu的值在哪找

利用vue的基本结构在网页上编写一个纳税计算器。新编写的代码只包括以下功能：收入低于等于5000，不纳税。5000-20000之间缴纳3%，20000以上缴纳10%。代码中要用到<script src="vue.global.js"></script>这段代码。

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

最新推荐

vue实现商品加减计算总价的实例代码

vue中如何动态绑定图片,vue中通过data返回图片路径的方法

vue的for循环使用方法

vue实现输入一位数字转汉字功能

黑板风格计算机毕业答辩PPT模板下载

管理建模和仿真的文件

提升点阵式液晶显示屏效率技术

在SoC芯片的射频测试中，ATE设备通常如何执行系统级测试以保证芯片量产的质量和性能一致？

CodeSandbox实现ListView快速创建指南

"互动学习：行动中的多样性与论文攻读经历"

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