一、Vue框架
vue：是一款前端框架，免除原生JavaScript中的DOM操作（如document.getElementById("文本输入框名").value），简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
MVVM思想：vue提供ViewModel（VM）实现视图（V）和模型（M）间的双向绑定。
MVC思想：只能实现模型到视图的单向展示。将模型里的数据取出来存放到视图中。但并不能实现模型与视图间的绑定（模型的数据发生变化视图也自动发生变化）。
1.1. Vue快速入门
第1步：新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
第2步：在JS代码区域，创建Vue核心对象，进行数据绑定
用new方式建议一个Vue对象，里面是javascript对象，el是element代表哪个代码区域用vue来控制，写入一个对应的选择器：
例如这里el的值“app”对应的是下面视图里的id属性值，代表<div>标签所包裹的所有内容都由Vue来控制。
data里返回一个数据，在这里是username是空。
new Vue({
el:"#app",
data(){
return{
username:""
}
}
})第3步：编写视图
id里的值要和vue中el里的值对应，代表将被控制的区域。
v-model里的值要和上面data数据返回的属性名一致。
{{username}}
<div id="app">
<input name="username" v-model="username">
{{username}}
</div>下面是完整代码：
<body>
<div id="app">
<input v-model="username">
{{username}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
username:""
}
}
});
</script>
</body>1.2. Vue常用指令
1. v-bind可以绑定属性值，包括链接等：
href后面的值url对应的是返回值中的url属性名，表示将视图与模型中url的内容绑定，会出现一个点击一下可跳转的链接，点击即可进入百度首页。
<div id="app">
<a v-bind:href="url">点击一下</a>
<a :href="url">点击一下</a>
</div>
2. v-model可以将用户输入的值绑定到某个模型上。
3. v-on为HTML标签绑定事件
注意下面2种书写方式：
<div id="app">
<input type="button" value="点击按钮" v-on:click="show()"/>
<input type="button" value="点击按钮" @click="show()"/>
</div>
4. v-if 、v-else-if 、 v-else 用于判断：
<div id="app">
<div v-if="count == 3">div1</div>
<div v-else-if="count ==4">div2</div>
<div v-else>div3</div>
<br> <input v-model="count">
</div>注意这个变量要写在return里面，在方框里输入不同的数字可以实时返回不同结果，很神奇：
5. v-for用于循环遍历
addr是一个临时变量，addrs是模型里的数据，是一个数组，{{addr}}是输出数据：
注意要将<div v-for="addr in addrs"> </div>看作一个整体，循环几次，整个标签就重复出现几次！
<div id="app">
<div v-for="addr in addrs">
{{addr}} <br>
</div>
</div>
可以加个角标i，i默认从0开始
<div id="app">
<div v-for="(addr,i) in addrs">
{{i}}--{{addr}} <br>
</div>
</div>1.3. Vue生命周期
生命周期八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）：
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
1.4. 案例
1. 查询所有
SelectAllServlet代码见ajax，注意需要在pojo目录下添加Brand类，代码如下：
public String getStatusStr(){
if(this.status == 1){
return "启用";
}
return "禁用";
}brand.html代码如下书写：
<body>
<div id="app">
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<table id="brandTable" border="1" cellspacing="0" width="100%">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(brand,i) in brands" align="center">
<td>{{i+1}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.ordered}}</td>
<td>{{brand.description}}</td>
<td>{{brand.statusStr}}</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
</table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app", //设置Vue作用范围就是div标签包裹的部分
data() {
return {
brands: []
}
},
mounted() { //页面加载完成后，发送异步请求查询数据
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-demo/selectAllServlet"
}).then(function (resp) {
_this.brands = resp.data;
})
}
})
</script>
</body>2. 添加
SelectAllServlet和addServlet代码见ajax，addBrand.html代码如下：
<body>
<div id="app">
<h3>添加品牌</h3>
<form action="" method="post">
品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
描述信息：<textarea rows="5" v-model="brand.description" cols="20" id="description" name="description"></textarea><br>
状态：
<input type="radio" v-model="brand.status" name="status" value="0">禁用
<input type="radio" v-model="brand.status" name="status" value="1">启用<br>
<input type="button" id="btn" @click="submitForm" value="提交">
</form>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
brand:{}
}
},
methods:{
submitForm(){
//2.发送ajax请求
var _this = this;
axios({
method: "post",
url:"http://localhost:8080/brand-demo/addServlet",
data:_this.brand
}).then(function(resp){
//判断响应数据是否为success
if(resp.data =="success"){
location.href="http://localhost:8080/brand-demo/brand.html";
}
})
}
}
})
</script>
</body>二、Element组件库
2.1. Element快速入门
Element：是一套组件库库，由饿了么前端开发团队提供，用于快速构建网页。
组件：组成网页的部件，例如：超链接、按钮、图片、表格等等~
第1步：要导入element-ui，同时还要引入Element的css、js文件和Vue.js，如果没导入会不显示千万小心！
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">第2步：创建Vue核心对象
<script>
new Vue({
el:"#app"
})
</script>第3步：官网复制Element组件代码，代码写入：
<div id="app">
代码书写区域
</div>2.2 Element布局
1. Layout布局：通过基础的24分栏，迅速简便地创建布局
规定布局的宽度为24，每一行可以设置多个组件，分别占据一定的宽度（总宽要是24）。
<div class="grid-content bg-purple-dark"></div> //暗色模块<div class="grid-content bg-purple"></div> //亮色模块2. Container布局容器：用于布局的容器组件，方便快速搭建页面的基本结构。
<script>
new Vue({
el:"#app",
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
})
</script>布局注意：将css代码中<style>包裹的代码放在<head>标签内，将<el-row>的代码放在<div id="app">中，data的数据粘贴到el:"#app"下面，一定要粘贴到Vue里面！
2.3 Element组件
1. 表格
<el-table-column prop="address" label="地址"></el-table-column>data()的return里面的参数名称要和el标签里面prop的值一样，也就是将data里面的内容展示在el标签里面。
Table Attributes是Table整体的属性。Table Events是表的事件。Table Methods是表的方法。Table-column Attributes是设置Table列的属性。
align用于调整居中，修改方式：属性="设置参数"
表格间的间隔过大或者过小是因为加了width，只需要让其自适应即可。
按钮可以通过size属性来更改大小。
点击复选框如何获取行的数据呢？答：复选框要绑定事件。
加入下面3个当选中复选框会获取信息：
加入console.log是给控制台发消息需要f12打开查看：
2. 表单
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
3. 对话框
当前按钮点击@click会有dialogVisible属性被设置为true，用于控制对话框是否展示，当设置为true对话框展示
想取消的话只需要设置点击事件让diaogVisible为false即可：
<el-button @click="dialogVisible = false">取消</el-button>可以让多个前端视图使用同一个数据模型，因此数据模型对单个前端视图来说属性可以是冗余的。
4. 分页工具条
total是总共有多少条信息；page-size取得是page-sizes里的值，是动态变化的；page-sizes是下拉框里的，自己定义的每页可以显示的数据条数。current-change是页码的变化，size-change是信息量的变化。
![Go语言的[GPM模型]](https://img-blog.csdnimg.cn/b7d1129d299347639d7d87dae307fe85.png)
