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

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

高精度计算机视觉

4248人浏览 · 2017-12-18 11:27:30

高精度计算机视觉 · 2017-12-18 11:27:30 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^