vue自定义指令，过滤器，异步请求等处理

技术2022-07-11 70

文章目录

一：自定义指令二：过滤器三：计算属性，方法，侦听器对比四：vue异步请求的方法五：懒加载（按需加载路由）六：Render渲染函数

一：自定义指令

vue.directive('指令名',{})//第二个参数是与指令有关的函数 bind:function(el,binding){}//el是绑定自定义指令的元素，binding为指令处理函数的相关属性，通常与样式相关的函数放在bind函数中，与行为相关的如keyup放于inserted中 inserted:function(el,binding){}//元素插入DOM时执行。 updated:function(el,binding){}//当DOM元素更新时执行该函数，可能会执行多次

二：过滤器

Vue.filter('过滤器名',function(val){return })//返回处理结果

三：计算属性，方法，侦听器对比

1.为什么要使用计算属性？表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。计算属性：插值表达式中可能有较为复杂的处理逻辑，就可以放在计算属性中

<body> <div id="add" v-for="(item,idex) in List1"> <span>{{item.name}}</span> <span>{{item.sex}}</span> </div> <div>{{List2}}</div> <script> var vm=new Vue({ el:'#app', data(){ list:[] } computed:{ 'List1':function(){ this.list.unshift( {name:'lisa',sex:'女'}, {name:'tom',sex:'男'} ) return list//返回处理结果 }, 'List2':function(){ this.list.unshift( {name:'lisa',sex:'女'} ) return list//返回处理结果 } }, watch:{ //可以用来监听异步变化 } }) </script> </body>

computed能够监听vue中data数据的变化，页面上来就执行一次，每改变一次数据就又触发，在操作数据的时候，会派生出另一个事情 watch当指定数据发生变化时候触发。一开始不会触发，只有指定的数据发生变化就又触发一次 methods中的方法不存在缓存，而computed存在。

四：vue异步请求的方法

(1)vue-resource

vue.$http.get(url,[options]).then() vue.$http.post(url,{},[options])//{}为post请求传递的数据。 vue.$http.jsonp(url,[options])

(2)axios 使用axios发送get,post,delete,put请求。

axios.get(url,[options]).then()

五：懒加载（按需加载路由）

webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入　　不进行页面按需加载引入方式 import home from ‘…/common/home.vue’ 　　进行页面按需加载的引入方式： const home = r => require.ensure( [], () => r (require(’…/common/home.vue’)))

六：Render渲染函数

Vue一般使用template来创建HTML，然后有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数　　render函数return一个createElement组件中的子元素存储在组件实列中。

render: h => h(App)

createElement返回的是包含的信息会告诉VUE页面上需要渲染什么样的节点。我们称这样的节点为虚拟DOM

Processed: 0.010, SQL: 9