纯laravel和vuejs：第一个最简单的示例

如果你到网上搜索laravel+vuejs，大部分情况下你会得到一堆如何用nodejs，webpack, babel, gulp, browsify搭配使用的文章。哪怕是一个最简单的应用，也是如此。事实上，取决于你的开发复杂程度，还有调试和维护人员的水平，很多情况下，webpack等这种急剧增加的复杂程度都不是必须的。如同开发一些不太复杂的网站，你也可以不用vuejs，jquery等工具。

这里记录学习的laravel+vuejs最基本的要点，不涉及到任何webpack等打包软件。只是纯粹的laravel和vuejs的组合。后续的学习中也同样如此。

在laravel装好以后，直接用下面的代码替换掉那个/resources/views/welcome.blade.php之中的内容，就可以显示Hello Vuejs!,如下

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Styles -->
    <script src="https://unpkg.com/vue"></script>
    <style>

    </style>
</head>
<body>
    <div id="app">
        @{{message}}
    </div>


    <script type="text/javascript">
    var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vuejs!'
        }
    })
    </script>
</body>
</html>

这里要特别注意的是，不用laravel的时候，下面这段代码中

<div id="app">
        @{{message}}
</div>

那个小老鼠@符号不是必须的。但在laravel的blade模板中，必须引入该符号。如果不引入该符号，laravel会按照blade的语法寻找message这个变量，结果肯定是找不到的，会报错。加上@之后，vuejs就会处理该变量。

走完这第一步，接下来都是同样的原理。在vuejs官方文档里面的例子，都可以在laravel中尝试。只是要注意laravel的blade语法和vuejs的语法处理方式的不同。

laravel和vuejs第一个最简单的示例hello Vuejs

纯laravel和vuejs：第一个最简单的示例

猜你喜欢