从头开始用 Laravel 来做CRUD -15- 初始 - vue.js- vue.js测试

http://img2.58codes.com/2024/20112678WG6RtEVvjb.jpg

目前环境

Laravel:5.7资料库:MariaDB

说明

所谓的CRUD是指 新增(Create)、读取(Read)、更新(Update)、删除(Delete) 在程式动作中,基本的四个动作。Laravel 是一个开源的PHP框架,它由Taylor Otwell开发,支持MVC模式。Vue.js是一个用于建立使用者介面的开源JavaScript框架,也是一个建立单页面应用的Web应用框架。

--- 本文开始 ---
上篇确定已以看到 Laravel 首页了,我们再来确定 Vue.js 是不是可以用
http://img2.58codes.com/2024/20112678vC1GT2rZaQ.png

1、将 webcome.blade.php 不必要的资料删除

把一些不必要东西删除后,加入图内的资料
http://img2.58codes.com/2024/20112678NX8LZmi71B.png

程式码如下

<!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、看浏览器是否出现以下画面

如果有出现,就表示是正常的
http://img2.58codes.com/2024/20112678vkYT6PjVcA.png

3、完工及原理说明

app.js 读取的位置为 /public/js/app.js 原始编码在 /resources/js/app.js 里,意思就是我们之后会开始在这里编写程式,下图为该app.js 的内容
http://img2.58codes.com/2024/20112678ih6CEgl1zL.png

由上得知 #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] 文章列表 - 在痞客邦
--- 更多的文章 在痞客邦 ----
痞客邦

感谢

感谢各位的观看!
友情连结:钻头-瑜诚
文中如有技术不良或写错的部份,如您愿意指出,我们也很乐意接受您的指正,但请不要恶意攻撃,我们只是为了乐趣而写的文章。


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章