您的位置：首页 > 编程语言 > PHP开发

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

2017-12-18 11:27 796 查看

纯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
相关文章推荐
新的分享
章节导航