<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 07:20:28 浏览: 244

这段代码是使用 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.js入门教程：一步步构建用户界面

Vue.js实战：动态参数与华为交换机IP/MAC绑定

前端开发小技巧：Vue、uni-app与JavaScript解决实例

<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:{ 代码后边的内容，要求可以成功完成查询和新增功能

大家在看

Parasoft Jtest 10.4.0 软件下载地址

计算机领域EI和SCI收录期刊、影响因子及国际会议

Mac OS X10.6.3 Snow Leopard系统 中文版完整安装盘 下载地址连接

SigmaStudioHelp_3.0(中文)

C#线上考试系统源码.zip

最新推荐

SIM800C模块详细资料汇总

电力电子技术的智能化：数据中心的智能电源管理

stream()变成map集合

Delphi XE5实现Android文本到语音功能教程

如何运用电力电子技术实现IT设备的能耗监控

android拖拉实现对应功能

解决Ubuntu中npm-g命令免sudo运行的Shell脚本

电力电子技术：IT数据中心的能源革命者

用matlab编写一个大雾识别代码，内容是大雾天气下实现图片清晰化处理，并且显示原图像和清晰处理后的图像。

安卓瀑布流容器实现与定制效果展示

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

Mac OS X10.6.3 Snow Leopard系统中文版完整安装盘下载地址连接