目录

  • 全局作用域:Vue对象

    • 全局api
  • 局部作用域:
    • 实例对象vm

      • 实例api
    • 组件component
      • 组件配置选项
在引入Vue文件时,就相当于拥有了一个全局Vue对象。
在var vm = new Vue(option)时,就相当于创建了一个实例对象vm
在注册一个组件后,就相当于创建了一个组件对象。

全局Vue对象的属性和方法能被所有实例对象共享,或者说继承。全局API调用是Vue打点调用。形式是:VUE.directiveVUE.filter

一个页面中可以创建多个实例对象,比如var test = new Vue()var example = new Vue()。实例对象的api是经过vue特定封装的,以$开始。形式是:test.$filterexample.$data

定义在组件内部的属性只限组件内使用。使用Vue.component()注册时为全局组件,可以被所有实例对象使用。在var test = new Vue({components:header})注册的组件为实例对象test内的局部组件,只能被test实例对象内部使用,不能被其它实例对象使用。

在组件内声明的属性或方法,可以直接用指向当前组件对象的this打点调用,形式如this.filterthis.message。此时的this也可调用当前组件所属实例对象中的属性和方法,但必须$开头,this.$optionsthis.$data

从这节开始,我们进入Vue逻辑层的知识点。具体看下节内容。

vue-learning:13 - js - vue作用域概念:全局和局部的更多相关文章

  1. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  2. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  3. php开发面试题---vue面试题(vue.js的好处及作用)

    php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...

  4. Parcel.js + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  6. Vue基础-匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...

  7. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

  8. 转《vue引入第三方js库》

    一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...

  9. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

随机推荐

  1. python 正确地初始化对象

  2. JavaScript--tab栏切换效果

    tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. Balanced Binary Tree 判断平衡二叉树

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  4. (五)IO流之ByteArrayInput/OutputStream

    ByteArrayInputStream:是把字节数组当成源的输入流 String string="hello shanghai"; ByteArrayInputStream bi ...

  5. .net 数据表格显示控件

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/chenjinge7/article/details/30470609 1. GridView 控件 ...

  6. Java练习 SDUT-3337_计算长方体、四棱锥的表面积和体积

    计算长方体.四棱锥的表面积和体积 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 计算如下立体图形的表面积和体积. 从图 ...

  7. @atcoder - AGC035E@ Develop

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定初始集合为 1 ~ N 的全集,并给定一个 K. 每次对于当 ...

  8. 模板—点分治B(合并子树)(洛谷P4149 [IOI2011]Race)

    洛谷P4149 [IOI2011]Race 点分治作用(目前只知道这个): 求一棵树上满足条件的节点二元组(u,v)个数,比较典型的是求dis(u,v)(dis表示距离)满足条件的(u,v)个数. 算 ...

  9. 非常优秀的Javascript(AJAX) 开发工具:Aptana

    非常优秀的Javascript(AJAX) 开发工具:Aptana 下面我要向你介绍一款非常优秀的Javascript(AJAX) 开发工具:Aptana.应为它实在太棒了,所以我忍不住想向你推荐它. ...

  10. 20190527-JavaScriptの打怪升级旅行 { 语句 [ 声明 ,变量 ] }

    写在前面的乱七八糟:时间总是轻易地溜走,不留一丝念想,近一个月,倒是过得有点丧,从今天开始起,已经开始接触后台了,而JavaScript也只是大致有了个分类框架,那些细枝末节还有的补,任重道远,天将降 ...