关于单文件组件.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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
用javascript实现自定义标签
May 08 Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
扩展你的 PHP 之入门篇
2006/12/04 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
对python字典过滤条件的实例详解
2019/01/22 Python
CSS3 简写animation
2012/05/10 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
职业培训师职业生涯规划
2014/02/18 职场文书
法律进企业活动方案
2014/03/04 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
林肯就职演讲稿
2014/05/19 职场文书
2015年人事科工作总结
2015/04/28 职场文书
交通安全温馨提示语
2015/07/14 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python