1.Vue过滤器:
Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)
过滤器应该被放在JavaScript的尾部,由“管道符 | ”指示。
<!-- 在双花括号中 -->
{{ message | 过滤器名称 }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | 过滤器名称"></div>
<!--过滤器调用格式 {{dataName | 过滤器名称filterName }}-->
<script>
/**
*过滤器的第一个参数data永远被定义为管道符“|”前的数据。
*过滤器是可以传多参数的。
*过滤器可以定义多个,而且作用域可以不同。
*一个dataName使用多个过滤器时,用管道符分割,按顺序执行。
*/
Vue.filter('过滤器名称filterName',function(data){
//操作
})
</script>
2.过滤器的分类:全局过滤器和私有过滤器
私有过滤器:定义在vm实例属性filters里的过滤器就是私有过滤器。
全局过滤器:定义在<script>的内,vm实例外的过滤器。
<script>
//全局过滤器
Vue.filter(filterName1,functiong(data){
//操作
})
//vm实例
var vm=new Vue({
el:'xx',
data:{
msg:'关注John,得福利',
},
methods:{
},
//局部过滤器:过滤器名:过滤器方法
filters:{
filterName2:function(data){
//操作
}
}
})
</script>
3.padStart(length,padString) //用户填充字符。多用于填充时间表达式中的"0"
<script>
var date=new Date();
var y=date.getFullYear();
var m=date.getMonth()+1 //因为JS是以数组形式存储月份,所以getMonth()比正常月份小1。
var d=date.getDate();
var hh=date.getHours();
var mm=date.getMinutes();
var ss=date.getSeconds();
console.log(`${y}-${m}-${d} ${hh}:${mm}:${ss}`);
/**
*加入现在时间是2018-11-11 09:08:06 那么此时输出的是:2018-11-11 9:8:6
*为了解决少0的问题引入了padStart(填充总长度,填充字符)方法
*上面代码可以改为:
*/
var date1=new Date();
var y=date1.getFullYear();//因为date原本是4位数字所以不做填充
var m=date1.getMonth()+1.tostring().padStart(2,'0');
var d=date1.getDate().tostring().padStart(2,'0');
var hh=date1.getHours().tostring().padStart(2,'0');
var mm=date1.getMinutes().tostring().padStart(2,'0');
var ss=date1.getSeconds().tostring().padStart(2,'0');
//此时输出:2018-11-11 09:08:06
console.log(`${y}-${m}-${d} ${hh}:${mm}:${ss}`);
</script>
4.按键修饰符:配合键盘事件keyup使用。
分类:
1.系统自带的:enter , tab , delete(用于捕获"删除"和"退格"键) , esc , space , up , down , left , right
2.自定义的:按照js键盘事件对应的键码自定义设置。
<!-- 系统自带的按键修饰符 -->
<!-- 按键enter执行delete方法 -->
<input type="text" @keyup.enter="delete" />
<!-- 自定义的按键修饰符 -->
<!-- 第一种:直接写js对应键盘的键码 键码114 对应 键盘中的F3 -->
<input type="text" @keyup.114="delete"/>
<!-- 第二种:在Vue中将F3绑定键码114 -->
<input type="text" @keyup.f3="delete"/>
<script>
//自定义全局按键修饰符
Vue.config.keyCodes.f3=114;
</script>
5.自定义指令:因为Vue不推荐操作DOM,但是有一些指令Vue中没有,那么只有自定义指令才能完成了。
钩子函数:
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
钩子函数的参数:
1.el : 指令所绑定的元素,可以用来直接操作 DOM 。
2.binding: 一个对象,包含以下属性
属性:
1.name 指令名,不包括 v- 前缀。
2.value指令的绑定值, 例如: v-my-directive=”1 + 1”, value 的值是 2。
3.oldValue指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4.expression: 绑定值的字符串形式。 例如 v-my-directive=”1 + 1” ,expression 的值是 “1 + 1”。
3.vnode:Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
4.oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
注意:除了 el 之外,其它参数都应该是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。
<!-- 此处v-focus是自定义的指令 -->
<input type="text" v-focus />
<script>
/**
*Vue.directive()定义全局的指令 v-focus
*directive()指令第一个参数是参数名称,第二个参数是一个对象,
*第二个参数(对象)里面是指令相关的钩子函数,这些钩子函数在特定的阶段执行特定的操作
*注意:指令命名时不需要加 v- ,但是调用时需要加 v-
*/
Vue.directive('focus',{
/**
*元素绑定指令时,也就是bind执行时,元素还没有被加入DOM树中。(只是在内存中)
*某些方法在bind中是执行不了的.例如:el.focus()原因:focus只有在元素被加入DOM树才会执行
*设置style样式,不管样式是在内存还是页面中,游览器都会渲染样式。
*正因为bind一个是在内存中执行,inserted一个是页面中执行。所以bind一般用于设置style样式,inserted一般用于设置行为(也就是方法)。
*此处介绍的钩子函数:是主要使用的三大钩子函数。
*/
bind:function(el){
//操作
},
inserted:function(el){
//操作
el.focus();
},
updated:function(el){
//操作
}
})
</script>
6.私有自定义指令(仅仅在vm实例控制的区域内使用)
<div id="testarea1">
<p v-color="'color'" @click="show">{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#testarea1',
data:{
//vm实例得数据
msg:'关注John)Zhou得福利!';
},
methods:{
//vm实例的方法
shou(){
alert("关注John_Zhou得福利!!!");
},
},
filters:{
//私有过滤器
},
directives:{
//自定义私有指令
'color':{
bind:function(el,binding){
el.style.color=binding.value;
}
}
}
})
</script>
7.函数简写:主要针对bind和update钩子函数上的重复动作
<div id="testarea1">
<p v-color="'red'" v-fontsize="50" @click="show">{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#testarea1',
data:{
//vm实例得数据
msg:'关注John)Zhou得福利!';
},
methods:{
//vm实例的方法
shou(){
alert("关注John_Zhou得福利!!!");
},
},
filters:{
//私有过滤器
},
directives:{
//自定义私有指令
'color':{
bind:function(el,binding){
el.style.color=binding.value;
},
}
'fontsize':function(el,binding){
/*这个function相当于把函数写进了bind和update两个钩子函数中取。*/
el.style.fontsize=parseInt(binding.value)+'px';
},
}
})
</script>
8.Vue实例的生命周期
1.生命周期:从Vue实例的创建,运行到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期。(生命周期等于事件)
生命周期钩子等于生命周期函数(或者生命周期事件)。
2.主要的生命周期函数分类:
2.1创建期间的生命周期函数
2.2运行期间的生命周期函数
2.3销毁期间的生命周期函数
3.图解Vue生命周期:
3.1英文版:
3.2中文版
3.3代码
<!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="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改ms" @click="msg='不再关注'">
<h3 id="dataChange">{{ msg }}</h3>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
alert('执行了show方法')
}
},
beforeCreate() {
/**
*第一个生命周期函数,表示实例还未被完全被创建出来,会执行它。
*beforeCreate()中,data和methods还未被初始化完成.控制台无法取得data的值或调用methods方法
*/
},
created() {
/**
*第二个生命周期函数
*created 中,data 和 methods 都已经被初始化好了。控制台能够取得data的值或调用methods方法
*/
},
beforeMount() {
/**
*第三个生命周期函数,表示模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中
*beforeMount(),页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
*/
},
mounted() {
/**
*第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
*mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了(包括页面渲染)。此时,内存中就存在一个实实在在的实例了。
*/
},
beforeUpdate() {
/**
*这时候,表示我们的页面的数据还没有被更新。只是内存中更新了。页面尚未和最新的数据保持同步
*/
},
updated() {
/**
*updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
*/
}
});
</script>
</body>
</html>
9.使用vue-resource实现get,post,jsonp请求(即:Ajax请求)。
9.1语法: this.$http.get(url,[options]).then(successCallback,errorCallback[可选参数])
9.2语法: this.$http.post(url,body,[options]).then(successCallback,errorCallback[可选参数])
9.3语法: this.$http.jsonp(url,[options]).then.(successCallback,errorCallback[可选参数])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="vue-2.4.0.js"></script>
<script src="vue-resource-1.3.4.js"></script>
<body>
<div id="area">
<input type="button" value="get方法" @click="getInfo">
<input type="button" value="post方法" @click="postInfo">
<input type="button" value="Jsonp方法" @click="jsopInfo">
</div>
</body>
<script>
var vm = new Vue({
el: '#area',
data: {},
methods: {
getInfo() {
/**
*发起get请求
* .then是设置回调函数,必须写发送成功后的回调函数(即:接受服务器数据的回调函数)。
* .body来接受返回的所有数据。
* 测试地址:http://vue.studyit.io/api/getlunbo
*/
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
console.log(result.body);
})
},
postInfo() {
/**
*发起post请求
* post的请求默认是以表单格式提交上服务器的。
* 手动的post默认是没有表单格式的,需要在options可选参数位置设置:emulateJSON:true (设置提交内容为表单格式).
* 回调函数是匿名函数,箭头函数也是匿名函数,所以直接用箭头函数代替。
* 测试地址:http://vue.studyit.io/api/post
*/
this.$http.post('http://vue.studyit.io/api/post', {}, {emulateJSON: true}).then(result => {
console.log(result.body)
})
},
jsopInfo() {
/**
*发起JSONP请求
* 测试地址:http://vue.studyit.io/api/jsonp
*/
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
alert(result.body)
})
}
}
})
</script>
</html>
10.JSONP
JSONP产生:由于游览器安全限制,一般不允许Ajax跨域请求(浏览器认为这种访问不安全)。
JSONP原理:因为script标签不存在跨域限制,所以可以通过动态创建script标签,把script标签src属性指向数据接口的地址。。这种数据获取方式,称为JSONP(注意:根据JSONP的实现原理,JSONP只支持get请求)。
(注意:script是解析填写在src中的脚本信息来获取数据的)
利用JSONP服务器剖析JSONP原理:
客户端:
<!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>
</head>
<body>
<script>
//客户端定义方法的调用。
function showInfo123(data) {
console.log(data)
}
</script>
<script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
<!-- <script>
show()
</script> -->
</body>
</html>
服务器端:
/**
*原理:服务器端传递调用信息,从而调用客服端的方法。
*/
// 导入 http 内置模块
const http = require('http')
// 这个核心模块,能够帮我们解析 URL地址,从而拿到 pathname query
const urlModule = require('url')
// 创建一个 http 服务器
const server = http.createServer()
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) {
// const url = req.url
const { pathname: url, query } = urlModule.parse(req.url, true)
if (url === '/getscript') {
// 拼接一个合法的JS脚本,这里拼接的是一个方法的调用
// var scriptStr = 'show()'
var data = {
name: 'xjj',
age: 18,
gender: '女孩子'
}
var scriptStr = `${query.callback}(${JSON.stringify(data)})`
// res.end 发送给 客户端, 客户端去把 这个 字符串,当作JS代码去解析执行
res.end(scriptStr)
} else {
res.end('404')
}
})
// 指定端口号并启动服务器监听
server.listen(3000, function () {
console.log('server listen at http://127.0.0.1:3000')
})