Vue——品牌案例以及v-resource改造品牌案例
程序员文章站
2022-05-15 13:40:02
...
品牌案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/bootstrap3.3.7.css">
</head>
<body>
<div id="app">
<!-- 快捷键 bs3-panel -->
<!-- 在vue中使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label for="">
ID:
<input type="text" class="form-control" v-model="id">
</label>
<label for="">
Name:
<!-- enter回车键 -->
<!-- <input type="text" class="form-control" v-model="name" @keyup.enter="add"> -->
<!-- 系统内置给我们提供了几个,如果不够就可以自定义 比如我要按F2添加 -->
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<!-- 不传参数add后面的括号可省略 -->
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label for="">
搜索名称关键字:
<!-- Vue中所有的指令,在调用的时候都以v-开头,包括自定义 -->
<!-- 如果blue没有单引号只有双引号,就是个变量,会在date中找这个变量的值,但是Blue我们是作为参数传递进自定义指令中的,以字符串形式传递 -->
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'blue'">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前v-for中的数据,都是直接从data上的list中直接渲染过来的 现在我们自定义一个search方法,同时
把所有的关键字通过传参的形式传递给了search方法-->
<!-- 在search方法内部,通过执行for循环,把所有符合搜索关键字的数据,保存到一个新数组中,返回-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name">{{item.name}}</td>
<td>{{item.Ctime|dateFormat('')}}</td>
<td>
<!-- 加点击事件和阻止默认行为(a标签会刷新页面) 括号里传参 这个a链接属于for循环内部，所以能访问到item.id -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="'50px'">{{dt|dateFormat}}</h3>
</div>
<script>
//全局的过滤器，进行时间的格式化
//所谓的全局过滤器，就是所有的Vue实例共享的
Vue.filter('dateFormat', function (dateStr, pattern = ' ') {
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr)
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate()
if (pattern && pattern.toLowerCase() === "yyyy-mm-dd") {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh} :${mm}:${ss} `
}
})
//系统内置给我们提供了几个,如果不够就可以自定义
// 自定义全局按键修饰符 config是配置 keyCodes键盘码
Vue.config.keyCodes.f2 = 113 //113是f2的码
//定义全局指令,其中参1是指令的名称,在定义的时候,指令的名称前面不需要加前缀- 调用的时候必须在指令名称前加上v-前缀
// 参数2是个对象 这个对象身上有一些指令相关的函数,这个函数可以在特定的阶段执行相关的操作
// 在每个函数中,第一个参数永远是el,表示被绑定了指令的那个元素.这个el参数是一个原生的js对象
Vue.directive('focus', {
bind: function (el) {
// 在元素刚绑定了指令的时候,还没有插入到DOM中,这时候调用focus方法没有作用,因为一个元素只有插入DOM之后,才能获取焦点
//每当指令绑定到元素上el的时候,会立即执行这个函数,只执行一次
},
inserted: function (el) {
// 表示元素插入到DOM中的时候,执行这个函数,触发一次
el.focus()
},
update: function (el) {
// 当vNode更新的时候,会执行这个函数,可能会触发多次
}
})
//自定义一个设置字体的颜色,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了内联的样式.不需要在Inserted 因为改变样式不需要DOM
//和样式相关的在Bind里渲染,和js行为相关的最后在Inserted中取执行,防止js行为不生效
/*
钩子函数的参数有：
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
*/
Vue.directive('color', {
bind: function (el, binding) { //括号里的是形参,形参名字是什么都可以
//上面的Input里的v-color
// el.style.color = 'red';
// console.log(binding.expression);
// console.log(binding.value);
el.style.color = binding.value
},
inserted: function (el) {},
update: function (el) {}
})
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
keywords: '', //搜索关键字
list: [{
id: 1,
name: '玛莎拉蒂',
Ctime: new Date()
},
{
id: 2,
name: '保时捷',
Ctime: new Date()
}
]
},
methods: {
add() {
var car = {
id: this.id,
name: this.name,
Ctime: new Date()
};
this.list.push(car);
// 添加完自动清空输入框的id和name
this.id = this.name = '';
},
del(id) { //为什么这里不写item.id
//1.数组的some方法
//分析：如果根据ID，找到要删除的这一项索引，如果找到索引了，直接调用数组的splice方法
//在数组的some方法中，如果return true就立刻终止这个数组的后续循环
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// }
// return true;
// })
//2.findIndex方法 返回索引
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
})
// console.log(index);
this.list.splice(index, 1);
},
search(keywords) { //根据关键字进行数据的搜索
//1.方法一
/* var newList = [];
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item);
}
})
return newList;*/
//2.方法二 注意:forEach some filter findIndex这些都属于数组的新方法,都会对数组中的每一项进行遍历,执行相关的操作,,会有一些差别
//各有各的用法
return this.list.filter(item => {
//ES6的新方法includes 如果包含,返回true,否则返回false
if (item.name.includes(keywords))
return item;
})
}
},
})
var vm2 = new Vue({
//过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器
el: "#app2",
data: {
dt: new Date()
},
methods: {},
//定义一个私有的过滤器(局部 )有两个条件 过滤器名称和处理函数
filters: {
//定义私有过滤器，过滤器有两个条件【过滤器名称和处理函数】
dateFormat: function (dateStr, pattern = ' ') {
//根据给定的时间字符串，得到特定的时间
//padStart(这是补开头的)为了使时间不足两位的不足两位，比如2月是02，可以使用es6的方法，是字符串独有的方法，数字不行，所以要把数字转成字符串
var dt = new Date(dateStr)
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart('2', "0");
var d = (dt.getDate()).toString().padStart('2', "0");
if (pattern && pattern.toLowerCase() === "yyyy-mm-dd") {
return `${y}-${m}-${d}`
} else {
var hh = (dt.getHours()).toString().padStart('2', "0");
var mm = (dt.getMinutes()).toString().padStart('2', "0");
var ss = (dt.getSeconds()).toString().padStart('2', "0");
return `${y}-${m}-${d} ${hh} :${mm}:${ss} ~~~`
}
}
},
//自定义私有指令
directives: {
'fontweight': { //设置字体粗细
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
//简写方式
//注意:这个function等同于把代码写到bind和update里去
'fontsize': function (el, binding) {
el.style.fontSize = parseInt(binding.value)+'px'//因为50px是作为字符串传过来的,所以要转成parseint 由于可能传过来的是50,我们不知道是不是带px,所以手动加个px
}
}
})
</script>
</body>
</html>
改造后的品牌案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/bootstrap3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<!-- 我们迁移到数据库 会自动递增ID,所以不需要写ID -->
<label for="">
Name:
<input type="text" v-model="name" calss="form-control">
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Ctime</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.Ctime}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//如果我们通过全局配置了请求的数据接口 根域名,则在每次单独发起http的时候,请求的url路径应该以相对路径开头,前面不能带斜线/,否则不会启用根路径做拼接
Vue.http.options.root='http://vue.studyit.io/';
//全局启用emulateJSON选项 这样在get或者post等方法中的括号可以删掉emulateJSON缩短代码
Vue.http.options.emulateJSON=true;
var vm = new Vue({
el: "#app",
data: {
name: "",
list: [{
id: 1,
name: '玛莎拉蒂',
Ctime: new Date()
},
{
id: 2,
name: '保时捷',
Ctime: new Date()
}
]
},
created() {
//当vm实例的data和methods初始化完毕后,vm实例会自动执行created这个生命周期函数
this.getAllList()
},
methods: {
getAllList() {
//获取所有的品牌列表
// 分析:1.由于已经导入了Vue-resource这个包,所以可以直接通过this.$http来发起数据请求
// 2.根据接口API文档知道获取列表的时候,应该发起一个get请求
//3.this.$http.get('url').then(function(result){})
//4.当通过then指定回调函数之后 在回调函数中可以拿到数据服务器返回的result
//5.先判断result.status是否等于0,如果等于0就成功了,可以把result.message赋值给this.list,.如果不等于0,弹框提醒获取数据失败
this.$http.get('api/getprodlist').then(result => {
//注意:通过$httml获取到的数据,都在result.body上放着
var result = result.body
if (result.status === 0) {
this.list = result.message
} else {
alert("获取数据失败")
}
})
},
add() {
//添加品牌列表到后台服务器
//通过查看数据API接口的文档 要发送一个Post请求
//this.$http.post()中接收三个参数 第一个参数：要请求的URL地址 第二个参数：要提交给服务器的数据，
//要以对象形式提交给服务器{name:this.name}
//第三个参数：是一个配置对象，要以哪种表单数据类型提交过去{emulateJSON:true}以普通表格格式将数据提交给服务器
//在post方法中，使用.then来设置成功的回调函数，如果想要拿到成功的结果，用result.body
this.$http.post('api/addproduct',{name:this.name}).then(result => {
//注意:通过$httml获取到的数据,都在result.body上放着
var result = result.body
if (result.status === 0) {
//添加完成后，只需要手动再调用以下getAllList就能刷新品牌列表了
this.getAllList()
//清空name
this.name=''
} else {
alert("添加失败")
}
})
},
del(id){//删除品牌列表
this.$http.get('api/delproduct'+id).then(result => {
//注意:通过$httml获取到的数据,都在result.body上放着
var result = result.body
if (result.status === 0) {
//删除成功
this.getAllList()
} else {
alert("删除失败")
}
})
}
}
})
</script>
</body>
</html>
上一篇： Java导出zip压缩文件
下一篇： vue 02品牌管理案例涉及知识点