vue
武世鹏
这个作者很懒,什么都没留下…
展开
-
vue inheritAttrs属性
inheritAttrs1、父组件所有不是props的属性,在传递给子属性时默认作为普通HTML属性绑定到子组件根元素实例上如果不想子组件实例继承这些属性则可以通过设置 ***inheritAttrs:false***改变这种默认行为。2、子组件可以通过以下方式重新绑定这些继承的属性:<p :newattr="$attrs"></p>...原创 2020-04-27 15:15:54 · 129 阅读 · 0 评论 -
vue函数式组件
函数式组件无状态函数式组件Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // ......原创 2020-04-27 14:12:27 · 119 阅读 · 0 评论 -
Vue.observable( object )
概念全局注册一个可响应的对象,可用于组件间共享数据const state = Vue.observable({ count: 0 })const Demo = { render(h) { return h('button', { on: { click: () => { state.count++ }} }, `count is: ${state.co...原创 2020-04-27 11:35:24 · 492 阅读 · 0 评论 -
Vue.component
概念vue组件获取或注册方法 Vue.component( id, [definition] )id:组件id,必传参数definition:可选参数 该参数描述组件实体,不传该参数为获取组件,传入为注册组件//可显示调用 Vue.extend() 注册组件Vue.component("mycomponent",Vue.extend())//当传入一个对象是,vue会自动调用Vue...原创 2020-04-27 11:23:49 · 151 阅读 · 0 评论 -
Vue.filter()
概念用于对数据做处理,返回过滤后的数据全局过滤器Vue.filter('filterData', function (value) { value为过滤的目标数据})//使用方法 使用管道符"|"<p>{{ mydata | filterData }}</p>局部过滤器 filters:{ filterData: function(val...原创 2020-04-27 11:13:17 · 132 阅读 · 0 评论 -
Vue.directive自定义指令
背景有时候我们需要自定义一些指令可以重复使用,类似于vue自带的v-if一样,此时就需要使用Vue.directiveVue.directive("focus",{ inserted: function (el) { // 聚焦元素 el.focus() }})//通过以下方式使用<input v-focus>钩子函数bind: function...原创 2020-04-27 10:48:44 · 108 阅读 · 0 评论 -
Vue.delete( )
删除响应式数据的属性当不在需要对一个数据的属性做响应式处理是可通过此方法删除该属性data:{ obj:{ old: "不再需要了" }}methods:{ delete(){ Vue.delete(obj,old) }}...原创 2020-04-27 10:21:13 · 245 阅读 · 0 评论 -
Vue.set
用法向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property。注意!!!新的属性必须添加到data中已有的数据中//当需要向newobj中添加响应式属性 myname 时data:{ newobj:{}}methods:{ add(){ Vue.set(newobj,myname,...原创 2020-04-27 10:16:15 · 72 阅读 · 0 评论 -
Vue.nextTick( )
背景Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 P...原创 2020-04-27 10:05:18 · 111 阅读 · 0 评论 -
Vue.extend心得
基本用法const myConstructor = vue.extend("component-name",{ template: "<div>{{text}}</div>", //组件结构 data(){ //组件数据 return{ text:"" } }, methods:{} ...原创 2020-04-24 12:18:08 · 114 阅读 · 0 评论