laravel引入vue [我是大白，我是猿]

1、引入Vue.js
开始学习使用 Vue.js 之前先要将其引入我们的 Laravel 项目，这里我选择最简单的方式，直接下载对应的开放版本JS文件（http://vuejs.org/js/vue.js），然后将下载的vue.js文件放置到public目录下的js目录中（如果没有js目录则创建之）。

接下来就可以开启Vue.js学习之旅了。

2、Hello World
和任何其他语言/框架学习一样，让我们从打印Hello World开始，与此同时我们将学习Vue的功能特性之一：数据绑定。

我们以Laravel提供的视图文件welcome.blade.php作为演示文件，开始之前，先在之前引入vue.js：

然后我们编辑welcome.blade.php文件内容如下：

@{{ message }}

同时编写js部分代码：

这样整个代码看上去应该是这样：

vue.js data binding

在浏览器中访问项目首页，显示如下：
vue.js hello world

3、双向绑定
此外，Vue.js还支持双向数据绑定，我们编辑HTML部分代码如下：

@{{ message }}

这样，保存文件后，刷新浏览器页面，会在Hello Laravel!下面显示出input输入框，并且输入框内容也是Hello Laravel!： vue.js two-way binding

4、渲染列表
数组数据循环渲染列表可以这么做：

HTML代码：

• @{{ todo.text }}

JS代码：

刷新页面数据显示如下：

Vue.js render list

5、处理用户点击
我们来简单看一个用户点击按钮事件。

HTML代码：

@{{ message }}

反转消息 JS代码：

注：split()用于将字符串转化为数组，reverse()用于颠倒数组中元素顺序，join()用于将数组转化为字符串。

刷新浏览器页面，页面显示如下：

vue.js reverse message

点击“反转消息”按钮，页面显示如下：

vue.js reverse message

6、综合示例
好了，接下来我们通过一个例子来总结下本章节所有知识点。我们通过在输入框输入字符串，然后通过回车将输入的字符串添加到展示列表。

HTML代码：

刷新页面，页面显示如下：

vue.js user input

点击“新增todos”右侧的“X”删除该条目，然后在输入框输入字符串回车，新增的字符串会显示在列表中：

vue.js user input

生活步步是坎坷，笑到最后是大哥。

标签：laravel,vue,大白,js,Vue,message,代码,页面
来源： https://blog.csdn.net/weixin_46202089/article/details/110038309