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>

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

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

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

arrow
arrow
    文章標籤
    crud vue.js
    全站熱搜

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