在laravel中使用vuejs的UI(element-UI)元件時是直接複製到到頁面中還是弄成.vue檔案?
PHPz
PHPz 2017-05-16 16:49:06
0
3
824

在laravel 5.3中使用element-UI,不是使用前後端分離的方式開發,
先按照這篇文章進行了配置http://codesky.me/archives/tr...
demo已經正常顯示,即welcome.blade.php是下面這樣的:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <p id="app">
    <example></example>
    <el-button>Hello</el-button>
  </p>
  <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

問題:
1、想法還是有點混亂,不知道element-UI元件該怎麼使用,例如要使用下面這個開關http://element.eleme.io/#/zh -...
元件程式碼該放哪裡?是弄成.vue檔案還是直接在頁面需要的位置寫?

<el-switch
  v-model="value1"
  on-text=""
  off-text="">
</el-switch>
<el-switch
  v-model="value2"
  on-color="#13ce66"
  off-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value1: true,
        value2: true
      }
    }
  };
</script>

2、這種js渲染的表單類別元素,要提交的時候可以用傳統方式提交嗎?還是只能用ajax提交?

PHPz
PHPz

学习是最好的投资!

全部回覆(3)
刘奇

前後端不分離的話.vue檔你不用vue-loader之類的編譯,瀏覽器不認識吧

曾经蜡笔没有小新

前後端不分離的原因是不願意捨棄後端框架帶來的各種便利,例如路由,模板,佈局等等。
這樣使用vue,就只能捨棄.vue單獨文件。
要使用vue.js及各種元件庫,如emement ui,可以這樣!
一,可以像引入jquery那樣引入vue.js。
二,整體導入element.js及全域的css,並在vue中引用。
三,配合後端的範本佈局功能,在局部的範本檔案中書寫等元件。
這樣用就不再是單一頁面的應用了,因為後台在路由頁面時,會自動呼叫基礎的總體佈局模板,這樣就會自動重新初始化一個新的vue物件。
不過有後台的session,config等功能,共享資料邀約不是問題。
目前正在使用上述方式進行vue+element ui+thinkphp5的測試,雖然失去了單文件應用的諸如按需加載等特性,但同時在別的方便也獲得了益處。

PHPzhong
  1. 不管是前後端完全分離還是前後端混合,都可以使用.vue, 而且很方便, 所以我觉得最佳实践是写成.vue, 包括页面所有其他js, 都由app.js入口统一加载, 再在build的時候編譯. 這樣可以方便以後維護和重構.

  2. 怎麼提交和js渲染沒有任何關係, 你用傳統的方式寫<button type="submit">就可以讓瀏覽器幫你提交表單. 你監聽瀏覽器事件, 就能在js中做各種操作, 比如ajax提交

附:在app.js中加载.vue文件为全局组件, 如Vue.component('post-page', require('./components/PostPage')), 就可以在blade模版中使用<post-page></post-page>,而且Elixir会帮你搞定一切配置, 只需要一行mix.webpack('path/to/app.js')即可

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板