Vue - 实例
1、实例属性介绍如下图所示:
具体介绍如下:
A、$parent:访问当前组件的父实例
B、$root:访问当前组件的根实例,要是没有的话,则是自己本身
C、$children:访问当前组件实例的直接子组件实例
D、$ref:访问使用了v-ref指令的子组件
E、$el:当前用来访问挂载当前组件实例的DOM元素
F、$els:访问$el元素中使用了v-el指令的DOM元素
G、$data:组件实例化时选项中的data属性
H、$options:组件实例化时的初始选项对象
2、实例DOM方法
具体介绍如下:
A:$appendTo():将el所指的DOM元素或片段插入到目标元素中,接受2个参数,一个是elementOrSelector(可以是一个选择器字符串或者DOM元素)、callback(在插入后触发,要是含有过渡效果,会在过渡完成后触发)
B:$before:将el所指的DOM元素或片段插入到目标元素之前,接受2个参数,一个是elementOrSelector(可以是一个选择器字符串或者DOM元素)、callback(在插入后触发,要是含有过渡效果,会在过渡完成后触发)
C:$after:将el所指的DOM元素或片段插入到目标元素之后,接受2个参数,一个是elementOrSelector(可以是一个选择器字符串或者DOM元素)、callback(在插入后触发,要是含有过渡效果,会在过渡完成后触发)
D:$remove:将el所指的dom元素或者片段从DOM中删除,接受一个参数callback(在删除后触发,要是含有过渡效果,会在过渡完成后触发)
E:$nextTick():在下次DOM更新循环后执行指定的回调函数,使用该方法可以保证DOM中的内容与最新的数据同步,接受一个参数callback:在下次DOM更新循环的后调用执行,与全局的nextTick方法一样,不同的是,callback中的this会自动绑定到调用它的Vue实例中
3、Event方法的使用
具体介绍如下:
A:$on:监听实例上的自定义事件,接收2个参数event(字符串),可以是一个事件名称;callback(函数),回调函数,该回调函数会在执行$emit,$broadcast或者$dispatch后触发
B:$once():监听自定义事件,只触发一次,接收2个参数event(字符串),可以是一个事件名称;callback(函数),回调函数,该回调函数会在执行$emit,$broadcast或者$dispatch后触发
C:$emit():用来触发事件,event(字符串),可以是一个事件名称,args(可选),传递给监听函数的参数
D:$dispatch():用来派发事件,即先在当前实例触发,再沿父链一层一层向上,如果对应的监听函数返回false就停止,event(字符串),可以是一个事件名称,args(可选),传递给监听函数的参数
E:$broadcast():广播事件,即遍历当前实例的$children,如果对应的监听函数返回false就停止,event(字符串),可以是一个事件名称,args(可选),传递给监听函数的参数
F:$off():删除事件监听,接受两个参数,一个event(string),事件名称,一个回调函数(可选),如果要是没有参数,删除所有的事件监听器,如果只提供一参数-事件名称,删除对应的所有监听器;如果提供两个参数-事件名称以及回调函数,即删除对应的这个回调函数
Vue - 实例的更多相关文章
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- vue实例生命周期
实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...
- vue实例的几个概念
1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- v-cloak 实现vue实例未编译完前不显示
前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...
- vue实例讲解之axios的使用
本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...
- vue实例讲解之vue-router的使用
实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...
随机推荐
- nodejs net模块
net模块是同样是nodejs的核心模块.在http模块概览里提到,http.Server继承了net.Server,此外,http客户端与http服务端的通信均依赖于socket(net.Socke ...
- Android Textview实现文字颜色渐变效果
最近做应用的时候遇到一个需求,一行文字的颜色需要一个渐变效果 如上所有 从左到有逐渐变化,自己写了一个demo实现上述效果 package com.huwei.example.test; import ...
- [Bash Shell] Shell学习笔记
1. Shell简介 Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命 ...
- HDU 1690 Bus System
题目大意:给出若干巴士不同价格的票的乘坐距离范围,现在有N个站点,有M次询问,查询任意两个站点的最小花费 解析:由于是多次查询不同站点的最小花费,所以用弗洛伊德求解 时间复杂度(O^3) 比较基础的弗 ...
- 在XP上运行IIS5.1新建站点
系统问题,XP下IIS5.1不能直接新建站点,因为内核限制只能同时运行一个站点,要想新建站点,必须把当前站点停掉,然后用adsutil.vbs脚本创建,脚本在C:\Inetpub\AdminScrip ...
- 为select 设置样式
问题: 在为表单添加下拉菜单时,有时候对菜单的样式没有特别的要求,就是需要修改下select元素的宽度和高度,但众所周知select元素的样式很难修改: select在各个浏览器,字体大小为14px时 ...
- airflow 部署
环境 : ubuntu 14.04 LTS python 2.7 script: 设置环境变量: export AIRFLOW_HOME=~/airflow 安装相关依赖包: sudo apt-get ...
- mysql 查询表结构
use information_schema; select column_name, column_type, data_type, is_nullable, column_comment from ...
- Mac挂载NTFS移动硬盘读取VMware虚拟机文件
一.Mac 挂载NTFS移动硬盘进行读写操作 (Read-only file system) 注意如下图所示先卸载,然后按照下图的命令进行挂载.然后cd /opt/003_vm/ &&am ...
- 网站底部版权信息区(bootstrap)
bootstrap的强大功能毋庸置疑.所以,网站底部版权信息区可以用bootstrap的“栅格系统”完成. 下面是一个未经处理的底部版权信息区的样式: <div class="cont ...