目录

  • 全局作用域: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. thinkphp5.0 验证提示信息的类型

    以上是5.0.12版本 下面是5.0.5版本,没有elseif 上图中红方格的值只能是string类型,但是这种情况是在5.0.5版本是可以设置为array类型的

  2. Data Lake Analytics中OSS LOCATION的使用说明

    前言 Data Lake Analytic(后文简称 DLA)可以帮助用户通过标准的SQL语句直接对存储在OSS.TableStore上的数据进行查询分析. 在查询前,用户需要根据数据文件的格式和内容 ...

  3. LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number

    数学题 172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. N ...

  4. 【JZOJ4819】【NOIP2016提高A组模拟10.15】算循环

    题目描述 输入 输出 样例输入 167 198 样例输出 906462341 数据范围 解法 令f(n)=∑ni=1i,g(n)=∑ni=1i2 易得ans=∑ni=1∑mj=1f(n−i+1)∗f( ...

  5. XML之DOM解析文档 Day24

    TestDom.java package com.sxt.dom; import java.io.File; import java.io.IOException; import javax.xml. ...

  6. 动态设置iframe高度

    <%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...

  7. Python基础:06条件和循环

    1:条件表达式(三元操作符) Python 在很长的一段时间里没有条件表达式(C ? X : Y), 或称三元运算符.人们试着用 and 和 or 来模拟它, 但大多都是错误的. 根据 FAQ , 正 ...

  8. JAVA内存溢出解析(转)

    JAVA内存溢出解析(转) 核心提示:原因有很多种,比如: 1.数据量过于庞大:死循环 :静态变量和静态方法过多:递归:无法确定是否被引用的对象: 2.虚拟机不回收内存(内存泄漏): 说白了就是程序运 ...

  9. LRJ-Example-06-16-Uva10129

    #include <cstdio> #include <cstring> #include <vector> using namespace std; + ; // ...

  10. js键盘按下移动元素

    文章地址 https://www.cnblogs.com/sandraryan/ 功能: 点击上下左右按钮,移动元素 <!DOCTYPE html> <html lang=" ...