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

时间 2019-11-17

标签 vue html 文件之间简单引用关系栏目 HTML 繁體版

原文原文链接

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

<body>
    <app></app>　　<!-- 此处app的组件为入口js main.js中定义的组件名 -->
    <script src="build.js"></script>　　<!-- 此处引用的js为webpack打包生成的js文件 -->
</body>

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

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，格式为：vue

<template>
    <h1>welcome Vue</h1>
    <h2 @click="change">{{msg}}</h2>
    <my-menu></my-menu>　　<!-- 引用的其余组件，而后在html中运用 -->
</template>
<script>
    import Menu from './components/Menu.vue'　　//在此引入其余子组件

    export default{　　// 这个导出的模块和vue中的component的方式如出一辙，这里面能够直接给数据data，定义方法methods等等
        data(){
            return {
                msg:'welcome Vue ^_^'
            }
        },
        methods:{
            change(){
                this.msg='wahaha'
            }
        },
        components:{
            'my-menu':Menu　　//引入其余子组件，在此定义赋值
        }    
    }
</script>
<style>
    body{
        background: #ccc
    }
</style>

Menu.vuewebpack

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

<template>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
</template>
<script>
    
</script>

最终的展现效果：app

我的总结：框架

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

　　二、入口的main.js文件引入vue框架和 App.vue主组件，而后实例化vue对象，在components属性中定义组件名（把引入App.vue主组件定义一个名字，返给html文件运用）this

　　三、App.vue主组件，里面集合了html、js、css语法，在此主组件文件中，也能够引用其余子组件，引用时在script标签所在的js中，用import引入，而后在实例化vue对象中的components中定义名字，而后在template所在的html中运用。spa

　　四、子组件在components文件中，通常此文件夹中放置的都是子组件，被App.vue主组件引用。