vue中html、js、vue文件之间的简单引用与关系

有关vue文件记录:
index.html
在html中运用组件

<body>
    <app>app>  
    <script src="build.js">script>  
body>

main.js
在这个文件中定义js,引入vue和App.vue

import Vue from 'vue'     //引入之后就可以直接new Vue({ })使用了
import App from './App.vue'  //引入主组件 new Vue({   el:'body',   components:{     app:App //App是上面import引入的App;app是自定义的名字,返给html中运用的组件标签   } });


App.vue(官方规范,一般组件文件的首字母大写)
在这个文件中定义html、js、css,格式为:



Menu.vue

在当前目录的components文件夹下面有一个Menu.vue组件


 最终的展示效果:

  vue中html、js、vue文件之间的简单引用与关系_第1张图片

 

个人总结:

  1、html文件中基本不写什么东西,只是写一个组件标签。

  2、入口的main.js文件引入vue框架 和 App.vue主组件,然后实例化vue对象,在components属性中定义组件名(把引入App.vue主组件定义一个名字,返给html文件运用)

  3、App.vue主组件,里面集合了html、js、css语法,在此主组件文件中,也可以引用其他子组件,引用时在script标签所在的js中,用import引入,然后在实例化vue对象中的components中定义名字,然后在template所在的html中运用。

  4、子组件在components文件中,一般此文件夹中放置的都是子组件,被App.vue主组件引用。

转载于:https://www.cnblogs.com/smile-fanyin/p/11258300.html

你可能感兴趣的:(vue中html、js、vue文件之间的简单引用与关系)