VUE的使用—JavaWeb
系列文章目录
JavaWeb中VUE的简单使用
文章目录
- 系列文章目录
- 前言
- 一、VUE快速入门
- 二、常用指令和生命周期
- 三、案例
- 总结
前言
参考资料
链接：https://pan.baidu.com/s/1VaHce_t3DeTVGV495tLpKg?pwd=1111
提取码：1111
一、VUE快速入门
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input v-model="username"><!--插值表达式-->{{username}}
</div><script src="js/vue.js"></script>
<script>//1.创建VUE核心对象new Vue({el:"#app",data(){return{username:""}}/*data:function () {return{username:""}}*/})
</script>
</body>
</html>
二、常用指令和生命周期
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><div id="app"><!--v-bind的使用--><a v-bind:href="url">点击一下</a><a :href="url">点击一下</a><input v-model="url"><br /><!--v-on的使用--><input type="button" value="一个按钮" v-on:click="show()" ><br /><input type="button" value="一个按钮" @click="show()" ><br /><!--v-if的使用--><div v-if="count==3">div1</div><div v-else-if="count==4">div2</div><div v-else>div3</div><hr /><!--v-show的使用--><div v-show="count==3">div v-show</div><br /><input v-model="count"><br /><!--v-for的使用--><div v-for="addr in addrs">{{addr}}</div><hr /><div v-for="(addr,i) in addrs">{{i+1}}--{{addr}}</div>
</div><script src="js/vue.js"></script>
<script>//1.创建VUE核心对象new Vue({el:"#app",data(){return{username:"",url:"https://www.baidu.com",count:3,addrs:["北京","上海","深圳"]}},methods:{show(){alert("我被点击了");}}})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input v-model="username"><!--插值表达式-->{{username}}
</div><script src="js/vue.js"></script>
<script>//1.创建VUE核心对象new Vue({el:"#app",data(){return{username:""}},mounted(){alert("加载完成、、、")}})
</script>
</body>
</html>
三、案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><a href="addBrand.html"><input type="button" value="新增"></a><br><hr><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 v-if="brand.status==0">禁用</td><td v-else>启用</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",data() {return {brands: []}},mounted() {//页面加载完成后发送异步请求，查询数据var _this = this;axios({method: "get",url: "http://localhost:8080/brand-demo1/selectAllServlet"}).then(function (resp) {_this.brands = resp.data;})}})/*//1.当页面加载完后，发送Ajax请求window.οnlοad=function () {//2.发送Ajax请求axios({method:"get",url:"http://localhost:8080/brand-demo1/selectAllServlet"}).then(function (resp) {//获取数据let brands = resp.data;let tableData=" <tr>\\n" +" <th>序号</th>\\n" +" <th>品牌名称</th>\\n" +" <th>企业名称</th>\\n" +" <th>排序</th>\\n" +" <th>品牌介绍</th>\\n" +" <th>状态</th>\\n" +" <th>操作</th>\\n" +" </tr>"for (let i=0;i<brands.length;i++){let brand=brands[i];tableData +="<tr align=\\"center\\">\\n" +" <td>"+(i+1)+"</td>\\n" +" <td>"+brand.brandName+"</td>\\n" +" <td>"+brand.companyName+"</td>\\n" +" <td>"+brand.ordered+"</td>\\n" +" <td>"+brand.description+"</td>\\n" +" <td>"+brand.status+"</td>\\n" +"\\n" +" <td><a href=\\"#\\">修改</a> <a href=\\"#\\">删除</a></td>\\n" +" </tr>"}document.getElementById("brandTable").innerHTML=tableData;})}*/
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>添加品牌</title>
</head>
<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" cols="20" id="description" v-model="brand.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/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>new Vue({el:"#app",data() {return{brand:{}}},methods:{submitForm:function(){//发送Ajax请求，添加var _this=this;axios({method:"post",url:"http://localhost:8080/brand-demo1/addServlet",data:_this.brand}).then(function (resp) {//判断响应数据是否为successif (resp.data=="success"){location.href="http://localhost:8080/brand-demo1/brand.html"}})}}})/* //1.给按钮绑定事件document.getElementById("btn").οnclick=function () {//将表单数据转为JSONvar formData={brandName:"",companyName:"",ordered:"",description:"",status:""}//获取表单数据let brandName = document.getElementById("brandName").value;//设置数据formData.brandName=brandName;let companyName = document.getElementById("companyName").value;formData.companyName=companyName;let ordered = document.getElementById("ordered").value;formData.ordered=ordered;let description = document.getElementById("description").value;formData.description=description;let status = document.getElementsByName("status");for (let i=0;i<status.length;i++){if (status[i].checked){//formData.status=status[i].value}}console.log(formData);//2.发送Ajax请求axios({method:"post",url:"http://localhost:8080/brand-demo1/addServlet",data:formData}).then(function (resp) {//判断响应数据是否为successif (resp.data=="success"){location.href="http://localhost:8080/brand-demo1/brand.html"}})}*/
</script></body>
</html>
总结
本文主要介绍对VUE的简单使用
参考视频
