版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38087648/article/details/89518935
全局过滤器的使用
<body>
<div id="app">
<p>{{ msg | msgFormat('傻帽','沙雕') | format('卧槽') }}</p>
</div>
<script src="js/vue.js"></script>
<script src="js/filter.js"></script>
</body>
// 过滤器调用时候的格式 {{name | 过滤器的名称}}
//过滤器的定义语法 Vue.filter('',function () {});
//过滤器中的function，第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据
Vue.filter('msgFormat',function (data,msg,arg) {
//字符串的replace方法第一个参数除了可写一个字符串之外，还可以定义一个正则
//return data.replace('傻逼','沙雕');
//return data.replace(/傻逼/g,'沙雕');
return data.replace(/傻逼/g,msg+arg);
})
Vue.filter('format',function (data,msg) {
return data.replace(/曾经/g,msg);
})
私有过滤器的使用
//所谓的全局过滤器是共有的
//如何自定义一个私有的过滤器
//定义私有过滤器，过滤器有两个条件，过滤器名称和处理函数
//过滤器调用的时候采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
//filters定义在Vue实例中
filters: {
msgFormat: function (data,msg) {
return data.replace(/傻逼/g,msg);
}
}
按键修饰符
<!-- 按键修饰符
@keyup
.enter .tab .delete .esc .space .up .down .left .right -->
<el-input style="width: 200px;" v-model="inputName" @keyup.native.enter="addPinPai"></el-input>
//自定义全局按键修饰符
//Vue.config.keyCodes.enter = 13;
自定义全局指令
<!-- Vue中所有的指令在调用的时候，都以v-开头 -->
<el-input style="width: 200px;" v-model="keywords" v-focus></el-input>
//使用Vue.directive()自定义指令
//其中参数一是指令的名称，注意，在定义的时候，指令的名称前面不需要加v-前缀，但是在调用的时候必须在指令
//名称前面加上v-前缀来进行调用
//参数二是一个对象，这个对象身上有一些指令相关的钩子函数，这些函数可以在特定的阶段执行相关的操作
Vue.directive('focus',{
//每当指令绑定到元素上的时候会立即执行bind函数，只执行一次
bind:function (el) {
//注意：在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数是一个原生的js对象
//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用foucs没有作用，因为一个元素只有插入DOM之后，
//才能获取焦点
//el.focus();
},
//表示元素插入到dom中的时候会执行inserted函数，执行一次
inserted:function (el) {
el.querySelector('input').focus();
},
//当VNode更新的时候会执行updated，可能会触发多次
updated:function () {}
});
使用钩子函数的第二个指令binding
<!-- Vue中所有的指令在调用的时候，都以v-开头 -->
<el-input style="width: 200px;" v-model="keywords" v-focus v-color></el-input>
//自定义一个设置字体颜色的指令
Vue.directive('color',{
//样式，只要通过指令绑定给了元素，不管这个元素有 没有被插入到页面中去，这个元素肯定有了一个内联的样式
//将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind:function (el) {
//和样式相关的操作，一般都可以在bind执行
el.querySelector('input').style.color = 'red';
}
})
自定义指令传入参数
<el-input style="width: 200px;" v-model="keywords" v-focus v-color="'blue'"></el-input>
bind:function (el,binding) {
//和样式相关的操作，一般都可以在bind执行
el.querySelector('input').style.color = binding.value;}
自定义私有指令
<el-input style="width: 200px;" v-model="keywords" v-focus
v-color="'blue'" v-fontweight="1000"></el-input>
directives:{
'fontweight':{
bind:function (el,binding) { el.querySelector('input').style.fontWeight=
binding.value;
}
}}
指令函数的简写形式
'fontsize':function (el,binding) {
//注意：这个function等同于把代码写到了bind和update中去
el.querySelector('input').style.fontSize = binding.value;
}
Vue的生命周期函数
beforeCreate(){
//这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它 //console.log(this.msg);
//this.show();
//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据还没有初始化
},
created(){
//这是遇到的第二个生命周期函数
//在created中，data和methods都已经初始化好了
//如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作
console.log(this.msg); this.show();
},
beforeMount(){
//这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中去
//在beforeMount执行的时候，页面中的元素，还没有真正替换过来，只是之前写的一些模板字符串 //console.log(document.getElementById('h3').innerText);
},
mounted(){
//这是遇到的第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
//注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有
//其他操作的话，这个实例，就静静地 躺在我们的内存中，一动不动 //console.log(document.getElementById('h3').innerText);
},
//运行中的两个事件
beforeUpdate(){
//这时候，表示我们的界面还没有被更新，数据肯定被更新了
console.log('界面上元素的内容：' +
document.getElementById('h3').innerText); console.log('data中msg的数据是：' + this.msg);
//得出结论：当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
},
updated(){
//updated事件执行的时候，页面和data数据已经保持同步了，都是最新的 console.log('界面上元素的内容：' +
document.getElementById('h3').innerText); console.log('data中msg的数据是：' + this.msg);},
resource使用ajax
<div id="app">
<input type="button" value="get" @click="getInfo">
<input type="button" value="post" @click="postInfo">
<input type="button" value="jsonp" @click="jsonpInfo">
</div>
getInfo(){
//发起get请求
//当发起get请求之后，通过.then来设置成功的回调函数
this.$http.get('http://kerys.pythonanywhere.com/api/getprodlist').then(result => {
//通过result.body拿到服务器返回的成功的数据
console.log(result.body);
}
)},
postInfo(){
//发起post请求，
//手动发起的post请求，默认没有表单格式，所以，有的服务器处理不了
//通过post方法的第三个参数，{emulateJSON:true} 设置提交的内容类型为普通表单数据格式
this.$http.post('http://kerys.pythonanywhere.com/api/addprod/',{name:'要添加的品牌名称已经存在'},{emulateJSON:true}).then(result
=> {
console.log(result);
}
)},
jsonpInfo(){
this.$http.jsonp('').then(result => { console.log(result.body);
}
)}