搜索
首页web前端js教程总结vue2.0 配置的实例方法

总结vue2.0 配置的实例方法

Jun 21, 2017 am 11:10 AM
属性方法选项配置

全局配置

              silent        设置日志与警告
       optionMergeStrategies        合并策略
                devtools         配置是否允许vue-devtools
            errorHandler         错误追踪
            ignoredElements         忽略在Vue 之外的自定义元素。
                   keyCodes         自定义键位别名
           performance                        在浏览器中启用对组件初始化
             productionTip        启动时生成生产提示

 

全局API
         Vue.extend(options)             创建构造器,参数是一个选项对象
       Vue.nextTick([callback,context])             在下次更新DOM 更新循环之后执行延迟回调
                       Vue.set(object,key,value)             设置对象的属性
      Vue.delete(object,key)           删除对象的属性
                Vue.directive(id,[definition])          注册或获取全局指令
        Vue.filter(id,[definition])          注册或获取全局过滤器
           Vue.component(id,[definition])            注册或获取全局组件
          Vue.use(plugin)          安装Vue.js 插件
          Vue.mixin(mixin)          全局混合
          Vue.compile(template)            在render函数中编译模板字符串

 

选项/数据
             data               Vue           实例的数据对象
              props                          接收来自父组件的数据
             propsData             只用于new创建的实例中
              computed             计算属性
            methods           方法与事件处理
              watch           实例方法

 

选项/DOM
               el            DOM元素作为
           template              字符串模板
            render              字符串模板的替代方案

 

选项 /生命周期钩子

          beforeCreate           在实例初始化之后,数据观测和事件配置之前调用
                created           实例创建完成之后被调用
             beforeMount           在挂载开始之前被调用
             mounted            挂载到实例上之后再去调用钩子
            beforeUpdate            数据更新时调用
            updated             数据更新之后调用该钩子
             activated             组件激活时调用
            deactivated             组件停用时调用
             beforeDestroy                                       实例销毁之前调用
            destroyed                 Vue                                       实例销毁之后调用

 

选项 / 资源
           dirctives                  Vue               实例可用指令的的哈希表
             filters Vue               实例可用过滤器的哈希表
          components                  vues            实例可用组件的哈希表

 

选项/杂项
            parent               指定已创建的实例之父实例
              mixins                 选项接受一个混合对象的数组
                  name               允许组件模板递归的调用自身
               extends               允许声明扩展另一个组件
             delimiters             改变纯文本插入分隔符
            functional               是组建无状态和无实例

 

实例属性
          vm.$data                   Vue            实例观察的数据对象
            vm.$el                    Vue              实例使用的根DOM 元素
             vm.$options                用于当前Vue实例的初始化选项
              vm.$parent              父实例,如果当前实例有的话
                         vm.$root              当前组件树的根Vue实例
              vm.$children                当前实例的直接子组件
                           vm.$slots              用来访问被slot 分发的内容
          vm.$scopedSlots              用来访问scoped slots.
                      vm.$refs             一个对象,其中包含了所有拥有ref 注册的子组件
          vm.$isServer             当前Vue实例是否运行于服务器

 

实例方法/数据

     vm.$watch(expOrFn,callback,[options])         观察Vue 实例变化的一个表达式或计算属性
                         vm.$set(object,key,value)         这是全局Vue.set 的别名
             vm.$delete(object,key)         这是全局 Vue.delete 的别名

 

实例方法/事件
              vm.on(event,callback)         监听当前实例上的自定义事件
           vm.$once(event,callback)           监听一个自定义事件,但只触发一次
                            vm.$off([event,callback])           移除事件监听器
             vm.$emit(event,[...args])         触发实例上的事件

 

指令
                  v-text           更新元素的文本内容
                   v-html            更新元素的innerHTML
                    v-show            根据表达式之真假值,切换元素display css属性。
                     v-if               根据表达式的真假条件渲染元素
                   v-else            为v-if 或者v-else-if 添加else块。
                   v-for            基于源数据多次渲染元素活模板块
                   v-on             缩写@,绑定事件监听器,事件类型由参数指定。
                   v-bind             缩写 : 动态的绑定一个或多个特性
                   v-model             在表单控件或者组件上创建双向数据绑定
                  v-pre             跳过这个元素和它的子元素的编译过程
                  v-cloak             这个指令保持在元素上直到关联实例编译结束
                  v-once             只渲染元素和组件一次

 

特殊属性
              key            主要用于vue的虚拟DOM 算法
               ref            被用来给元素或子组件注册引用信息
                slot             用于标记往哪个slot中插入子组件的内容

 

内置 的组件
          component            渲染一个元素为动态组件
            transition             元素作为单个元素或组件的过度效果
         transition-group             元素作为多个元素/组件的过度效果
            keep-alive              主要用于保留组件状态或者避免重复渲染
              slot             元素作为组件模板之中的内容分发槽

以上是总结vue2.0 配置的实例方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python vs. JavaScript:开发人员的比较分析Python vs. JavaScript:开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型,适合科学计算和数据分析。2.JavaScript采用弱类型,广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势,选择时应根据项目需求决定。

Python vs. JavaScript:选择合适的工具Python vs. JavaScript:选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型:1)数据科学和自动化任务选择Python;2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐,而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript:了解每个的优势Python和JavaScript:了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势,选择取决于项目需求和个人偏好。1.Python易学,语法简洁,适用于数据科学和后端开发,但执行速度较慢。2.JavaScript在前端开发中无处不在,异步编程能力强,Node.js使其适用于全栈开发,但语法可能复杂且易出错。

JavaScript的核心:它是在C还是C上构建的?JavaScript的核心:它是在C还是C上构建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1)javascriptwasdesignedAsalightweight,解释edganguageforwebbrowsers.2)Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers,典型地提示。

JavaScript应用程序:从前端到后端JavaScript应用程序:从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验,后端通过Node.js处理服务器任务。1.前端示例:改变网页文本内容。2.后端示例:创建Node.js服务器。

Python vs. JavaScript:您应该学到哪种语言?Python vs. JavaScript:您应该学到哪种语言?May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统:1)职业发展:Python适合数据科学和后端开发,JavaScript适合前端和全栈开发。2)学习曲线:Python语法简洁,适合初学者;JavaScript语法灵活。3)生态系统:Python有丰富的科学计算库,JavaScript有强大的前端框架。

JavaScript框架:为现代网络开发提供动力JavaScript框架:为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑:1.项目规模和复杂度,2.团队经验,3.生态系统和社区支持。

JavaScript,C和浏览器之间的关系JavaScript,C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪,JavaScript、C 和浏览器之间到底有什么关系?它们之间看似毫无关联,但实际上,它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章,你将了解到JavaScript如何在浏览器中运行,C 在浏览器引擎中的作用,以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道,JavaScript是前端开发的核心语言,它直接在浏览器中运行,让网页变得生动有趣。你是否曾经想过,为什么JavaScr

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具