1 简单的品牌管理列表
在之后的学习 都会以该项目作为学习基础
<div id="app">
<label>
ID
<input type="number" v-model="id">
</label>
<label>
NAME
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<label>
搜索
<input type="text" v-model="sreachKey" autofocus="true">
</label>
<div>
<!-- 在之前,我们使用v-for循环中的数据是直接从vm中的data里的list直接渲染出来de -->
<!-- 现在我们定义了一个 sreach 方法,通过将搜索的字符作为参数的形式传递给该方法-->
<!-- 在该方法内部我们通过循环进行比对就可以得出响应的数据 并返回出来 在通过v-for循环该数据就可以渲染我们想要的数据 -->
<div v-for="(item, index) in sreach(sreachKey)" :key="item.id">{{item.id}} {{item.name}} {{item.create}} <input
type="button" value="删除" @click="del(index)"></div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
sreachKey: "",
list: [
{ id: 1, name: "奔驰", create: "2019-04-09 15:12:42" },
{ id: 2, name: "宝马", create: "2019-04-09 15:12:42" },
]
},
methods: {
add() {
this.list.push({ id: this.id, name: this.name, create: new Date() });
this.id = parseInt(this.id) + 1;
},
del(index) {
console.log(index);
this.list.splice(index, 1);
},
sreach(key) {
if (key == "") return this.list;
var data = [];
// this.list.forEach(element => {
// if (element.name.indexOf(key) !== -1) {
// data.push(element);
// }
// });
// return data;
return this.list.filter(item => {
if (item.name.includes(key)) { return item };
})
}
},
})
</script>
2 Vue中的过滤器
<div id="app">
<p>{{msg | msgformat("哈哈哈")}}</p>
</div>
<script>
//定义一个msg的过滤器
Vue.filter("msgformat", (msg,replaceText) => {
//在replace 方法,第一个参数除了可以写一个字符串 还可以定义一个正则
return msg.replace(/喜欢/g, replaceText);
})
var vm = new Vue({
el: "#app",
data: {
msg: "我以前很喜欢你,但是现在不喜欢你了。我现在喜欢你大爷了!!!!",
},
methods: {
},
})
</script>
3 使用过滤对品牌管理列表的时间栏进行格式化
下面的代码中, 还有关于 Vue 的指令 和键盘码控制
<div id="app">
<label>
ID
<input type="number" v-model="id">
</label>
<label>
NAME
<!-- 给name的输入框加上@keyup.f2 就可以实现当焦点在输入框时 按f2 可以实现添加功能-->
<input type="text" v-model="name" @keyup.f2="add">
</label>
<input type="button" value="添加" @click="add">
<label>
搜索
<input type="text" v-model="sreachKey" v-focus v-color="'blue'">
</label>
<div>
<!-- 在之前,我们使用v-for循环中的数据是直接从vm中的data里的list直接渲染出来de -->
<!-- 现在我们定义了一个 sreach 方法,通过将搜索的字符作为参数的形式传递给该方法-->
<!-- 在该方法内部我们通过循环进行比对就可以得出响应的数据 并返回出来 在通过v-for循环该数据就可以渲染我们想要的数据 -->
<div v-for="(item, index) in sreach(sreachKey)" :key="item.id">{{item.id}} {{item.name}}
{{ item.create | formatTT() }}
<input type="button" value="删除" @click="del(index)">
</div>
</div>
</div>
<div id="app2">
<p v-fontweight="800" v-color="'red'" v-fontsize="80">{{ dt | formatTT() }}</p>
</div>
<script>
//全部过滤器
Vue.filter("formatTT", (date, format = '') => {
//根据给定的字符串,得到特定的时间
var date = new Date(date);
var year = date.getFullYear();
var month = (date.getMonth() + 1).toString().padStart(2, "0");
//知识点补充 , ES6中字符串的新方法 padStart(maxLength,padStr) 最大长度不足 用padStr填充
var day = (date.getDate()).toString().padStart(2, "0");
if (format.toLowerCase() == "yyyy-mm-dd") {
return `${year}-${month}-${day}`;
} else {
var hh = (date.getHours()).toString().padStart(2, "0");
var mm = (date.getMinutes()).toString().padStart(2, "0");
var ss = (date.getSeconds()).toString().padStart(2, "0");
return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
}
})
//自定义全局按键修饰符
Vue.config.keyCodes = {
f2: 113,
};
//使用Vue.directive(id,[options]) 定义全局的指令 如focus
//其中 参数1 指令的名称,注意在定义的时候,指令的名称前面不要加v- 前缀
//但是在调用的时候,必须在指令名称前面加上v-前缀调用 <input type="text" v-focus>
//参数 2 是一个对象,这个对象身上 有一个相关的指令函数,这些函数可以在特定的阶段 执行相关的操作 如生命周期
Vue.directive('focus', {
//注意 在每个函数中 第一个参数永远是el 表示 被绑定了指令的那个元素,这个el是一个原生的js对象
bind(el) {
//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
//在元素 刚绑定了指令的时候, 还没有插入到内存的DOM树中取。这个时候 调用focus方法是没有作用的
//因为一个元素只有在插入DOM之后才能获取焦点
// el.focus();
},
inserted(el) {
//当元素插入到 DOM中的时候, 会执行inserted函数【触发一次】
//与js行为有关的操作,最好在inserted中去执行, 防止这个js行为不生效
el.focus();
},
updated() {
//当Vnode更新的时候,会执行updated 可能会触发多次
},
})
Vue.directive("color", {
//样式只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中qu去,这个元素一定会有一个行内样式
//将来元素肯定会显示在页面上,这时候,浏览器的渲染引擎,必然会解析样式,应用给这个元素
bind(el, binder) {
//参数2 代表元素绑定的指令中携带的参数。
//与样式相关的操作 一般都可以在bind中执行。
el.style.color = binder.value;
console.log(binder);
}
})
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
sreachKey: "",
list: [
{ id: 1, name: "奔驰", create: "2019-04-09 15:12:42" },
{ id: 2, name: "宝马", create: "2019-04-09 15:12:42" },
]
},
methods: {
add() {
this.list.push({ id: this.id, name: this.name, create: new Date() });
this.id = parseInt(this.id) + 1;
},
del(index) {
console.log(index);
this.list.splice(index, 1);
},
sreach(key) {
if (key == "") return this.list;
var data = [];
// this.list.forEach(element => {
// if (element.name.indexOf(key) !== -1) {
// data.push(element);
// }
// });
// return data;
return this.list.filter(item => {
if (item.name.includes(key)) { return item };
})
}
},
})
var vm = new Vue({
el: "#app2",
data: {
dt: new Date(),
},
methods: {
},
//私有过滤器
filters: {
//定义私有过滤器的要求有两个 【过滤器名称 和处理函数 】
//过滤在调用的时候 采用的是就近原则 如果私有过滤器和全局过滤器重名, 则会选择私有过滤器优先调用
formatTT(date, format = "") {
//根据给定的字符串,得到特定的时间
var date = new Date(date);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (format.toLowerCase() == "yyyy-mm-dd") {
return `${year}-${month}-${day}`;
} else {
var hh = date.getHours();
var mm = date.getMinutes();
var ss = date.getSeconds();
return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
}
}
},
directives: {
fontweight: {
bind(el, bindding) {
el.style.fontWeight = bindding.value
}
},
// 指令的简写方式 该简写 等同于在 bind 和update 中都写了代码
fontsize: (el, bindding) => {
el.style.fontSize = parseInt(bindding.value) + "px"
}
}
})
</script>
4 Vue中的实例生命周期函数
<div id="app">
<h3 id="h3">{{msg}}</h3>
<input type="button" value="点我" @click="change">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "ok"
},
methods: {
test() {
console.log("我已经准备好了");
},
change() {
this.msg = "change";
}
},
beforeCreate() {//这是第一个生命周期函数,表示实例完成创建之前,就会执行
// console.log(this.msg)//undefined
// 注意在beforeCreate()执行时,data和methods中的数据还没有初始化
},
created() {//这是第二个生命周期函数
console.log(this.msg);//ok
this.test();//我已经准备好了
//在created()执行的时候,data和methods的数据已经初始化好
//如果要使用data和methods中的数据最早只能在该周期函数中进行调用
},
beforeMount() {//这是第三个生命周期函数 表示模板在内存中编辑完成了,但是尚未把模板渲染到页面中
console.log(document.getElementById("h3").innerText);// {{msg}}
//在beforeMount() 执行时, 页面中的元素,还没有真正被替换过来,只是之前写的模板字符串
},
mounted() {//这是第四个生命周期函数 表示内存中的模板已经真实的挂载到了页面上,用户可以看到渲染好的页面了
console.log(document.getElementById("h3").innerText);//ok
//mounted()是实例创建期间的最后一个函数, 当执行完mounted()以后,实例就已经完全创建好了,如果没有后入操作的话, 将会在内存存留
},
//下面的是运行的事件
beforeUpdate() {//表示我们的界面还没有被更新【数据是被更新了的】
console.log("界面上元素的内容" + document.getElementById("h3").innerText);//界面上元素的内容ok
console.log("data中的数据" + this.msg);//data中的数据change
//结论:当执行beforeUpdate()时候,页面中显示的数据,依旧是旧的,此时data数据是最新的,页面尚未和最新的data数据保持同步
},
updated() {
console.log("界面上元素的内容" + document.getElementById("h3").innerText);//界面上元素的内容change
console.log("data中的数据" + this.msg);//data中的数据change
//结论:当执行updated()时候,页面中显示的数据,和data数据保持同步
},
beforeDestroy() {
//当运行beforeDestroy()时。vue实例已经从运行阶段,进入到了销毁阶段,
//此时在vue实例中的所有数据都处于可用状态,还没有真正销毁
},
destroyed() {
//当destroyed()执行时,vue实例已经销毁,实例中的所有数据都不可用了
},
})
5 Vue中 发送网络请求
如果想要发送Vue网络请求,我们需要使用v-resource来进行(如jQuery中的$.ajax一样)
要引入一个v-resource文件
<script src=" https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<div id="app">
<input type="button" value="G请求" @click="request">
<input type="button" value="P请求" @click="postreq">
<input type="button" value="J请求" @click="jsonpreq">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
request() {
this.$http.get("http:localhost:8081").then((result) => {
console.log(result);
});
},
postreq() {
this.$http.post('http:localhost:8081/reg',{name:'wwwww',pwd:"qeq"}).then(res => {
console.log(res);
})
},
jsonpreq(){
this.$http.jsonp('http:localhost:8081/jsonp').then(res => {
console.log(res);
})
}
},
})
</script>
6 使用v-resource来改造品牌管理列表 实现MVVM
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加</h3>
</div>
<div class="panel-body form-inline">
<label>
NAME:
<input type="text" v-model="name" class="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>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) 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>
var vm = new Vue({
el: "#app",
//在vm实例中 有一个属性叫http 是控制请求的配置
http: {
root: "http://127.0.0.1:8081/",//访问的地址配置 在http中配置了root后 在发送请求时 就可以不写请求根地址,只需要将接口写对 即可正确访问
//原写法 :this.$http.post("http://127.0.0.1:8081/").then()
//配置后 :this.$http.post().then()
emulateJSON: true
},
data: {
name: "",
interface: {
all: "all",
add: "add",
del: "del"
},
list: [
{ id: 1, name: "五菱", ctime: new Date() },
{ id: 2, name: "面包", ctime: new Date() },
]
},
methods: {
add() {
this.$http.post(this.interface.add, { name: this.name }).then(res => {
console.log(res);
var data = res.body;
if (data.status == 0) {
this.getAll();
} else {
alert(data)
}
})
},
getAll() {
//因为引入vue-resource 可以直接使用this.$http进行访问
this.$http.get(this.interface.all).then(res => {
console.log(res);
var data = res.body;
if (data.status == 0) {
this.list = data.msg
} else {
alert(data)
}
})
},
del(id) {
this.$http.post(this.interface.del, { id: id }).then(res => {
console.log(res);
var data = res.body;
if (data.status == 0) {
alert(data.msg)
this.getAll();
} else {
alert(data)
}
})
},
},
created() {
this.getAll();
},
})
</script>