关于单文件组件.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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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
文章推荐系统(三)
2006/10/09 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
js实现单张图片平移切换效果
2017/10/11 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
你应该知道的python列表去重方法
2017/01/17 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python多分支if语句的使用
2020/09/03 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
护理实习自我鉴定
2013/12/14 职场文书
八一建军节活动方案
2014/02/10 职场文书
2014年党支部工作总结
2014/11/13 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android