关于单文件组件.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 相关文章推荐
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
详解iframe与frame的区别
Jan 13 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
网上书店创业计划书
2014/01/12 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书