当前位置: 首页 > 知识库问答 >
问题:

Vuejs js 用于多个页面,而不是单个页面应用程序

子车成和
2023-03-14

我需要使用 laravel 5.3 和 vuejs 2 构建一个应用程序,因为我需要使用双向绑定而不是使用 jquery。

我需要用刀片模板设置视图。然后,我需要在每个页面中使用vuejs,如下所述。

资源/断言/js/组件/List.vue

<script>
    const panel = new Vue({
        el: '#list-panel',
        name: 'list',
        data: {               
           message: 'Test message'
        },
        methods: {
            setMessage: function(){
                this.message = 'New message';
            }
        }
   })
</script>

resources/asserts/views/post/index.blade.php

<div id="panel" class="panel panel-default">
    <div class="panel-heading">Posts</div>

    <div class="panel-body">
       <p>{{ message }}</p>
       <button v-on:click="setMessage">SET</button>
    </div>
</div>

有Add。vue创建.blade。php等…在Add。vueel:“#添加面板”

这是我的app.js。我已经注释了如下默认代码。

Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));

// const app = new Vue({
//     el: '#app'
// });

我几乎没有检查过大多数文档和教程。但它们使用一个js文件。他们将组件用于带有模板的小元素,而不仅仅是js。

这样使用vuejs可能吗?我需要使用app.js吗,最好的方法是什么?

共有2个答案

长孙哲
2023-03-14
  1. 在单独的JS文件中为每个页面创建“应用程序”。好的做法是使用与页面名称相同的名称,以清楚它属于哪里
  2. 将主div命名为与文件(fileName.php assets/js/fileName.js)相同的名称
  3. 使用#fileName'作为el`
  4. 在刀片中,使用@{{vue表达式}}让刀片跳过这一点,并允许VueJS处理这一点

成交。祝你好运!

吴开宇
2023-03-14

如果您想在刀片文件中添加一些vuejs,您基本上有两个选择:

声明全局Vue组件

例子

// in laravel built in app.js file

Vue.component('foo', require('./components/Foo.vue'));
Vue.component('bar', require('./components/Bar.vue'));

const app = new Vue({
    el: '#app'
});

创建一个主布局文件,其中根 div 的 ID 为 #app

// layout.blade.php

<html>
  <header></header>
  <body>
    <div id="app">
      @yield('content')
    </div>
  </body>
</html>

最后在您的观点中:

//some-view.blade.php

@extends('layout')

@section('content')
 <foo :prop="{{ $someVarFromController }}"></foo>
@endsection

这是我目前正在使用的,实际上给了我更大的灵活性

// in laravel built in app.js file

const app = new Vue({
    el: '#app',
    components: {
      Foo: require('./components/Foo.vue'),
      Bar: require('./components/Bar.vue')
    }
});

在布局文件中,您将使用 vuejs 动态组件

<html>
  <header></header>
  <body>
    <div id="app">
      @if (isset($component))
        <component :is={{ $component }} inline-template>
      @endif

         @yield('content')

     @if (isset($component))
       </component>
     @endif
    </div>
  </body>
</html>

在您看来:

//some-view.blade.php

@extends('layout', ['component' => 'foo'])

@section('content')
   // all the vue stuff available in blade
   // don't forget to use the @ symbol every time you don't want blade to parse the expression.
  // Example: @{{ some.vue.propertie }}
@endsection

最后,您可以像往常一样创建vue组件

// resources/assets/js/components/foo.vue

<script>
export default {
 // the component
}
</script>
 类似资料:
  • 我有一个测试自动化工具,现在我们正在为我们的网络应用程序的自动化测试实现页面对象模型,根据我的理解,如果你只有一个应用程序要测试,页面对象模型是好的,但是我们有多个网络应用程序要测试测试。我只是想知道是否真的有可能为多个Web应用程序创建页面对象模型,并且该工具应该能够通过使用页面对象进行自动化测试??

  • 正如标题所说,多html页面和多jquery-mobile页面哪个更好? 强调: 我所说的多个html页面是指一个以index.html开始的应用程序,当你用你的应用程序导航时,它会将可见页面(通过href)更改为其他html页面,例如another.html,anotherone.html,anothertwo.html等等。 我所说的多个jquery移动页面就是这样一个。 此外,我的意思是更好

  • 使用MediaQuery类及其数据属性,我想为整个应用程序设置textScaleFactor,但是我不能在MaterialApp之前获得上下文。

  • 这是否意味着只有一个单一的脚手架下的材料应用程序或一个单亲脚手架为每个页面。如果是第一次,我们怎么导航?如果它更晚,这不是意味着在每次导航中重新呈现公共的和吗?最好的做法是什么。

  • 我是Javascript的初学者。我目前正在使用它开发Phonegap应用程序。我被夹在中间,因为我有4个html页面用于注册过程,我必须将所有html页面输入值传递到单个js文件,因为最终所有数据都必须发布到服务器URL,而且我在许多网站上读到,他们建议对你网站的所有页面使用相同的js文件来加快网站速度。所以我有两个问题要解决。我搜索了很多网站,但没有找到准确的答案。 > 我需要将4个html页

  • 我想使用页面而不是使用页面。但是当使用html页面时,我得到了错误。但是如果我使用jsp页面,我没有得到任何错误。 当我使用