Vue.js基础(三)
VUE(三)
过滤器
Vue允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方： mustach插值和v-bind表达式，其余地方一律不用。
<!-- 过滤器调用时候的格式 {
{
name | 过滤器的名称}}-->
<!-- 过滤器定义语法 -->
Vue.filter('过滤器的名称'，function(data))
<!--functiond 的第一个参数已经被规定死了，永远是 | 前面传过来的数-->
<div id="app">
<p>{
{
msg | msgFormat('全力')}}</p>
</div>
<script>
//过滤器的function的第一个参数是固定的
Vue.filter('msgFormat',function(msg,str){
return msg.replace(/努力/g,'奋力'+str);
})
var vm = new Vue({
el: '#app',
data: {
msg: '努力寻找，努力工作，努力成长！'
}
})
</script>
- 以上定义的是一个全局的过滤器，即所有的VUE实例都能使用。
- 私有过滤器，定义在vue实例中，跟data、methods是平级的
var vm2 = new Vue({
el: '#app2',
data: {
msg: '努力寻找，努力工作，努力成长！'
},
filter: {
msgFormat: function(msg,template) {
return msg.replace(/努力/g,'奋力');
}
}
})
//filter也是一个对象，其定义格式为 过滤器名称：function(){}
- 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器。
padStart()和padEnd()
ES7中规定，padStart()和padStart()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。
padStart()用于头部补全，padEnd()用于尾部补全。
自定义全局按键修饰符
- 除了系统提供的按键，还可以自定义：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
自定义指令-获取文本框焦点
<script>
//自定义全局指令
Vue.directive('focus',{
bind: function(el) {
//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素（参数el，代表的是一个原生的JS对象）
},
inserted: function(el) {
//表示元素插入到Dom中的时候，会执行inserted函数
el.focus();//原生JS的Dom对象有focus方法
},
updated: function(el) {
// VNode 更新时调用,会执行updated，可能会触发多次
}
})
</script>
//应用
<input type="text" v-focus >
- 使用
Vue.directive(val,option)定义全局指令v-val； - 其中，参数1：指令的名称，在定义的时候，指令的名称前不需要加
v-前缀，但是，在调用的时候，必须在指令名称前加v-前缀； - 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在指定的阶段，执行相关的操作
- 与JS行为相关的最好都在
inserted里执行，防止JS不生效
自定义全局指令-设置字体颜色
<script>
Vue.directive('color',{
bind: function(el) {
el.style.color = 'red';
}
})
</script>
<!--应用-->
<input type="text" v-color="'red'" >
- 样式，只要通过指令绑定给了父元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式，将来元素肯定会被浏览器渲染到页面中去。
- 和样式相关的操作，一般都可以在
bind中执行。 - 指令钩子函数会被传入的参数，除了el，还有：（详细请参照官方文档）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doOVpM6c-1571479577360)(./1570385684427.png)]
<script>
Vue.directive('color',{
bind: function(el，binding) {
el.style.color = binding.value;
}
})
</script>
<!--应用-->
<input type="text" v-color="'blue'" >
自定义私有指令
自定义私有指令函数的简写
var vm2 = new Vue({
el: '#app2',
data: {
msg: '努力寻找，努力工作，努力成长！'
},
directives: {
fontSize: function(el,binding) {
//不标明前面的钩子，此时这个函数是同时应用于bind和updata的
el.style.fontSize = parseInt(binding.value) + 'px';
}
}
})
生命周期函数
生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！就像一个人的成长过程，在相应的阶段要做相应的事情，直到生命逝去。
钩子函数：在实例成长的每一个阶段，都会有一个开口（接口），如若想要让实例在某一个阶段做某些事情，只能通过这个接口把一些事件方法等放进去。
生命周期函数 = 钩子函数 = 生命周期事件
<div id='app'>
<p>{
{
msg}}</p>
</div>
<!-- template 这是vue提供用来包裹元素的自定义标签 -->
<template id='temp1'>
<div><h1>你好</h1></div>
</template>
<script>
var vm = new Vue({
el: '#app',
//如果有template，页面渲染的时候就直接把#app给换掉了，且template只能有一个根元素包裹
//template: '你好
',
template: '#temp1',
data: {
msg: '哈哈哈'
},
beforeCreate(){
//数据初始化之前 在这里获取不到data中的数据
},
created() {
//数据初始化完成 可以获取和操作data中的数据
//一般ajax请求数据在这里实现
},
beforeMount() {
//挂载之前 判断渲染模板是否正确
},
mounted() {
//挂载之后 试图渲染完成
},
beforeUpdate() {
//数据更新之前 表示的是界面的数据没有被更新，但是内存中的数据已经更新了
},
updated() {
//数据更新完成 一般用watch代替
},
beforeDestroy() {
//销毁之前
},
destroyed() {
//销毁完成
}
})
//只有没有el的时候才会看$mount
vm.$mount('#app')//效果跟el:'#app'一样
vm.$destroy(); //手动销毁实例 销毁实例之后，实例不再起作用，但之前渲染的数据还是存在的 只是把vm切断了
</script>
<!-- 数据=>视图=>监听数据更新=>销毁实例 -->
- 生命周期函数有：
beforeCreate() created() 数据初始化完成
beforeMount() mounted() 视图渲染完成 实例创建阶段结束，进入运行阶段
beforeUpdate() updated() 运行阶段
beforeDestroy() destroyed() 销毁阶段 - 重点的常用的生命周期函数有：
created()/mounted() mounted()：如果要通过某些插件操作页面上的DOM节点了，最早要在mounted中进行。beforeUpdate的时候，页面中显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步updated事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
vue-resource（IE9以下不支持）
npm install vue-resource
引入vue-resource以后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http
var vm = new Vue({
el: '#app',
data: {
},
methods: {
getInfo() {
/*发起get请求后，通过.then来设置成功的回调函数*/
this.$http.get('https://www.bilibili.com/video/av50680998?t=315&p=39').then(function(result) {
console.log(result.body);
//通过result.body拿到服务器返回的成功的数据
})
},
postInfo() {
this.$http.post('https://www.bilibili.com/video/av50680998?t=315&p=39',{
},{
emulate:true}).then(function(result) {
console.log(result.body);
})
//三个参数分别是：要访问的网址，发送给服务器的数据，{emulate:true}设置提交的内容类型为普通表单数据格式
},
jsonpInfo() {
this.$http.jsonp('https://www.bilibili.com/video/av50680998?t=315&p=39').then(result => {
console.log(result.body);
})
}
}
})
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。