简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Lors de l'utilisation du composant UI (element-UI) de vuejs dans laravel, doit-il être copié directement sur la page ou transformé en un fichier .vue ?
PHPz
PHPz 2017-05-16 16:49:06
0
3
801

Utilisez element-UI dans Laravel 5.3 au lieu de développer avec séparation front-end et back-end
Configurez-le d'abord selon cet article http://codesky.me/archives/tr...
La démo s'est affichée normalement. , c'est-à-dire que bienvenue .blade.php ressemble à ceci : 

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

Questions :
1. L'idée est encore un peu déroutante. Je ne sais pas comment utiliser le composant element-UI. Par exemple, utilisez le commutateur suivant http://element.eleme.io/#/zh. -...
Le code du composant doit être Où le mettre ? Doit-il être transformé en fichier .vue ou écrit directement à l'emplacement requis sur la page ? 

<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. Cet élément de formulaire rendu en js peut-il être soumis de manière traditionnelle ? Ou peut-il être soumis uniquement en utilisant ajax ?

PHPz
PHPz

学习是最好的投资！

répondre à tous(3)
刘奇
刘奇2017-05-16 16:51:06 3 plancher

Si le front-end et le back-end ne sont pas séparés, vous n'avez pas besoin de compiler le fichier .vue avec vue-loader, sinon le navigateur ne le reconnaîtra pas

Comme +0
Ajouter une réponse
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-16 16:51:06 2 plancher

La raison pour laquelle le front-end et le back-end ne sont pas séparés est que nous ne sommes pas disposés à renoncer aux diverses commodités apportées par le framework back-end, telles que le routage, les modèles, la mise en page, etc.
Si vous utilisez vue de cette manière, vous ne pouvez supprimer que le fichier séparé .vue.
Pour utiliser vue.js et diverses bibliothèques de composants, telles que emement ui, vous pouvez le faire !
Tout d'abord, vue.js peut être introduit tout comme jquery.
Deuxièmement, importez element.js et global css dans leur ensemble et référencez-les dans vue.
Troisièmement, utilisez la fonction de mise en page du modèle back-end pour écrire des composants tels que <el-button>
De cette façon, il ne s'agit plus d'une application monopage, car l'arrière-plan appellera automatiquement le modèle de mise en page globale de base lors du routage de la page, ce qui réinitialisera automatiquement un nouvel objet vue.
Mais avec la session backend, la configuration et d'autres fonctions, partager des données et réclamer du crédit n'est pas un problème.
Nous utilisons actuellement la méthode ci-dessus pour tester vue+element ui+thinkphp5 Bien que nous ayons perdu les fonctionnalités des applications à fichier unique telles que le chargement à la demande, nous avons également bénéficié d'autres avantages.

Comme +0
Ajouter une réponse
PHPzhong
PHPzhong2017-05-16 16:51:06 1 plancher

  1. Que le front-end et le back-end soient complètement séparés ou que le front-end et le back-end soient mélangés, vous pouvez utiliser .vue, et c'est très pratique, donc je pense que le meilleur la pratique est d'écrire .vue, y compris la page. Tous les autres js sont uniformément chargés par l'entrée app.js, puis compilés pendant la build. Cela peut faciliter l'entretien et la reconstruction futurs..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')

🎜Comment soumettre n'a rien à voir avec le rendu js. Vous pouvez écrire <button type="submit"> de la manière traditionnelle et laisser le navigateur soumettre le formulaire pour vous. événements du navigateur, vous pouvez effectuer diverses opérations dans js, telles que la soumission ajax🎜 🎜Pièce jointe : chargez le fichier .vue dans app.js en tant que composant global, tel que Vue.component('post-page', require('. /components /PostPage')), vous pouvez utiliser <post-page></post-page> dans le modèle blade et Elixir vous aidera à obtenir toutes les configurations, une seule ligne mix.webpack('path/to/app.js') suffit🎜
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！