前言
这一节讲Vue
1. Vue概述
这些都是DOM的操作
原来模型和视图不能实现同步变化，但是Vue就可以了
2. 快速入门
1.
2.
<script src="js/vue.js"></script>
<div id="app">
<!-- 准备一个input输入框,绑定一个模型，这个模型的名字就是username,,,,{{username}}这个是差值表达式，把username里面的模型的数据取出来-->
<!-- 后面input输入框的数据产生变化，模型跟着变，取出来的数据也跟着变化-->
<input v-model="username">
{{username}}
</div>
<script>
//1.创建vue核心对象---->它有两个属性，一个el--->指定vue的作用范围--->id为app的就可以被Vue作用
//data属性就是返回一个username的空字符串的属性
new Vue({
el:"#app",
// data:function () {
// return {
// username:""
// }
// }或
data(){
return {
username:""
}
}
})
</script>
这里我们输入什么，就展示出来什么
3. 常用指令
v-model就是用来数据双向绑定的
<div id="app">
<!-- <a href=""></a> 以前这样写href，href就写死了，现在我们换一下,,这个url加上v-bind就是模型里面的url-->
<a v-bind:href="url">点击一下</a>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
username:"",
// 增加一个属性，url
url:"http://www.baidu.com"
}
}
})
</script>
<a :href="url">点击一下</a>
可以这样写，省略v-bind
所以改变模型里面的url就可以改变地址了
或者可以用v-model，来改变url
<a :href="url">点击一下</a>
<input v-model="url">
这个是因为一开始初始化的模型里面的值就是百度的
我们就是一边书写，它就会对应一边变化的
<div id="app">
<!-- click是单击事件，blur是光标失去焦点事件 v-on:click="show()" 单击调用模型里面的show方法，没有传参的话，show的括号可以不写 -->
<input type="button" value="一个按钮" v-on:click="show()">
</div>
<script>
new Vue({
el:"#app",
data(){
return {
username:"",
// 增加一个属性，url
url:"http://www.baidu.com"
}
},
//定义方法要用methods
methods:{
show(){
alert("我被点了。。。。");
}
}
})
</script>
<input type="button" value="一个按钮" @click="show()">
当然也可以这样写，没什么区别
<div id="app">
<!-- 如果count==3才展示div1 else，如果count==4，展示div2，else展示div3-->
<div v-if="count == 3">div1</div>
<div v-else-if="count==4">div2</div>
<div v-else>div3</div>
<br>
<input v-model="count">
</div>
<script>
new Vue({
el:"#app",
data(){
return {
username:"",
url:"http://www.baidu.com",
count:3
}
},
methods:{
show(){
alert("我被点了。。。。");
}
}
})
</script>
<div v-if="count == 3">div1</div>
<div v-show="count == 3">div1</div>
v-if和v-show,两个的效果是一模一样的
两个的区别就是，真正的html代码，count！=3的话，v-if是不存在的，v-show是存在的，只不过打印的隐藏了而已
<div id="app">
<div v-for="addr in addrs">
{{addr}}<br>
<!-- addr这个是局部变量，就是取得数组里面的每个值而已 -->
</div>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
username:"",
url:"http://www.baidu.com",
count:3,
addrs:["北京","上海","西安"]
}
},
methods:{
show(){
alert("我被点了。。。。");
}
}
})
</script>
<div id="app">
<div v-for="(addr,i) in addrs">
{{i}}-{{addr}}<br>
<!-- addr这个是局部变量，就是取得数组里面的每个值而已 -->
</div>
</div>
这样写的话，那个i就是索引
4. 生命周期
加载完成的话，mounted会被自动的执行
<script>
new Vue({
el:"#app",
data(){
return {
username:"",
url:"http://www.baidu.com",
count:3,
addrs:["北京","上海","西安"]
}
},
methods:{
show(){
alert("我被点了。。。。");
}
},
// mounted:function(){
//
// }
mounted(){
alert("加载完成")
}
})
</script>
5.案例
5.1 查询所有
vue创建
绑定app
针对status有方法
只需要在在brand类里面添加一个getStatusStr就可以直接用brand.statusStr得到了
<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>
<!-- 使用v-for-->
<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() {
//页面加载完成之后，就发送异步请求，来查询数据
//我们用v-for来遍历---》app里面
var _this = this;
axios({
method: 'get',
url:"http://localhost:8080/brand1-demo/selectAllServlet"
}).then(function (resp) {
// var brands=resp.data;//这个目前是局部变量，要给v-for使用，，所以需要把brands变成一个模型--->Data里面声明一下
// this.brands = resp.data;--->但是这个this指的是axios的window的
_this.brands = resp.data;
})
}
})
</script>
5.2 新增品牌
增加一个brand的对象值，这个就是我们添加的值
<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" name="status" v-model="brand.status" value="0">禁用
<input type="radio" name="status" v-model="brand.status" value="1">启用<br>
<!--submitForm是一个方法-->
<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是一个对象,就用{}，没有属性现在---->v-model的时候就会添加属性值了
brand:{}
}
},
methods: {
submitForm() {
//发送ajax请求,完成添加功能
var _this=this;
axios({
method: 'post',
url: "http://localhost:8080/brand1-demo/addServlet",
data: _this.brand,
}).then(function (resp) {
//判断响应数据是否为success,如果是说明添加成功，并跳回展示页面
if (resp.data == "success") {
location.href = "http://localhost:8080/brand1-demo/brand.html";
}
})
}
}
})
</script>
总结
下一节讲Element
