关于单文件组件.vue的使用


Posted in Javascript onSeptember 20, 2018

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也可以只针对组件生效,十分方便。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
js图片预加载示例
Apr 30 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 #Javascript
jQuery pjax 应用简单示例
Sep 20 #jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 #Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 #Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 #Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 #Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 #Javascript
You might like
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP微信支付实例解析
2016/07/22 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
Javascript之面向对象--方法
2016/12/02 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
简单实现python进度条脚本
2017/12/18 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
违反学校规定检讨书
2014/01/18 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
公司开会通知
2015/04/20 职场文书
违纪开除通知书
2015/04/25 职场文书
幼儿园见习总结
2015/06/23 职场文书
2015元旦感言
2015/12/09 职场文书