Vue:是一套构建【用户界面】的渐进式前端框架，只关注视图层，很方面与其他库或已有的项目整合。通过API来实现【响应数据的绑定】和【组合的视图组件】
视图：负责页面的渲染，主要由HTML+CSS构成
脚本：负责业务数据模型以及数据的处理逻辑
Vue核心对象：每一个Vue程序都是从一个Vue核心对象开始的
let vm = new Vue({
选项列表；
});
选项列表：
el:用于接收获取到页面的【元素】，根据常用的选择器获取
data:用于保存当前的Vue对象的数据。在视图中声明的变量需要再此处赋值
methods:定义方法。方法可以直接通过对象名调用，this代表当前Vue对象
数据绑定：{{变量名}}，在data里面给数据赋值
<body><!--视图--><div id="div"> <div>姓名：{{name}}</div> <div>班级：{{classRoom}}</div> <button onclick="hi()">打招呼</button> <button onclick="update()">修改班级</button></div></body><script src="js/vue.js"></script><script> //脚本 let vm = new Vue({ el:"#div", data:{ name:"张三", classRoom:"硕计2班" }, methods:{ study(){ alert(this.name+"正在"+this.classRoom+"学习"); }, } }); //定义打招呼的方法 function hi(){ vm.study(); } //定义修改班级的方法 function update(){ vm.classRoom = "计161"; }</script>Vue的常用指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> [v-cloak] { display: none; } </style></head><body><div id="app1"> <!-- v-text --> <span v-text="msg"></span><br> <span>{{msg}}</span> <!--v-html，就是innerHTML--> <div v-html="htmltag"></div> <!--v-show：根据表达式之真假值，切换元素的 display CSS 属性。--> <div v-show="isShow">我是可以看见的div，使用v-show</div> <!--条件判断--> <div v-if="Math.random()>0.5"> 大于0.5 </div> <div v-else> 小于0.5 </div> <!--for循环--> 循环数组： <ul> <li v-for="item in arr">{{item}}</li> </ul> 循环数组： <ul> <li v-for="(item,index) in arr">{{index}}:{{item}}</li> </ul> 循环对象： <ul> <li v-for="(val,key) in obj">{{key}}:{{val}}</li> </ul> 循环对象： <ul> <li v-for="(val,key,index) in obj">{{index}}:{{key}}:{{val}}</li> </ul> 循环字符串： <ul> <li v-for="(val,index) in str">{{index}}:{{val}}</li> </ul> 循环数字： <ul> <li v-for="(val,index) in num">{{index}}:{{val}}</li> </ul> <!--v-on：绑定事件监听器。事件类型由参数指定。--> <input type="button" value="测试" v-on:click="func()" /> <!--v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。--> <img v-bind:src="imgsrc" v-bind:style="imgcss" /> <br> <!--v-model：在表单控件或者组件上创建双向绑定--> <input type="text" v-model="inputtxt" /> <span>您在文本框中输入的内容是：{{inputtxt}}</span> <!--v-pre：【跳过】这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译--> <span v-pre>{{ msg }}</span> <div v-cloak> {{ msg }} </div> <span v-once>This will never change: {{msg}}</span></div></body><script src="js/vue.js"></script><script> /*v-text：功能和{{msg}}相似，更新元素的文本内容。如果要更新部分文本内容，需要使用 {{ msg }} 插值。v-html：更新元素的 innerHTMLv-show：根据表达式之真假值，切换元素的 display CSS 属性。v-if：根据表达式的值的真假条件渲染元素v-else：表示否则v-else-if：v-for：可以循环数组，对象，字符串，数字，v-on：绑定事件监听器。事件类型由参数指定。v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。v-model：在表单控件或者组件上创建双向绑定v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。*/ let v1 = new Vue({ el:"#app1", data:{ msg:"hello vue", htmltag:"<p style='background-color:red'>我是一个红色的段落</p>", isShow:true, arr:[12,23,34], obj:{ name:"张三", age:12, sex:"男" }, str:"hello", num:15, imgsrc:"img/3.jpg", imgcss:{"width":"120px","height":"80px"}, inputtxt:"" }, methods:{ func:function(){ alert('点击了按钮'); } } });</script></html>Element:【网站快速成型】工具，是饿了么公司前端开发团队提供的一套【基于Vue的网站组件库】。使用Element必须要有Vue，组件：组成网页的部件，例如超链接，按钮，图片…
官网：https://element.eleme.cn/#/zh-CN
引入三个文件，复制对应网站的代码，还有要创建vue核心对象<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script>模板：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <!--引入三个文件--> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <!--可以有CSS样式控制--></head><body><div id="div"> <!--此处是网页布局复制的内容--> </div></body><script> /*有些需要复制规则数据啥的*/ new Vue({ el:"#div" })</script></html>快速入门
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script></head><body><button>我是按钮</button><br><!--下面是复制的内容--><div id="div"> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <br> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> <br> <el-row> <el-button round>圆角按钮</el-button> <el-button type="primary" round>主要按钮</el-button> <el-button type="success" round>成功按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>警告按钮</el-button> <el-button type="danger" round>危险按钮</el-button> </el-row> <br> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row></div></body><script> new Vue({ el:"#div" })</script></html>布局方式
基础布局：将页面分成最多24个部分，自由切分。每行分成多少列
第一个span=24，那么就是整个一行，也就是一列，第二个是两个span=12，将一行分为两列，三个span=8.....以此类推<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row>容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <style> .el-header,.el-footer{ background-color: #d18e66; color: #333; text-align: center; height: 100px; } .el-aside{ background-color: #55e658; color: #333; text-align: center; height: 580px; } .el-main{ background-color: #5fb1f3; color: #333; text-align: center; height: 520px; } </style></head><body><div id="div"> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container></div></body><script> new Vue({ el:"#div" });</script></html>表单组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script></head><body><div id="div"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即时配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form></div></body><script> new Vue({ el:"#div", data() { return { ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ], date2: [ { type: 'date', required: true, message: '请选择时间', trigger: 'change' } ], type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ], resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ], desc: [ { required: true, message: '请填写活动形式', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } });</script></html>表格组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script></head><body><div id="div"> <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template></div></body><script> new Vue({ el:"#div", data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } })</script></html>顶部导航栏组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>顶部导航栏</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script></head><body><div id="div"> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu></div></body><script> new Vue({ el:"#div", data() { return { activeIndex: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } })</script></html>侧边导航栏组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script></head><body><div id="div"> <el-col :span="6"> <h5>自定义颜色</h5> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-col></div></body><script> new Vue({ el:"#div", methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } })</script></html>综合案例：学生列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <style> .el-header { background-color: #545c64; } </style></head><body><div id="div"> <!--头部--> <el-container> <el-header class="el-header"> <el-container> <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="white" active-text-color="#ffd04b" style="margin-left: auto;"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item> </el-menu> </el-container> </el-header> <!--侧边栏--> <el-container style="height: 730px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-menu"></i>学工部</template> <el-menu-item-group> <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item> <el-menu-item index="1-2"><i class="el-icon-help"></i>学生的升级/留级</el-menu-item> <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>咨询部</template> <el-menu-item-group> <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item> <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item> <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-menu"></i>教研部</template> <el-menu-item-group> <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item> <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item> <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <!--主区域--> <el-container> <el-main> <b style="color: red;font-size: 20px;">学生列表</b> <div style="float:right"> <el-button type="primary">添加学生</el-button> </div> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作" width="180"> <el-button type="warning">编辑</el-button> <el-button type="danger">删除</el-button> </el-table-column> </el-table> </el-table> </el-main> </el-container> </el-container> </el-container></div></body><script> new Vue({ el: "#div", data: { tableData: [ { date: "2021-1-1", name: "张三", address: "合肥市肥东县" }, { date: "2021-1-2", name: "李四", address: "合肥市肥东县" }, { date: "2021-1-3", name: "王五", address: "合肥市肥东县" } ] } });</script></html>Vue高级使用
自定义组件：
定义格式：
Vue.component(组件名称，{
props:组件的属性,
data:组件的数据函数,
template:组件解析的标签模板
})
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script></head><body><div id="div"> <my-button>自定义按钮</my-button></div></body><script> Vue.component("my-button", { //属性 props: ["style"], //数据函数 data: function () { return { msg: "自定义按钮" } }, //解析标签模板 template: "<button style='color:red'>{{msg}}</button>" }); new Vue({ el: "#div" });</script></html>Vue异步操作：在Vue发送异步请求，本质上还是AJAX。可以使用axios这个插件简化操作
使用步骤：引入axios核心js文件，调用axios对象的方法发起异步请求和处理响应数据
常用方法：
get(请求的资源路径和请求的参数)：发起GET 请求
post(请求的资源路径，请求的参数)：发起POST 请求
then(response):请求成功后的回调函数，通过response获取响应的数据
catch（error）：请求失败后的回调函数，通过error获取错误信息
servlet：
package com.lcl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/testServlet")public class TestServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); resp.setContentType("text/html;charset=UTF-8"); String name = req.getParameter("name"); System.out.println(name); resp.getWriter().write("请求成功"); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); }}测试页面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script></head><body><div id="div"> {{name}} <button @click="send()">发送请求</button></div></body><script> new Vue({ el: "#div", data: { name: "张三" }, methods: { send() { //GET方式 /* axios.get("testServlet?name=" + this.name) .then(resp => { alert(resp.data); }) .catch(error => { alert(error); })*/ //POST方式 axios.post("testServlet","name="+this.name) .then(resp => { alert(resp.data); }) .catch(error => { alert(error); }) } } });</script></html>vue02没完成，登陆页面样式卡住了