Java web（七）：VueElement"/>
Java web（七）：VueElement
文章目录
- 一、Vue
- 1.1 基本介绍
- 1.2 常用指令
- 1.3 生命周期
- 1.4 案例Vue+Axios
- 二、Element
- 三、综合案例【Vue+Element+Axios+Servelt+Mybatis】
一、Vue
1.1 基本介绍
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
vue的使用需要引入脚本<script src="js/vue.js"></script> 在webapp目录下建一个js/vue.js
1.2 常用指令
演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input v-model="username">{{username}}<br><a v-bind:href="url">演示v-bind:href</a><br><a :href="url">也可以这么写</a><br><input v-model="url"><br><input type="button" value="演示v-on:click" v-on:click="show()"><br><input type="button" value="演示v-on:click简写" @click="show()"><br><div v-if="count==3">v-if</div><div v-else-if="count==4">v-else-if</div><div v-else="">v-else</div><div v-show="count==3">v-show</div><input v-model="count"><br><div v-for="addr in addrs">{{addr}}<br></div><div v-for="(addr,i) in addrs">{{i}}---{{addr}}<br></div></div></body><script src="js/vue.js"></script>
<script>new Vue({// el:用来指定哪儿些标签受 Vue 管理el: "#app",// data:用来定义数据模型data() {return {username: "演示v-model",url: "",count: 4,addrs:["北京","天津"]}},// method:用来定义函数methods: {show() {alert("演示v-on:click")}},// mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据mounted:{}});
</script>
</html>
1.3 生命周期
1.4 案例Vue+Axios
brand.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<div id="app"><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}}</td><td>{{brand.brandName}}</td><td>{{brandpanyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td v-if="brand.status == 0">禁用</td><td v-else-if="brand.status == 1">启用</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr></table>
</div><script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script><script>new Vue({el: "#app",data(){return{brands:[]}},mounted() {var _this = this;axios({method:"get",url:"http://localhost:8080/vue-demo/selectAllServlet"}).then(function(resp){_this.brands=resp.data;})}});</script></body>
</html>
addBrand.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<div id="app"><form action="" method="post">品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>企业名称：<input id="companyName" name="companyName" v-model="brandpanyName"><br>排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>描述信息：<textarea rows="5" cols="20" id="description" name="description"v-model="brand.description"></textarea><br>状态：<input type="radio" name="status" value="0" v-model="brand.status">禁用<input type="radio" name="status" value="1" v-model="brand.status">启用<br><input type="button" id="btn" value="提交" @click="submitForm"></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(){var _this=this;axios({method:"post",url:"http://localhost:8080/vue-demo/addServlet",data:_this.brand}).then(function (resp){if(resp.data == "success"){location.href="http://localhost:8080/vue-demo/brand.html"}})}}});</script>
</body>
</html>
二、Element
-
将资源 element-ui 文件夹直接拷贝到项目的 webapp 下
-
创建页面，并在页面引入Element 的css、js文件 和 Vue.js
<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
- 创建Vue核心对象，Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象
<script>new Vue({el:"#app"})
</script>
- 官网复制Element组件代码
/
三、综合案例【Vue+Element+Axios+Servelt+Mybatis】
更多推荐
Java web（七）：VueElement
发布评论