vue/element简单使用
VUE框架
快速入门
首先在js文件夹里引入vue.js
在要用到的页面导入（和axios一样）
<body>
<div id="app">
<input v-model="username">
<!-- 插值表达式-->
{{username}}
</div>
<script src="js/vue.js"></script>
<script>
//.创建vue的核心对象
new Vue({
el:"#app" ,
/*data:function (){
return{
name:""
}
}*/
data(){
return{
username:""
}
}
});
</script>
</body>
这就是一个快速入门
常用指令
<body>
<div id="app">
<div v-if="count==3">div1</div>
<div v-else-if="count==4">div2</div>
<div v-else>div3</div>
<input v-model="count">
<!-- 插值表达式-->
{{username}}
</div>
<script src="js/vue.js"></script>
<script>
//.创建vue的核心对象
new Vue({
el:"#app" ,
/*data:function (){
return{
name:""
}
}*/
data(){
return{
username:"",
count:3
}
}
});
</script>
</body>
生命周期
要知道
mounted：挂在完成，Vue初始化成功，HTML页面渲染成功
发送异步请求，加载数据
案例-优化查询所有&新增品牌
<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>{{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",
data(){
return{
brands:[]
}
},
mounted(){
//.页面加载完成之后，发送异步请求，查询数据
var _this=this
axios({
method:"get",
url:"http://localhost:8080/cookie-demo/selectAllServlet"
}).then(function (resp){
_this. brands= resp.data;
})
}
})
</script>
简单了太多了，这里要小心this的作用域，如果要使用另一个方法中的this可以使用引入变量的方式
<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" v-model="brand.description" 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/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
methods:{
submitForm(){
var _this=this
//.发送ajax请求完成添加
axios({
method:"post",
url:"http://localhost:8080/cookie-demo/addServlet",
data:_this.brand
}).then(function (resp){
//.判断响应数据是否为success
if(resp.data=="success"){
location.href="http://localhost:8080/cookie-demo/brand.html"
}
})
}
},
data(){
return{
brand:{},
}
},
mounted(){
}
})
ELEMENT
快速搭建网页的工具，要用的组件直接到
快速入门
首先导入包在webapp下
再导入vue.js文件在js目录，也可以通过网上的链接导入
再到要用到的界面导入依赖链接，写好vue模板
随后在div中就可以去官网需要的代码了
只是注意代码要分开放到不同的模块，html的放到div中，style放到style中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<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>
<!-- <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>
-->
<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>
<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>
<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">
<script>
new Vue({
el:"#app",
data(){
return{
}
},
mounted(){
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号