目前环境
Laravel:5.7资料库:MariaDB说明
所谓的CRUD是指 新增(Create)、读取(Read)、更新(Update)、删除(Delete) 在程式动作中,基本的四个动作。Laravel 是一个开源的PHP框架,它由Taylor Otwell开发,支持MVC模式。Vue.js是一个用于建立使用者介面的开源JavaScript框架,也是一个建立单页面应用的Web应用框架。--- 本文开始 ---
上篇确定已以看到 Laravel 首页了,我们再来确定 Vue.js 是不是可以用
1、将 webcome.blade.php 不必要的资料删除
把一些不必要东西删除后,加入图内的资料
程式码如下
<!doctype html><html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Crud</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/css/app.css"> </head> <body> <div id="app"> <example-component></example-component> </div> </body> <script src="/js/app.js"></script></html>
2、看浏览器是否出现以下画面
如果有出现,就表示是正常的
3、完工及原理说明
app.js 读取的位置为 /public/js/app.js 原始编码在 /resources/js/app.js 里,意思就是我们之后会开始在这里编写程式,下图为该app.js 的内容
由上得知 #app 为为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。
简单的说就是去捉 设为 id="app" 的地方
example-component为子组件,他是去读取 /resources/js/components/ExampleComponent.vue的资料
也就是你所看到的画面的资料
<div id="app"> <example-component></example-component></div>
--- 相关连结 ---
上一篇:从头开始用 Laravel 来做CRUD -14- 初始 - laravel - Hello world
下一篇:从头开始用 Laravel 来做CRUD -16- 初始 - pug - pug 测试
--- 同步更新 ---
[CRUD for Laravel & Vue.js] 文章列表 - 在痞客邦
--- 更多的文章 在痞客邦 ----
痞客邦
感谢
感谢各位的观看!
友情连结:钻头-瑜诚
文中如有技术不良或写错的部份,如您愿意指出,我们也很乐意接受您的指正,但请不要恶意攻撃,我们只是为了乐趣而写的文章。