02 (H5*) Vue第二天
2024-09-16 08:53:16
目录:
1:全局过滤器的使用
2:局部过滤器
3:自定义键盘码
4:自定义指令
5:自定义私有指令
6:Vue生命周期。
7:网络请求
1:全局过滤器的使用
Vue.filter("msgFormat", function(msg, arg){
return msg.replace(/单纯/g, arg);
});
Vue.filter("test", function (msg) {
return msg + "======";
});
html中:
<p>{{ msg | msgFormat("疯狂") | test}}</p>
2:局部过滤器
var vm = new Vue({
el: "#app",
data:{
},
methods:{
},
// 这是私有过滤器
filters:{
},
});
3:按键修饰符号
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
自定义全局键盘码:
Vue.config.keycodes.f2 = 113;
4:自定义全局指令
// 使用 Vue.directive() 定义全局的指令 v-focus
// 其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀,
// 但是: 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用
// 参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
Vue.directive('focus', {
// 一般进行一些样式的操作
bind: function (el) { // 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
// 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象
// 在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用
// 因为,一个元素,只有插入DOM之后,才能获取焦点
// el.focus()
},
// 一般进行一些js操作。
inserted: function (el) { // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候,会执行 updated, 可能会触发多次
}
})
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
5:自定义私有的指令
var vm = new Vue({
el : "#app",
data : {
},
methods : {
},
// 自定义私有的过滤器
filter : {
},
// 自定义私有的指令
directives : {
"fontweight" : {
bind : function (el , binding) {
el.style.color = binding.value;
}
},
},
});
6:Vue的生命周期
beforeCreate() { // 这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
// console.log(this.msg)
// this.show()
// 注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 数据都还没有没初始化
},
created() { // 这是遇到的第二个生命周期函数
// console.log(this.msg)
// this.show()
// 在 created 中,data 和 methods 都已经被初始化好了!
// 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
},
beforeMount() { // 这是遇到的第3个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
// console.log(document.getElementById('h3').innerText)
// 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
},
mounted() { // 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
// console.log(document.getElementById('h3').innerText)
// 注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
// 如果通过插件来操作DOM元素,最早在mounted中操作,
// 此时已经脱离了创建阶段,到了运行阶段。
},
// 接下来的是运行中的两个事件
beforeUpdate() { // 这时候,表示 我们的界面还没有被更新【数据被更新了吗? 数据肯定被更新了】
/* console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是:' + this.msg) */
// 得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
},
updated() {
console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是:' + this.msg)
// updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
}
当执行beforeDestory钩子函数的时候,Vue实例从运行阶段进入到销毁阶段
当执行beforeDestory钩子函数的时候,Vue实例身上所有的data和methods和过滤器和指令都处于可以利用的状态。此时还没有真正的销毁。
当执行Destoryed钩子函数的时候,Vue实例身上所有的data和methods和过滤器和指令都处于不利用的状态。
7:vue-resource
[vue-resource 实现 get, post, jsonp请求](https://github.com/pagekit/vue-resource)
除了 vue-resource 之外,还可以使用 `axios` 的第三方包实现实现数据的请求
1. 之前的学习中,如何发起数据请求?
2. 常见的数据请求类型? get post jsonp
3. 测试的URL请求资源地址:
+ get请求地址: http://vue.studyit.io/api/getlunbo
+ post请求地址:http://vue.studyit.io/api/post
+ jsonp请求地址:http://vue.studyit.io/api/jsonp
小技巧:
1:在Vue中尽量不要使用jQuery。
2:在Vue中,使用时间绑定机制,为元素指定处理函数的时候,如果添加了小括号,就可以传递参数了。
3:循环遍历:foreach some filter indexOf.
4:数组添加是push,删除元素是splic。
注意:
1:在Vue中,已经实现了数据的双向绑定,每当我们修改了data的数据,Vue会默认监听到数据的变动,自动把最新的数据,应用到页面上。
最新文章
- eclipse 相同变量高亮显示 颜色修改 变量着色
- 2016网易实习生编程题:n个骰子的和等于m
- Redis 安全
- http://blog.csdn.net/xyang81/article/details/7292380
- nginx配置学习文章
- SQL优化总结之一
- 【Python3学习】Python环境搭建
- WebService关于Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart)问题解决
- 【Python】动手分析天猫内衣售卖数据,得到你想知道的信息
- 「洛谷5283」「LOJ3048」「十二省联考2019」异或粽子【可持久化01trie+优先队列】
- SpringBoot整合Freemarker+Mybatis
- 安卓开发_浅谈ListView之分页列表
- 决策树分类算法及python代码实现案例
- http状态码204/206/200/302/303/307
- MySQL数据库安装与配置鸡汤
- MySQL数据库之索引
- linux中echo命令详解
- Pool thread stack traces: Thread[C3P0PooledConnectionPoolManager[identityToken->;原因解决办法
- gradle 项目转成maven项目
- iOS 屏幕录制功能
热门文章
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
- Mysql主从复制原理及搭建
- c++ 左移
- Linux Capabilities 简介
- alter add命令用来增加表的字段
- springboot之additional-spring-configuration-metadata.json自定义提示
- Leetcode之深度优先搜索(DFS)专题-301. 删除无效的括号(Remove Invalid Parentheses)
- codeblocks无法调试的相关解决思路
- HTML(三)链接,<;head>;,css样式
- 洛谷P2216: [HAOI2007]理想的正方形 单调队列优化DP