后端眼中的vue及其在laravel 中的使用

引入

前端在laravel中的工作流程：

1. 安装laravel
2. 安装Node依赖
   执行 npm install 命令，会生成 node_modules项目目录
3. 配置webpack.mix.js （前端所有资源编译的入口）
4. 编译前端资源
   执行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 的系统

1. Hello World

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})

2. Vue 实例
   el属性指定哪些 html 元素可以使用Vue API。
   '#root'表示带有id="root"的 html 元素将可以使用Vue API。
   其他常用的属性包括：
   data指定 Vue 实例所拥有的变量。
   methods指定 Vue 实例所拥有的函数。
   computed指定 Vue 实例所拥有的计算属性（拥有固定的计算公式但值会发生变化的变量）
   components组件
   template组件包含的模板
3. Vue实例在html 元素中常用的命令
   v-for可以进行数据的遍历，生成相同的 html 元素。
   v-model将 html 表单上的数据和 Vue 实例的数据进行双向绑定，两者只要其中一个发生变化，另一个也会随之变化。
   v-if检查给定的逻辑值，为真就渲染当前元素，否则不渲染。
   v-show检查给定的逻辑值，为真就显示当前元素，否则隐藏。
   v-on绑定事件监听器。发生指定事件便执行给定的函数。
   v-bind动态绑定属性。