vue-learning:13 - js - vue作用域概念:全局和局部
目录
- 全局作用域:
Vue
对象- 全局api
- 局部作用域:
- 实例对象
vm
- 实例api
- 组件
component
- 组件配置选项
- 实例对象
在引入Vue文件时,就相当于拥有了一个全局Vue对象。
在var vm = new Vue(option)时,就相当于创建了一个实例对象vm
在注册一个组件后,就相当于创建了一个组件对象。
全局Vue
对象的属性和方法能被所有实例对象共享,或者说继承。全局API调用是Vue
打点调用。形式是:VUE.directive
、VUE.filter
。
一个页面中可以创建多个实例对象,比如var test = new Vue()
、var example = new Vue()
。实例对象的api是经过vue特定封装的,以$
开始。形式是:test.$filter
、example.$data
。
定义在组件内部的属性只限组件内使用。使用Vue.component()
注册时为全局组件,可以被所有实例对象使用。在var test = new Vue({components:header})
注册的组件为实例对象test内的局部组件,只能被test实例对象内部使用,不能被其它实例对象使用。
在组件内声明的属性或方法,可以直接用指向当前组件对象的this
打点调用,形式如this.filter
、this.message
。此时的this
也可调用当前组件所属实例对象中的属性和方法,但必须$
开头,this.$options
、this.$data
。
从这节开始,我们进入Vue
逻辑层的知识点。具体看下节内容。
vue-learning:13 - js - vue作用域概念:全局和局部的更多相关文章
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- vue中eslintrc.js配置最详细介绍
本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...
- php开发面试题---vue面试题(vue.js的好处及作用)
php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...
- Parcel.js + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- Vue基础-匿名插槽与作用域插槽的合并和覆盖行为
Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- 转《vue引入第三方js库》
一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
随机推荐
- bzoj1295 最长距离
Description windy有一块矩形土地,被分为 N*M 块 1*1 的小格子. 有的格子含有障碍物. 如果从格子A可以走到格子B,那么两个格子的距离就为两个格子中心的欧几里德距离. 如果从格 ...
- JavaScript--DOM操作例子:隔行变色
上效果: 实现思想: 主要是js动态创建标签,还有动态结合css实现样式 <!DOCTYPE html> <html lang="en"> <head ...
- Oracle使用——Oracle表字段的增加、删除、修改和重命名
增加字段 语法 alter table tablename add (column datatype [default value][null/not null]); 说明:alter table 表 ...
- [ITOO]动态建库 标签: 库数据库mysql 2016-07-17 21:23 241人阅读 评论(2) 收
最近一直在做权限系统的动态建库,动态建库,说白了就是在你点击"注册"按钮的时候,根据你输入的信息,来创建一个企业所需要的数据库的过程,因为现阶段并没有提供购买等功能,所以暂时咱们是 ...
- 洛谷 P4114 Qtree1 树链剖分
目录 题面 题目链接 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例: 输出样例: 说明 说明 思路 Change Query AC代码 总结 题面 题目链接 P4114 Qt ...
- 在dva框架和create-react-app创建出来的框架中修饰器语法与按需加载引入antd分别配置
按需加载需要的包 babel-plugin-import 装饰器语法需要的包 @babel/plugin-proposal-decorators dva框架 将.webpackrc 改成. ...
- sum(),max(),avg(),RATIO_TO_REPORT()--分组统计
select id,area, sum(1) over() as 总记录数, sum(1) over(partition by id) as 分组记录数, sum(score) over() as 总 ...
- 阿里云IPv6 DDoS防御被工信部认定为“网络安全技术应用试点示范项目”
近日,阿里云数据中心骨干网IPv6 DDoS网络安全防御被工业和信息化部认定为“网络安全技术应用试点示范项目”,本次评选由工业和信息部网络安全管理局发起,从实用性.创新性.先进性.可推广性等维度展 ...
- Libev源码分析10:libev中poll的用例
在Libev中,使用poll作为backend时,涉及到下面几种数据结构: int *pollidxs; int pollidxmax; struct pollfd *polls; int pollm ...
- sublime 插件安装packagecontrol
https://packagecontrol.io/installation 第一步: Installation Simple The simplest method of installation ...