引入
前端在laravel中的工作流程：
- 安装laravel
- 安装Node依赖
执行 npm install 命令，会生成 node_modules项目目录 - 配置webpack.mix.js （前端所有资源编译的入口）
- 编译前端资源
执行node_modules/.bin/webpack
或使用package.json的脚本：npm run dev/production
概念认识
- npm 和 nodejs
npm 是跟nodejs一起安装的包管理工具，package.json为npm包管理文件
npm install express ,express(一种web框架模块)就放在了工程目录node_modules目录中。使用时只需引用即可 var express = require('express'); -
webpack
打包工具，在require引入之后将不同的模块打包成单个js文件 - laravel-mix
webpack功能很强大，但学习成本比较高，larave-mix 是位于webpack顶层的一个简洁的配置层
使操作变的简单。所有大部分时间都在会在改webpack.mix.js文件 - VUE
一套用于构建用户界面的渐进式框架,只关注视图层，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据 - DOM
HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准 -
浏览器渲染页面的过程
用户端浏览器输入网址->DNS解析到服务器地址->浏览器向服务器发送http请求->经过tcp/ip三次握手之后，服务器
将页面代码发送给浏览器->浏览器收到代码后进行解析：1.DOM构造（html解析器构建DOM树，css解析器解析css代码，将规则放到对应的DOM树节点上，得到带有样式的DOM树） 2 布局 3 绘制页面
VUE 使用
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
- Hello World
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
- Vue 实例
el属性指定哪些 html 元素可以使用Vue API。
'#root'表示带有id="root"的 html 元素将可以使用Vue API。
其他常用的属性包括：
data指定 Vue 实例所拥有的变量。
methods指定 Vue 实例所拥有的函数。
computed指定 Vue 实例所拥有的计算属性（拥有固定的计算公式但值会发生变化的变量）
components组件
template组件包含的模板 - Vue实例在html 元素中常用的命令
v-for可以进行数据的遍历，生成相同的 html 元素。
v-model将 html 表单上的数据和 Vue 实例的数据进行双向绑定，两者只要其中一个发生变化，另一个也会随之变化。
v-if检查给定的逻辑值，为真就渲染当前元素，否则不渲染。
v-show检查给定的逻辑值，为真就显示当前元素，否则隐藏。
v-on绑定事件监听器。发生指定事件便执行给定的函数。
v-bind动态绑定属性。
