Webpack中使用Vue和直接script使用Vue的一个区别(v-for需要指定:key)

最新推荐文章于 2024-05-08 15:07:17 发布
最新推荐文章于 2024-05-08 15:07:17 发布
阅读量147 收藏 1
点赞数 2
分类专栏： VUE框架学习笔记 乱七八糟出其不意的知识 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42136832/article/details/120674660
版权

Webpack-Vue

问题来由

滋了一个天气预报的demo来着，不过大家知道，天气预报就一个界面，直接用script引入vue然后开发就好了，axios也可以script引入。所以就完成啦。

然后为了熟悉一下vue的初始化这些，就做了一下把这个转到webpack上，这样可以打包，这个过程自然又可以学到一些新的知识。

比如跨域script引入的axios，我们可以使用jsonp来跨域(针对https)
但是在webpack中就没法使用这个了，如何配置axios跨域会在研究之后和大家分享！

代码移植报错

Property or method “item“ is not defined on the instance but referenced during render.
很奇怪啊，不知道为什么会这样

找了很久，给v-for后面加了:key就不报错了
在这里插入图片描述

钧桐
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue+Webpack中引入TypeScript
SHARECLUB
03-11 690
使用vue-cli创建项目 1、安装vue-cli yarn global add @vue/cli //npm install --global vue-cli 2、创建项目 vue init webpack myProject //创建前的一些配置 Project name: 项目名称 Project description： 项目描述 Author: 作者 Vue build: ...
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
总结来说，Vue.js中使用`v-for`给循环标签添加属性值时，需要理解如何正确地动态绑定属性（使用`:`或`v-bind`），以及在处理图片路径时如何确保Webpack能识别和处理这些路径。通过`require()`、`import`或使用`...
webpack 中导入 vue 和普通网页使用 vue 的区别（四）
weixin_30553837的博客
05-28 173
一：在普通网页中使用 vue 使用 script 标签，引入 vue 包 在 ndex 页面中，创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二：在 webpack 中使用 vue 　　执行命令 ： npm i vue -S 把 vue 包安装成项目运行依赖 main.js： //入口文件 //如何在 webpack 构架的...
Vue3 script标签的三种不同写法和区别
weixin_42254491的博客
05-08 276
vue3内的<script>标签众所周知是用来写js/ts代码的，更新后的vue3可以不用data做数据声明，不用return做参数返回，可以使用setup，在setup内写想写的一切，但依旧需要return。开始会进行百度一下，发现并没有针对性措施后就需要理解为何会出现这样的错误，但去翻阅官方文档太繁琐，所以借助AI来的最快，vscode和idea都支持免费ai插件，推荐刚入门vue的同志们在遇到一些理解或版本问题时可以去借助AI来帮助你。你会发现自己的进步随着问题的积累越来越快。
关于前端Vue的webpack的基本只用总结心得
zhurenjin的博客
04-20 95
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库
Vue学习笔记（十五）——搭建基于webpack的vue开发环境
讨厌走开啦
06-14 502
参考文档：https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 依次执行文档贴出的命令即可完成基于webpack的vue开发环境的搭建，如果无法成功搭建（如某一步骤发生错误）请在文档下留言以便笔者更正。 环境准备（首先搭建webpack环境，故vue会在后面的步骤安装） 1.初始化工程： npm init 2.安装we...
在vue页面使用script标签方法
Hunipei的博客
04-19 2056
script.src=" " 中的路径填写你要添加的script URL路径。
精通Vue的v-for与key：提升列表渲染的秘诀
最新发布
06-27
Vue.js是一个用于创建交互式Web应用的开源框架，它易于上手，同时具备高效和灵活的特点。Vue的核心库只关注视图层，使得它非常容易学习，并且能够轻松地被集成进项目中。Vue.js采用组件化的开发模式，允许开发者通过...
webpack-i18n-loader:配合vue-i18n使用的wepback loader，国际化全流程解决方案
05-14
webpack-in-loadervue-i18n版本的wepback loader，给出一个简单的demo。HTML<div>你好，世界资源文件//zh.jsmodule.exports = { "a018615b35588a01": "你好，世界" //key是根据中文生成16的MD5}//en.jsmodule....
laravel-vue：使用laravel5.4 + vue2.0 + elementui
02-03
laravel5.4 + vue2 + vuex + vue-路由器+ webpack + ES6 / 7 + elementui +七牛云存储+ redis + sass 要求 PHP 5.6或更高版本（PHP 7最好） mysql 5.6或更高版本 作曲家（下载链接： : ） nodejs（下载链接： ://...
vue中使用localstorage来存储页面信息
08-28
Vue 中使用 LocalStorage 存储页面信息 在 Vue 中，LocalStorage 是一种常用的客户端存储方式，可以用来存储页面信息、本地数据等。在本文中，我们将详细介绍使用 LocalStorage 存储页面信息的方法，并提供一个完整...
基于script标签引入vue.js
08-21
html页面基于script标签引入vue使用时，将此js放在项目路径中引用即可离线使用vue框架，避免在线引用网络延迟。 具体使用方法可参考我的博客
在vue中引入多个script标签
qq_38918953的博客
09-17 1万+
注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。 1.可以在index.html中引入，在HTML文件中可以引入多个script标签。 <head> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqskoI...
Vue.js 基本知识——基于script标签引入
热门推荐
07-01 4万+
1、使用Script标签引入vue的方法 <script src="https://unpkg.com/vue/dist/vue.js"></script> 也可以将vue.js文件下载至项目目录。调试环境建议用vue.js，生产环境建议用vue.min.js 2、组件必须有一个顶级容器，Vue的功能必须要在这此容器内。 <div id="myApp">...
vue 指令标签
青梅煮酒论英雄的博客
06-27 491
基础vue
Vue3入门 ----- script setup、computed、watch、组件通讯、ref
weixin_51972964的博客
03-13 6197
前言: 因为公司的一个后台新项目决定用Vue3, 然而同事包括自己使用Vue3时, 除了一些语法例setup, defineComponent等与Vue2有区别外, 并没有其他特别的地方, 反而增添了开发的工作量. 觉得Vue3和Vue2最大的不同不该是语法上的不同, 故决定系统性地开展Vue3的学习. 初使用 和Vue2使用的optionsAPI(例如: 数据放 data 中, 方法放 methods中)不同的是, Vue3是用了composition API, 提升了代码的可读性和可维护性, 同时也保
vue基础命令及webpack创建Vue项目
yang13676084606的博客
08-31 143
vuevue基础命令v-bind指令v-forv-on vue基础命令 v-bind指令 v-bind指令的作用是：为元素绑定属性 完整写法是v-bind：属性名 简写的话可以直接省略v-bind,只保留：属性名 v-for v-for指令的作用是：根据数据生成列表结构 数组经常和v-for结合使用 语法是（item,index）in 数据 item和index可以结合其他指令一起使用 数组长度的更新会同步到页面上，是响应式的 v-on 传递自定义参数，事件修饰符 文档传送门 链接: 链接. 事件绑定的方法
关于v-for key问题，不解决不开心
Thekingyu的博客
01-31 1758
先说为什么会报这样的错，因为vue想更好，更快的编译，所以报了一个不算错误的错误，解决，，找数组，唯一id, 例如 router-link :to="{path:'/coach_detail',query: {id:y.id}}" v-for="y in list" :key="y.id"> 在例如 router-link :to="{path:'/coach_detail'
什么是同步？什么是异步？ localStorage、sessionStorage和cookie的区别？ Vue中key的作用是什么？ 支付流程是什么？ Vuex的模块化是如何做的？讲讲？ Vite和webpack的不同？Vite的优势是什么？ 事件冒泡和捕获？ React中的事件合成机制？ Map，foreach，for...of区别？ 组件之间如何自定义实现一个v-model？
06-07
10. 组件之间如何自定义实现一个v-model： 可以通过props和emit来实现自定义v-model。父组件将value和input事件绑定到子组件的props和emit上，子组件通过props接收value，通过emit触发input事件，并将新值传递给父...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值