MVC:模型到视图单向展示
MVVM:数据双向绑定
快速入门
官网下载vue.js(下载开发版本)
webapp下创建js文件夹,复制vue.js文件到文件夹。
在webapp中创建html/vueDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app"><!--在body里建一个最大的div并加上一个id,作为vue2的el挂载点-->
<h1>vue~</h1>
<input v-model="name">
<!--插值表达式回显为 -->
插值表达式回显为{{name}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
name:""
}
}
})
</script>
</html>
右键run vueDemo.html即可。
Vue2常用指令
v-bind为HTML标签绑定属性值href、scc样式等
v-model表单元素双向绑定数据 v-on为HTML标签绑定事件
v-if/v-else/v-else-if条件性的为true时渲染某元素 v-show根据条件展示某元素(改display属性)
v-for列表渲染遍历容器元素或对象属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app"><!--在body里建一个最大的div并加上一个id,作为vue2的el挂载点-->
<h1>vue~</h1>
<input v-model="name">
<!--插值表达式回显为 -->
插值表达式回显为{{name}}<br>
v-bind:<a v-bind:href="url">百度一下</a><br>
请输入网址<input v-model="inputUrl"><a :href="inputUrl">进入网址</a><br>
v-on:<input type="button" value="点击弹窗" v-on:click="showAlert()">
v-on:<input type="button" value="点击弹窗" @click="showAlert()"><br>
v-if=""输入count值进行<input v-model="count" type="text"><br>
v-if展示响应的结果如下:<div v-if="count==3">v-if="count==3"div3</div>
<div v-else-if="count==2">v-if="count==2"div2</div>
<div v-else>v-else:count为其他情况</div>
v-show="" count为3时展示结果如下<div v-show="count==3">div:count==3,v-show</div>
v-for=""<div v-for="addr in addrs">
{{addr}}<br>
</div>
v-for带索引写法<div v-for="(addr,i) in addrs">
{{i+1}}---{{addr}}
</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
name:"",
url:"http://www.baidu.com",
inputUrl:"",
count:3,
addrs:["北京","上海","杭州"]
}
},
methods:{
showAlert(){
alert("弹窗弹窗~")
}
}
})
</script>
</html>
Vue2生命周期
每触发一个生命周期事件,自动执行一个相应的钩子函数。
beforeCreate创建前、created创建后、beforeMount载入前、mounted挂载完成、beforeUpdate更新前、updated更新后、beforeDestroy销毁前、destroyed销毁后。
常用mountet表示vue渲染和html页面创建完成后用于发送异步请求。
项目Demo:vue+html+axios+json+servlet+mybatis完成用户查询和新增操作
项目环境
引入以下博客中的Demo项目
将vue.js文件拷贝到webpapp的js目录下
修改html/User.html内容为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UserList</title>
</head>
<body>
<div id="app">
<a href="addUser.html"><input type="button" value="新增"></a><br>
<hr>
<table id="userTable" border="1px" cellspacing="0" width="100%">
<tr>
<th>序号</th>
<th>name</th>
<th>password</th>
<th>email</th>
<th>birthday</th>
<th>infoId</th>
<th>englishTeacher</th>
<th>操作</th>
</tr>
<tr v-for="(user,i) in users" align="center">
<td>{{i+1}}</td>
<td>{{user.name}}</td>
<td>{{user.password}}</td>
<td>{{user.email}}</td>
<td>{{user.birthday}}</td>
<td>{{user.infoId}}</td>
<td>{{user.englishTeacher}}</td>
<td><a href="#">修改</a>&<a href="#">删除</a> </td>
</tr>
</table>
</div>
</body>
<!--<script src="/FilterModule/js/axios-0.18.0.js"/>-->
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
users: []//用这个数组集合接收
}
},
mounted() {
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/AxiosModule/selectAllServlet"
}).then(function (resp) {
_this.users = resp.data;
})
}
})
</script>
</html>
修改html/addUser.html内容为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addUser</title>
</head>
<body>
<div id="app">
<h3>添加用户</h3>
<form action="" method="post">
name:<input id="name" name="name" v-model="user.name" type="text"><br>
password:<input id="password" name="password" v-model="user.password" type="password"><br>
email:<input id="email" name="email" v-model="user.email" type="text"><br>
birthday:<input id="birthday" name="birthday" v-model="user.birthday" type="date"><br>
infoId:<input id="infoId" name="infoId" v-model="user.infoId" type="text"><br>
englishTeacher:<input id="englishTeacher" name="englishTeacher" v-model="user.englishTeacher" type="text"><br>
<!-- status:
<input name="status" type="radio" value="0">禁用
<input name="status" type="radio" value="1">启用-->
<input type="button" id="btn" @click="submitForm" value="submit">
<input type="reset" value="reset">
</form>
</div>
</body>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
user:{}//定义一个js对象
}
},
methods:{
submitForm(){
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/AxiosModule/AddServlet",
data: _this.user
}).then(function (resp) {
if (resp.data=="success"){
location.href="http://localhost:8080/AxiosModule/html/User.html";
}
})
}
}
})
</script>
</html>