LoginSignup
0
0

More than 1 year has passed since last update.

import App from './App.vue'とは

Last updated at Posted at 2021-05-08

Vue CLIのsrcフォルダにあるmain.jsの記述をvs.codeで開いて見てみます。
import App from './App.vue'ってなんでしょう?

上に設置してある「App.vue」のことだそうです。
中身はtemplate,script,styleの3つの要素からできています。

import App from './App.vue'とはApp.vue(単一ファイルコンポーネント)を読み込んで(import)オブジェクトを作っていますということだそうです。

以下は参考オブジェクトの中身です。

Object
beforeCreate: Array(1)
0: ƒ ()
length: 1
__proto__: Array(0)
beforeDestroy: Array(1)
0: ƒ ()
length: 1
__proto__: Array(0)
components:
HelloWorld:
beforeCreate: [ƒ]
beforeDestroy: [ƒ]
name: "HelloWorld"
props: {msg: {…}}
render: ƒ ()
staticRenderFns: (4) [ƒ, ƒ, ƒ, ƒ]
_Ctor: {0: ƒ}
__file: "src/components/HelloWorld.vue"
_compiled: true
_scopeId: "data-v-469af010"
__proto__: Object
__proto__: Object
name: "App"
render: ƒ ()
_withStripped: true
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
length: 0
name: "render"
prototype: {constructor: ƒ}
__proto__: ƒ ()
apply: ƒ apply()
arguments: (...)
bind: ƒ bind()
call: ƒ call()
caller: (...)
constructor: ƒ Function()
length: 0
name: ""
toString: ƒ toString()
Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
get arguments: ƒ ()
set arguments: ƒ ()
get caller: ƒ ()
set caller: ƒ ()
__proto__: Object
[[FunctionLocation]]: ​
[[Scopes]]: Scopes[0]
[[FunctionLocation]]: App.vue?42e3:1
[[Scopes]]: Scopes[3]
staticRenderFns: Array(0)
length: 0
__proto__: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__: Object
_Ctor:
0: ƒ VueComponent(options)
__proto__: Object
__file: "src/App.vue"
_compiled: true
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0