• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程04:根组件App.vue简介

    vue开发教程04:根组件App.vue简介

    作者: 分类:vue开发 点击: 77 次
    wordpress CMS主题:ssmay主题

      从vue项目的目录结构介绍中,我们了解到src目录是项目的核心文件目录,是我们开发vue项目所必须掌握的。所以,在后面的章节中,我们都是针对src目录来做介绍,如:组件、路由、数据绑定、请求数据、数据存储等等。本章,我们对App.vue根组件做一个简单介绍。

      一般情况下,一个组件文件由3部分组成:template模板代码、script代码、style代码。App.vue代码如下:

      <template>

      <div>
      <router-view></router-view>
      </div>

      </template>

      <script>

      export default {

             data(){     return{ }    }

      }

      </script>

      <style >
      </style>

      一:template模板部分:

      1、模板标签template内部只能有一个子标签(父节点),如上面代码中的<div>。如果有多个子标签,就会出错。

      2、<router-view></router-view>是子路由视图,是一个路由标签。路由对应的页面内容会显示在这里。如:路由对应的是分类页,就显示分类页的内容;如对应的是文章页,就显示文章页的内容。这个在后面的路由章节中将会详细解说。

      二:script代码部分:

      因为vue项目通常是用ES6代码来写的,所以,vue组件的script部分,需要用export default来导出。script部分的代码可以包含:data()数据、生命周期(如:mounted加载完成后)、conponents(组件声明)、methods(自定义方法)等等,这些将在后面的章节中,我们会经常用到。

      三:style代码部分:

      style代码部分,顾名思义,就是CSS样式代码部分。这里,我们可以直接添加当前组件纯CSS样式代码,默认是影响全局的,所以,最好是给template模板父节点添加一个ID或CLASS属性,然后针对这个属性下的子孙元素添加CSS样式,这样就只是局部样式了。或者在style标签上加scoped,定义作用域只在该组件下起作用,<style scoped></style>

      当然,这里也可以使用less、sass等CSS预处理语言,它们扩展了CSS,可以使用变量、函数等,使用CSS语言更加强大。不过,要想使用这些less或sass,需要安装 sass-loader依赖包,然后给<style>标签添加一个属性,如:<style lang="sass"></style>或<style lang="scss"></style>。sass与scss的区别:sass不能使用大括号和分号(使用缩进),而scss可以使用大括号和分号。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809196942.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.