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 相关文章推荐
js验证模型自我实现的具体方法
Jun 21 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
关于使用js算总价的问题
Jun 23 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
浅谈react useEffect闭包的坑
Jun 08 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
django实现分页的方法
2015/05/26 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python爬取抖音视频的实例分析
2021/01/19 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
承诺书怎么写
2014/03/26 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2016公司年会通知范文
2015/04/25 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
小学运动会开幕词
2016/03/04 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
CSS完成视差滚动效果
2021/04/27 HTML / CSS