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

来源：互联网发布：linux查看oracle版本编辑：程序博客网时间：2024/06/02 02:40

纯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的语法处理方式的不同。

阅读全文

0 0