简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Sollte die UI-Komponente (Element-UI) von vuejs in Laravel direkt auf die Seite kopiert oder in eine .vue-Datei umgewandelt werden?
PHPz
PHPz 2017-05-16 16:49:06
0
3
802

Verwenden Sie die Element-UI in Laravel 5.3, anstatt mit Front-End- und Back-End-Trennung zu entwickeln.
Konfigurieren Sie es zunächst gemäß diesem Artikel http://codesky.me/archives/tr...
Die Demo wurde normal angezeigt , das heißt, willkommen .blade.php sieht so aus: 

<!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>

Fragen:
1. Die Idee ist immer noch etwas verwirrend. Ich weiß beispielsweise nicht, wie man den folgenden Schalter verwendet: http://element.eleme.io/#/zh -...
Der Komponentencode sollte sein: Wo soll er abgelegt werden? Sollte es in eine .vue-Datei umgewandelt oder direkt an die gewünschte Stelle auf der Seite geschrieben werden? 

<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. Kann dieses js-gerenderte Formularelement auf herkömmliche Weise übermittelt werden? Oder kann es nur mit Ajax übermittelt werden?

PHPz
PHPz

学习是最好的投资！

Antworte allen(3)
刘奇
刘奇2017-05-16 16:51:06 3 Etage

前后端不分离的话.vue文件你不用vue-loader之类的编译，浏览器不认识吧

Wie +0
Antwort hinzufügen
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-16 16:51:06 2 Etage

前后端不分离的原因是不愿意舍弃后端框架带来的各种便利，比如路由，模板，布局等等。
这样使用vue，就只能舍弃.vue单独文件。
要使用vue.js及各种组件库，如emement ui，可以这样！
一，可以像引入jquery那样引入vue.js。
二，整体导入element.js及全局的css，并在vue中引用。
三，配合后端的模板布局功能，在局部的模板文件中书写<el-button>等组件。
这样用就不再是单页面的应用了，因为后台在路由页面时，会自动调用基础的总体布局模板，这样就会自动重新初始化一个新的vue对象。
不过有后台的session，config等功能，共享数据邀功不是问题。
目前正在使用上述方式进行vue+element ui+thinkphp5的测试，虽然失去了单文件应用的诸如按需加载等特性，但同时在别的方便也获得了益处。

Wie +0
Antwort hinzufügen
PHPzhong
PHPzhong2017-05-16 16:51:06 1 Etage

  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')即可

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！