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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
js类型检查实现代码
Oct 29 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
js创建数组的简单方法
Jul 27 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 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
2006/12/13 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PDO::commit讲解
2019/01/27 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
Jquery 切换不同图片示例代码
2013/12/05 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
jquery层次选择器的介绍
2019/01/18 jQuery
JavaScript实现横版菜单栏
2020/03/17 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python logging类库使用例子
2014/11/22 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
大一期末自我鉴定
2013/12/13 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
担保书格式
2015/01/20 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL