Vue基础系列文章10---单文件组件
原创
©著作权归作者所有:来自51CTO博客作者zhengwei_cq的原创作品,请联系作者获取转载授权,否则将追究法律责任
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)
})