Vue基礎系列文章10---單文件組件

1、單文件組件的結構

<template>
    <!--這裏用於定義VUE組件的模塊內容-->
    <dvi>
        <h1>這是 APP 根組件</h1>
    </dvi>
</template>

<script>
    //這裏用於定義vue組件的業務邏輯
    export default{
        data(){return {}},
        methods:{
            //處理函數
        }

    }
</script>

<style scoped>
    /*這裏用於定義組件的樣式*/
    h1{
        color: red;
    }
</style>

 2、配置單文件組件

因單位件組件是.vue格式，需要安裝Loader加載器再加載此類文件

1) 運行：npm i vue-loader vue-template-compiler -D

2) 在webpack.config.js 配置文件中，添加 vue-loader 的配置項

const path = require('path')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={
    mode: "development",
    module:{
        rules:[
            {test: /\.vue$/,loader: 'vue-loader'}
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}

 

3、使用單文件組件

1）運行：npm i vue -S

2) 在入口文件index.js 入口文件中，通過 import Vue from 'vue' 來導入vue構造函數

3) 通過vue的實例對像，指定要控制的區域

4）通過render 函數渲染App 根組件

import $ from "jQuery"
import Vue from 'vue'
import App from 'App.vue'


$(function(){
    $("li:odd").css("backgroundColor","pink");
    $("li:even").css("backgroundColor","lightblue");
})

const vm =Vue({
    el:"#app",
    render:h=>h(App)
})