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,vue单文件组件

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“关于单文件组件.vue的使用”

暂无“关于单文件组件.vue的使用”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。