关于单文件组件.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 26 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
vue基于Teleport实现Modal组件
May 31 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
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP中echo和print的区别
2014/08/28 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
大课间活动制度
2014/01/18 职场文书
实习老师离校感言
2014/02/03 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
退休欢送会主持词
2015/07/01 职场文书
个人售房合同协议书
2016/03/21 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python