0

0

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

PHP中文网

PHP中文网

发布时间:2017-06-21 11:10:12

|

1750人浏览过

|

来源于php中文网

原创

全局配置

              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               是组建无状态和无实例

MakeSong
MakeSong

AI音乐生成,生成高质量音乐,仅需30秒的时间

下载

 

立即学习前端免费学习笔记(深入)”;

实例属性
          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             元素作为组件模板之中的内容分发槽

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

109

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

16

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

136

2026.01.26

npd人格什么意思 npd人格有什么特征
npd人格什么意思 npd人格有什么特征

NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

7

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作
windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心(Windows Defender)可通过系统设置暂时关闭,或使用组策略/注册表永久关闭。最简单的方法是:进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置,将实时保护等选项关闭。

6

2026.01.26

2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务,并强调官方渠道唯一性与信息安全。

122

2026.01.26

个人所得税税率表2026 个人所得税率最新税率表
个人所得税税率表2026 个人所得税率最新税率表

以工资薪金所得为例,应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元,专项扣除 1000 元,专项附加扣除 2000 元,当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元,对应税率为 3%,速算扣除数为 0,则当月应纳税额为 2000×3% = 60 元。

35

2026.01.26

oppo云服务官网登录入口 oppo云服务登录手机版
oppo云服务官网登录入口 oppo云服务登录手机版

oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时,可以随时将这些存储在云端的数据快速恢复到手机中。

121

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
玩转 Vue3.0 新特性
玩转 Vue3.0 新特性

共19课时 | 1.8万人学习

Vue3.0 极速入门教程
Vue3.0 极速入门教程

共55课时 | 5.6万人学习

VUE2.0+VUE3.0从入门到精通(完整版)
VUE2.0+VUE3.0从入门到精通(完整版)

共142课时 | 25.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号