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 命名规则 变量命名规则
Feb 25 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
简单的JS轮播图代码
Jul 18 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
js图片上传的封装代码
Aug 01 Javascript
深入理解React高阶组件
Sep 28 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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实现用户认证及管理完全源码
2007/03/11 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php析构函数的简单使用说明
2015/08/24 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
python分割文件的常用方法
2014/11/01 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python使用配置文件过程详解
2019/12/28 Python
tensorflow多维张量计算实例
2020/02/11 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
入党思想汇报
2014/01/05 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
医院志愿者活动总结
2015/05/06 职场文书
学生会招新宣传语
2015/07/13 职场文书
python 对图片进行简单的处理
2021/06/23 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang
MySQL sql模式设置引起的问题
2022/05/15 MySQL