search

Home  >  Q&A  >  body text

When using the UI (element-UI) component of vuejs in laravel, should it be copied directly to the page or made into a .vue file?

Use element-UI in laravel 5.3 instead of developing with front-end and back-end separation.
First configure according to this article http://codesky.me/archives/tr...
demo It has been displayed normally, that is, welcome.blade.php is as follows: 

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

Question:
1. The idea is still a bit confusing. I don’t know how to use the element-UI component. For example, use the following switch http://element.eleme.io/#/zh -...
Where should the component code be placed? Should it be made into a .vue file or written directly at the required location on the 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. Can this js-rendered form element be submitted in the traditional way? Or can it only be submitted using ajax?

PHPzPHPz2774 days ago829

reply all(3)I'll reply

  • 怪我咯

    怪我咯2017-05-16 16:51:06

    If the front-end and back-end are not separated, you don’t need to compile the .vue file with vue-loader, or the browser won’t recognize it

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-16 16:51:06

    The reason why the front-end and back-end are not separated is that we are unwilling to give up the various conveniences brought by the back-end framework, such as routing, templates, layout, etc.
    If you use vue in this way, you can only discard the .vue separate file.
    To use vue.js and various component libraries, such as emement ui, you can do this!
    First, vue.js can be introduced just like jquery.
    Second, import element.js and global css as a whole, and reference them in vue.
    Third, cooperate with the back-end template layout function to write components such as <el-button> in local template files.
    In this way, it is no longer a single-page application, because the background will automatically call the basic overall layout template when routing the page, which will automatically re-initialize a new vue object.
    But with backend session, config and other functions, sharing data and claiming credit is not a problem.
    We are currently using the above method to test vue+element ui+thinkphp5. Although we have lost the features of single-file applications such as on-demand loading, we have also gained benefits in other conveniences.

    reply
    0
  • PHPz

    PHPz2017-05-16 16:51:06

    1. Whether the front and back ends are completely separated or the front and back ends are mixed, you can use .vue, 而且很方便, 所以我觉得最佳实践是写成.vue, 包括页面所有其他js, 都由app.js入口统一加载, 再在build to compile. This will facilitate future maintenance and reconstruction.

    2. How to submit has nothing to do with js rendering. You can let the browser submit the form for you by writing it in the traditional way. By listening to browser events, you can do various operations in js, such as ajax submission<button type="submit">

    Attachment: Just

    reply
    0
  • Cancelreply