关于单文件组件.vue的使用
vuejs 自定义了一种.vue文件，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack构建中，需要安装vue-loader 对.vue文件进行解析。在 sumlime 编辑器中，我们 书写.vue 文件，可以安装vue syntax highlight 插件，增加对文件的支持。
环境搭建完毕，利用vue-router实现了页面跳转，那么现在要处理的就是页面的内容了。
一个页面可以看作是由各种各样的组件组成的，大至一个页面，小至一个按钮都可以作为一个组件，页面的组件化可以大大提高代码的重用性，免除了很多重复性的劳动。vue允许把用户组件写成单个的文件，尾缀为.vue，然后再以模块的方式引入,下面是我的例子：
入口文件：
import Vue from 'vue';
import VueRouter from 'vue-router'
import Main from'./components/main.vue'
import Login from'./components/login.vue'
import Content from'./components/content.vue'
Vue.use(VueRouter);
const routes=[
{path:'/login',component:Login},
{path:'/main',component:Main},
{path:'/main/content',component:Content},
{path:'/',redirect:'/login'}
];
const router=new VueRouter({
routes
});
var app=new Vue({
router,
el:'#app',
template:'<router-view></router-view>'
});
这是其中的一个组件content：
<template>
<p class="demo-title">{{msg}}</p>
</template>
<script>
export default{
data:function(){
return{msg:"hello"}
}
}
</script>
<style>
.demo-title{color:red;}
</style>
这里用上了ES6的模块加载功能：export和import，在组件中使用export，可以把组件定义为一个模块，import则可以把已定义的组件，这样就能方便处理模块间的依赖关系。
一个vue文件一般来说有三个元素：template（html模板），script，style，我们在script中编写组件所需要的依赖和交互代码，并用export将整个组件以模块的方式定义。在script中，组件的编写方法与在vue对象中的编写组件的方法并无二致，所以也可以把template写进script里面。
一个组件对应一个文件，这样子就可以在组件内部处理组件自身的内容，css也可以只针对组件生效，十分方便。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue使用CDN引用项目组件，减少项目体积的步骤，帮助大家提高项目加载速度，感兴趣的朋友可以了解下2020-10-10
本文详细讲解了Vue的生命周期，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue3中展示markdown格式文章的三种形式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
这篇文章主要介绍了vue中使用keep-alive动态删除已缓存组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了Vue中的性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
在vue中，有时候你需要对data中的数据进行处理，或者对抓取的数据进行处理之后再挂载呈现到标签中，这时候你就需要计算属性了，当然看到这里你可能还是不了解那下面我举几个实例并附代码解释2023-03-03
Vue启动失败报错:Module not found: Error: Can‘t resolve &apos
这篇文章主要给大家介绍了关于Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-03-03
之前使用 ElementPlus 做项目的时候,由于不会使用按需引入耽误了不少时间,这篇文章主要给大家介绍了关于element-plus自动导入和按需导入的相关资料,需要的朋友可以参考下2022-08-08
Vue动态数据实现 el-select 多级联动、数据回显方式
这篇文章主要介绍了Vue动态数据实现 el-select 多级联动、数据回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue学习之axios的使用方法,结合实例形式分析了vue.js axios库的功能及网络请求相关操作技巧,需要的朋友可以参考下2020-01-01
最新评论