PHP - Laravel 视图模板(blade.php)导入JS、Css、素材文件并使用

简介: PHP - Laravel 视图模板(blade.php)导入JS、Css、素材文件并使用
  • Laravel 框架中导入 JS、Css、素材 文件怎么使用。
  • Laravel 项目的 web虚拟主机 指定的目录 (也就是网址根目录),项目的入口文件和系统的静态资源目录(css, img, js, uploads) 后期使用的外部静态文件 (js、 css、图片等) 都需要放到 Public 目录下。
  • 这里以 JS 举例,导入 vue.min.js 文件。
    1、将 vue.min.js 导入 Public -> js 文件夹中

    2、到 index.blade.php 中使用
// 渲染数据
<div id="app">
    // php 默认支持 {{}} 写法获取数据,如果需要显示 Vue 属性数据
    // 则需要前面加 @ 表示原始形态输出
    @{{ title }}
</div>
// 这里只需要直接 ./js 就能拿到文件
// 你可以把这个页面文件想象成跟 js 文件是同一级
<script src="./js/vue.min.js"></script>
// 也可以通过 cdn 的方式导入 Vue
<script src="https://cdn-games.netjoy.com/web/static/redPacket/js/vue.min.js"></script>
// 使用 Vue
<script>
var app = new Vue({
  el: '#app',
  data:{
    name: 'dzm'
  }
})
  • 其他 css、素材 文件导入方式一样,引入使用方式也一样
相关文章
|
2月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
8天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
5天前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
7天前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
20天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
2月前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
2月前
|
JavaScript 前端开发 网络安全
Node.js和php
【8月更文挑战第4天】Node.js和php
33 3
|
2月前
|
JavaScript PHP 开发者
PHP中的异常处理与自定义错误处理器构建高效Web应用:Node.js与Express框架实战指南
【8月更文挑战第27天】在PHP编程世界中,异常处理和错误管理是代码健壮性的关键。本文将深入探讨PHP的异常处理机制,并指导你如何创建自定义错误处理器,以便优雅地管理运行时错误。我们将一起学习如何使用try-catch块捕获异常,以及如何通过set_error_handler函数定制错误响应。准备好让你的代码变得更加可靠,同时提供更友好的错误信息给最终用户。
|
2月前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
2月前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
下一篇
无影云桌面