close

vue.js 測試

目前環境

  • Laravel：5.7
  • 資料庫：MariaDB

說明

  • 所謂的CRUD是指 新增(Create)、讀取(Read)、更新(Update)、刪除(Delete) 在程式動作中，基本的四個動作。
  • Laravel 是一個開源的PHP框架，它由Taylor Otwell開發，支持MVC模式。
  • Vue.js是一個用於建立使用者介面的開源JavaScript框架，也是一個建立單頁面應用的Web應用框架。

上篇確定已以看到 Laravel 首頁了，我們再來確定 Vue.js 是不是可以用

201810171400-12.png

1、將 webcome.blade.php 不必要的資料刪除

把一些不必要東西刪除後，加入圖內的資料

201810180011-2.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、看瀏覽器是否出現以下畫面

如果有出現，就表示是正常的

201810180020-4.png

3、完工及原理說明

app.js 讀取的位置為 /public/js/app.js 原始編碼在 /resources/js/app.js 裡，意思就是我們之後會開始在這裡編寫程式，下圖為該app.js 的內容

201810180025-5.png

由上得知 #app 為為實例提供掛載元素。值可以是 CSS 選擇符，或實際 HTML 元素，或返回 HTML 元素的函數。

簡單的說就是去捉 設為 id="app" 的地方

example-component為子組件，他是去讀取 /resources/js/components/ExampleComponent.vue的資料

也就是你所看到的畫面的資料

<div id="app">

<example-component></example-component>

</div>

上一篇：[CRUD for Laravel & Vue.js] -14- 初始 - laravel - Hello world

下一篇：[CRUD for Laravel & Vue.js] -16- 初始 - pug - pug 測試

[CRUD for Laravel & Vue.js] 文章列表（全）

感謝各位的觀看，如您喜歡我們用心的編排和內容，如您願意支持我們繼續編寫良好的文章，請您幫我們點點廣告，或者點點友情連結的路徑，動動您的手指，我們會非常感謝您的支持！

在此我們非常感謝瑜誠工業有限公司的支持和贊助，如您喜歡我們，也請各位多多參訪該公司網頁，並如您有需求，也能詢問該公司產品，連結： 鑽頭專業製造

文中如有技術不良或寫錯的部份，如您願意指出，我們也很樂意接受您的指正，但請不要惡意攻撃，我們只是為了樂趣而寫的文章。

arrow
arrow
    文章標籤
    crud vue.js
    全站熱搜
    創作者介紹
    創作者 雲橙雨林 的頭像
    雲橙雨林

    雲橙雨林

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄