Laravel 如何在blade文件中使用Vue组件的示例代码


Posted in Javascript onJune 28, 2020

Laravel 如何在blade文件中使用Vue组件,具体代码详情请看下文:

1. 安装laravel/ui依赖包

composer require laravel/ui

2.生成vue基本脚手架

php artisan ui react

系统还提供了非常便捷的auth脚手架,带登录注册。

php artisan ui react --auth

3.组件位置

Vue组件ExampleComponent.vue将被放置在resources/js/components目录中。ExampleComponent.vue文件是单个文件Vue组件的示例,该组件在同一文件中定义其JavaScript和HTML模板。单个文件组件为构建JavaScript驱动的应用程序提供了一种非常方便的方法。该示例组件已在您的app.js文件中注册:

Vue.component(
 'example-component',
 require('./components/ExampleComponent.vue').default
);

4.在blade模版中使用

要在应用程序中使用该组件,您可以将该组件放入Blade模板xxx.blade.php中:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>@yield('title')</title>
 <link rel="stylesheet" href="{{mix('/css/app.css')}}">
</head>

<body>
 <divid="app">
  <example-component></example-component>
 </divid=>
 <script src="{{mix('/js/app.js')}}"></script>
</body>

</html>

Laravel 如何在blade文件中使用Vue组件的示例代码

注意:在blade文件中一定要有id为app的根节点,而且把组件放到里面,才能生效!!!

总结

到此这篇关于Laravel 如何在blade文件中使用Vue组件的文章就介绍到这了,更多相关Laravel 使用Vue组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js中typeof的用法汇总
Dec 12 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
JavaScript多种图形实现代码实例
Jun 28 #Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 #Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 #Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 #Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 #Javascript
viewer.js实现图片预览功能
Jun 24 #Javascript
Javascript实现鼠标移入方向感知
Jun 24 #Javascript
You might like
PHP代码优化的53个细节
2014/03/03 PHP
php数组键名技巧小结
2015/02/17 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
实例解析php的数据类型
2018/10/24 PHP
js静态作用域的功能。
2006/12/25 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python浪漫表白源码
2019/04/05 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python学生管理系统的实现
2020/04/05 Python
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
一套软件测试笔试题
2014/07/25 面试题
大学生个人求职信范文
2013/09/21 职场文书
心理健康教育制度
2014/01/27 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
食品安全处置方案
2014/06/14 职场文书
欢迎家长标语
2014/10/08 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
暑期实践个人总结
2015/03/06 职场文书
送达通知书
2015/04/25 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
Python测试框架pytest高阶用法全面详解
2022/06/01 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技