什么是工程化
你以为的前端开发：老三样，需要美化页面：bootstrap!,需要实现网页布局：Layui（然后最后写出个DEMO）
实际的前端开发：模块化+组件化+规范化+自动化（介都是嘛玩意儿啊）
那到底什么是前端工程化呢？前端工程化指的是，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。（说了半天还是不清楚）
什么是VUE
Vue是一款前端渐进式框架，可以提高前端开发效率。Vue通过MVVM模式,能够实现视图与模型的双向绑定。简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
webpack的登场
webpack是前端项目工程化的具体解决方案，它主要提供了友好的前端模块化开发支持以及代码压缩混淆处理（将多行代码压缩到一行，清除全部注释，压缩用以节约空间）、处理浏览器端的JavaScript的兼容性、性能优化等强大的功能。提高开发效率和可维护性（总而言之，就是webpack，行！）
目前，比较主流的前端开发框架如react、Vue都是基于webpack进行工程化开发的
webpack的安装与配置
在终端运行如下命令，安装webpack相关的两个包：
npm install webpack webpack-cli -D
安装完webpack，vue的基本环节就算安装结束了。
Vue实例
在初学Vue，写demo的时候，我们常常会看见以下代码
const app = new Vue({ el:#app, data:{} })
这就是一个最简单的Vue实例，其中el:挂载点，他是用来设置Vue实例挂载的元素（在这里挂载的就是id为app的一个div），Vue会管理el挂载的元素以及其内部的元素。可以使用其他的选择器，但是建议使用ID选择器。data:数据库，Vue中用到的数据都定义在data中，在渲染复杂类型的数据时，遵循js的语法。
Vue指令与事件
vue中提供了以下指令：
V-on
V-on 用于给元素绑定事件，不多bb，直接看demo:
<div id="app">
<input type="button" value="你再点一下试试" @click = "doIt">
<input type="button" value="别点了别点了！" v-on:click = "doIt">
<input type="button" value="再点要破防惹！" @dblclick = "doIt">
<a href="#" v-html = "message" @click = "nt" style="text-decoration:none;"></a>
</div>
<script>
var app =new Vue({
el:"#app",
data:{
message:"我是真的无语"
},
methods:{
doIt:function(){
alert("哭了");
},
nt:function(){
this.message +=" 别戳了QAQ";
}
}
})
</script>`
值得一提的是，指令可以简写为@，平时在写代码的时候，鼓励大家使用这个语法糖。绑定的方法定义在methods属性中，方法内部可以通过this关键字访问在data中的数据。 除此之外，还可以将绑定的方法写成函数调用的形式，并传入自定义参数。 另外还有事件修饰符，例子如下：
<div id="app">
<input type="button" value="点我" @click ="doIt(6666,'ohNo')">
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app =new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("您真是个大可爱")
}
}
})
</script>
更多的事件修饰符见vue官方文cn.vuejs.org/v2/api#v-on 。
v-for
v-for，类似于python中的for，可以实时生成。它一般用作：根据数据生成列表结构（常常和数组结合使用），语法是（item,index）in data item是data中的属性，如果data是数组的话,item就是数组中的每个数值，index是item的索引,v-for的使用方法如下：
<div id="app">
<ul>
<li v-for="item in Arr">{{ item }}</li>
<li v-for = "boy in boys">{{boy.name}}</li>
</ul>
</div>
<input type="button" value="add" @click = "add">
<input type="button" value="remove" @click = "remove" >
<ul>
<li v-for = "boy in boys">{{boy.name}}</li>
</ul>
<script>
var app =new Vue({
el:"#app",
data:{
Arr:['北京','天津','成都','上海'],
boys:[
{name:"bovi",age:18},
{name:"jeff",age:19}
]
},
methods:{
add:function(){
this.boys.push({name:"kevin",age:12});
},
remove:function(){
this.boys.shift();
}
}
})
</script>
数组长度的更新会同步到页面上，是响应式的，在上例中，如果点击第一个button，将会在页面中添加一个li，内容为kevin，同理，如果点击第二个button，页面中将会减少一个li。item和index可以结合其他指令一起使用。例如，在上例中我们获得的每个boy都是一个对象，可以通过boy.age获取拿到的boy中的age属性的值。
v-if
v-if：根据值的真假切换元素的显示与隐藏（直接在dom树中移除、添加）指令后的内容，最终都将解析为boolean，值为true的元素显示，值为false的元素隐藏
<div id="app">
<p v-if = "true">我就是个P</p>
<span v-if = "isShow">我是咋办</span>
<p v-if = "isShow">我就是个P</p>
<span v-if = "isShow">我是span</span>
<input type="button" value="改变可见度" @dblclick ="changeIsShow">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
和v-if相对应的就是v-show
v-show
v-show:根据值的真假，切换元素的显示与隐藏（仅仅改变对象的display）指令后的内容，最终都将解析为boolean，值为true的元素显示，值为false的元素隐藏，数据发生改变后，对应元素的显示状态将会同步更新。
<div id="app">
<button value="点击切换" @click = "changeIsShow"></button>
<img src="素材/005.jpeg" alt="" v-show="true">
<img src="素材/005.jpeg" alt="" v-show="isShow">
<img src="素材/005.jpeg" alt="" v-show="age>18">
</div>
<script>
var app =new Vue({
el:"#app",
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
如果经常切换，建议使用v-show（避免多次修改dom树），反之使用v-if（速度更快）。
v-model
v-model:与数据绑定，实时进行修改（双方同时）。即： 绑定的数据<-->表单元素值
<input type="text" v-model="message" @keyup.enter="getMessage">
<h2>{{ message }}</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "我是谁？",
},
methods:{
getMessage:function(){
alert(this.message);
}
}
})
v-model指令的作用是便于设置、获取表单元素的值
