品牌列表管理案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
<link rel="stylesheet" href="lib/bootstrap.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">
<label>
ID:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果价格小括号，就可以给函数传参了 -->
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label>
搜索名称关键字:
<!-- 注意： vue中所有指令，在调用的时候，都以 v- 开头 -->
<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"></td>
<td>{{item.ctime | dateFormat('')}}</td>
<td>
<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="50">{{dt | dateFormat}}</h3>
</div>
<script>
// 全局的过滤器，进行时间的格式化
Vue.filter('dateFormat', function(dateStr, pattern) {
// 根据给定的事件字符串，得到特定的时间
var dt = new Date();
// yyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth();
var d = dt.getDate();
// return y + '-' + m '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m+1}-${d}`
} else {
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m+1}-${d} ${hh}:${mm}:${ss}`
}
})
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
// 使用 Vue.directive() 定义全局的指令
// 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面不需要加 v- 前缀
// 但是 在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
// 参数2：是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
bind: function(el) { //每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
//注意：在每个函数中，第一个参数永远是 el 表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素刚绑定了指令的时候 还没有 插入到 DOM 中去，这时候调用 focus 方法没有作用
// 因为一个元素 只有插入 DOM 之后 才能获得焦点
// el:focus()
},
inserted: function(el) { // inserted 便是元素 插入到DOM中的时候， 会执行 inserted 函数 [触发1次]
el.focus()
// 和JS 行为有关的操作，最好在 inserted 中去执行，防止 JS 行为不生效
},
updated: function() { // 当VNode 更新的时候，会执行 updated，可能会触发多次
},
})
// 自定义一个 设置字体颜色的指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function(el, binding) {
// el.style.color = 'red'
el.style.color = binding.value
// 和样式相关的操作，一般都可以在 bind 中执行
}
})
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() { //添加的方法
// console.log('ok');
// 分析：
// 1.获取到id 和 name，直接从 data 上面获取
// 2.阻止出一个对象
// 3.把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
// 4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数组，vue会默认监听到数据的改动，自动把最新的数据应用到页面上
var car = {
id: this.id,
name: this.name,
ctime: new Date()
};
this.list.push(car);
this.id = '';
this.name = '';
},
del(id) { //根据id删除数据
//分析：
// 1.如何根据id，找到要删除这一项的索引
// 2.找到索引后，直接调用 数组的 aplice 方法
// this.list.some((item, i) => {
// if (item.id === id) {
// this.list.splice(i, 1);
// // 在 数组的 some 方法中，如果 return true,就会立即终止这个数组的后续循环
// return true;
// }
// })
var index = this.list.findIndex(item => {
if (item.id == id) {
return true
}
});
// console.log(index);
this.list.splice(index, 1);
},
search(keywords) { //根据关键字，进行数据的搜索
// var newList = [];
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item);
// }
// })
// return newList;
// 注意：forEach some filter findIndex 这些都数组数组的新方法
// 都会对数组中的每一项进行遍历 执行相关操作
var newList = this.list.filter(item => {
// if(item.name.indexOf(keywords) != -1)
// 注意：ES6中，为字符串提供了一个新方法，叫做 string.prototype.includex('要包含的字符串')
// 如果包含，则返回 true 否则返回false
if (item.name.includes(keywords)) {
return item;
}
})
return newList;
}
},
});
// 如何自定义一个私有的过滤器（局部
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { //定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候有限调用私有过滤器
dateFormat: function(dateStr, pattern = '') {
// 根据给定的事件字符串，得到特定的时间
var dt = new Date();
// yyy-mm-dd
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// return y + '-' + m '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m+1}-${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+1}-${d} ${hh}:${mm}:${ss}~~~~~~~~~`
}
}
},
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细
bind: function(el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function(el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
// 过滤器的定义语法
// Vue.filter('过滤器的名称',function(){})
// 过滤器中的 function ，第一个参数已经被规定，永远都是 过滤器 管道符前面 传递过来的数据
// Vue.filter('过滤器的名称', function(data) {
// return data + '123'
// })
// document.getElementById('search').focus();
</script>
</body>
</html>
<!-- 过滤器调用时候的格式 {{name|nameope}} -->
过滤器
Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustachc 插值和 v-bind 表达式，过滤器应该被添加在 JavaScript 表达式的尾部，由 “管道”符表示。
过滤器的定义语法：
Vue.filter(‘过滤器的名称’,function(){})
过滤器中的 function ，第一个参数已经被规定，永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter(‘过滤器的名称’, function(data) {
return data + ‘123’
})
过滤器的基本使用方法
<div id="app">
<p>{{msg | msgFormat('疯狂','123') | test}}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器 ，名字叫做msgFormat
Vue.filter('msgFormat', function(msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，出了可写一个 字符串 之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2);
})
Vue.filter('test', function(msg) {
return msg + '=========='
})
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {
},
})
</script>
全局过滤器
// 全局的过滤器，进行时间的格式化
Vue.filter('dateFormat', function(dateStr, pattern) {
// 根据给定的事件字符串，得到特定的时间
var dt = new Date();
// yyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth();
var d = dt.getDate();
// return y + '-' + m '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m+1}-${d}`
} else {
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m+1}-${d} ${hh}:${mm}:${ss}`
}
})
私有过滤器
// 如何自定义一个私有的过滤器（局部
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { //定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候有限调用私有过滤器
dateFormat: function(dateStr, pattern = '') {
// 根据给定的事件字符串，得到特定的时间
var dt = new Date();
// yyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth();
var d = dt.getDate();
// return y + '-' + m '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m+1}-${d}`
} else {
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m+1}-${d} ${hh}:${mm}:${ss}~~~~~~~~~`
}
}
}
})
自定义按键修饰符
Vue.config.keyCodes.f2 = 113;
自定义指令
自定义全局指令获取焦点
// 使用 Vue.directive() 定义全局的指令
// 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面不需要加 v- 前缀
// 但是 在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
// 参数2：是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
bind: function(el) { //每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
//注意：在每个函数中，第一个参数永远是 el 表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素刚绑定了指令的时候 还没有 插入到 DOM 中去，这时候调用 focus 方法没有作用
// 因为一个元素 只有插入 DOM 之后 才能获得焦点
// el:focus()
},
inserted: function(el) { // inserted 便是元素 插入到DOM中的时候， 会执行 inserted 函数 [触发1次]
el: focus()
},
updated: function() { // 当VNode 更新的时候，会执行 updated，可能会触发多次
},
})
自定义全局指令改变字体颜色
// 自定义一个 设置字体颜色的指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function(el, binding) {
// el.style.color = 'red'
el.style.color = binding.value
// 和样式相关的操作，一般都可以在 bind 中执行
}
})
自定义私有指令
directives: { // 自定义私有指令
'fontweight': {
bind: function(el, binding) {
el.style.fontWeight = binding.value
}
}
}
指令函数的简写形式
大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其他的钩子函数，可以这样写：
Vue.directive(‘color-swatch’, function (el.binding) {
el.style.backgroundColor = binding.value
})
Vue 实例的生命周期
什么是生命周期
从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子
就是生命周期事件的别名
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类
创建期间的生命周期函数
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建好了，此时 data 和 methods 已经创建完成，此时还没有开始 编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
销毁期间的生命周期函数
- beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
- destroyed：Vue 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
用 vue-resource 实现get，post，jsonp请求
测试的URL请求资源地址：
JSONP的实现原理：
- 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
- 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称为JSONP
- 具体实现过程：
先在客户端定义一个回调方法，预定义对数据的操作
再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口
服务器数据接口阻止好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行
客户端拿到服务器返回的字符串后，当作script脚本去解析执行，这样就能够拿到JSONP数据了
扫一扫
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
