关于单文件组件.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 相关文章推荐
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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/10/09 PHP
php 购物车实例(申精)
2009/05/11 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
django中模板的html自动转意方法
2018/05/27 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
网吧消防安全责任书
2014/07/29 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
关于JavaScript回调函数的深入理解
2021/06/27 Javascript