• Vue.js 中的 *.Vue文件


    vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计。(自底向上设计方法是根据系统功能要求,从具体的器件、逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接、修改和扩大,构成所要求的系统。)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

    什么是*.vue文件

    首先,用 vue-cli 脚手架搭建的项目,已经遇到了很多,如 index.vue 或者 App.vue 这一的文件了。如果是初次接触 vue 开发的同学,可能之前没有见过这个东西。*.vue 文件,是一个自定义的文件类型,用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。

    其中 <template> 和 <style> 是支持用预编译语言来写的。比如,在项目中就用了 scss 预编译,因此,是这样写的:

    Vue.js 中的 *.Vue文件
     

    工具/原料

     
    • JavaScript

    方法/步骤

     
    1.  

      html 也有自己的预编译语言, vue 也是支持的,不过一般来说,前端人员还是比较中意 html 原生语言。

      另外,在 App.vue 文件中,已经用一句 @import "./style/style"; 将样式给写到指定的地方去了。所以,在后面所有的我的文章中,是不会出现这个部分的内容的。所有样式,都会在 src/style/ 文件夹中对应的位置去写。这样做的好处是,不需要重复的引入各种 scss 基础文件,并且做到了项目的样式代码的可管控。

      *.vue 文件代码解析

      首先,来简单看一下:

      Vue.js 中的 *.Vue文件
    2.  

      以上就是一个简单的 *.vue 文件的基本结构。我们一部分一部分的来解释。

      template 部分

      以下,不再称呼它为 *.vue 文件了。改成为 vue 组件。首先,一个 vue 组件, template 则代表它的 html 结构,相信大家可以理解了。但是需要注意的是,不是说把代码包裹在 <template></template> 中就可以了,而是必须在里面方置一个 html 标签来包裹所有的代码。 本例子中,采用了 <div></div>标签。

      看到 <Header></Header> 这个代码的时候肯定很奇怪,这是个什么玩意儿。其实,这是一个自定义组件。我们在其他地方写好了一个组件,然后就可以用这种方式引入进来。同样 <Footer></Footer> 也是一个组件。

      script 部分

      首先,需要两个自定义组件,我们先引用进来。如下格式,比较好理解吧。

      Vue.js 中的 *.Vue文件
    3.  

      其次,除了引用的文件,我们将所有的代码包裹于如下的代码中间:

      Vue.js 中的 *.Vue文件
    4.  

      先引入了 Header 和 Footer 这两个组件的源文件,接下来,我们要把引用的组件给申明到 components 里面去。这样,我们就可以在 template 里面使用了。

      Vue.js 中的 *.Vue文件
    5.  

      data是数据演示代码,给了一个 list 的空数组数据。在 template 中,可以使用 this.list 来使用数据。这个后面的文章中会讲到,这里不去深入,认识它就可以了。

      Vue.js 中的 *.Vue文件
    6.  

      created 表示组件加载完成时,需要执行的内容。比如这里,让组件在加载完成时,执行一个叫 this.getData() 的函数。另外created是vuejs中的勾子函数之一。(具体的勾子函数请参考附录)

      Vue.js 中的 *.Vue文件
    7.  

      methods是这个组件的方法,也可以说是函数。比如,上面的代码就表示,组件自定义了一个叫 getData() 的方法函数。

      Vue.js 中的 *.Vue文件
    8.  

      tyle 部分

      这里比较简单,就是针对 template 里内容出现的 html 元素写一些样式。如下,代码:

      Vue.js 中的 *.Vue文件
    9.  

      到这里应该对 vue 组件文件有了一定的认知。后面的博文中,将会涉及到比较多的各种写法,因此,建议在阅读完本文后,花比较多的时间,去查看 vue 的官方文档。虽然文档你不一定能全部看懂,但要有一个大概的认识,否则下面的学习将会比较困难。

      附录

      勾子,可以理解为vuejs的生命周期,而函数则是生命周期内各个阶段的事件方法。如下图

      Vue.js 中的 *.Vue文件
  • 相关阅读:
    2015年要做的150件事
    再见2014,你好2015
    页面滚动事件的使用
    简单的进度条演示
    mybatis foreach批量处理
    mysql执行顺序
    spring声明式事务 同一类内方法调用事务失效
    Semaphore
    springmvc使用JSR-303对复杂对象进行校验
    springmvc全局异常后返回JSON异常数据
  • 原文地址:https://www.cnblogs.com/sea520/p/11756962.html
走看看 - 开发者的网上家园