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主組件引用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。