初识 Vue.js 中的 *.Vue文件


Posted in Javascript onNovember 22, 2017

什么是Vue.js?

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 预编译,因此,我们是这样写的:

<style lang="scss">

html 也有自己的预编译语言, vue 也是支持的,不过一般来说,我们前端人员还是比较中意 html 原生语言,所以,我就不过多阐述了。

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

*.vue 文件代码解析

首先,我们来简单看一下:

<template>
  <div>
    <Header></Header>
    <div class="article_list">
      <ul>
        <li></li>
      </ul>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get('topics', null, r => {
        console.log(r)
      })
    }
  }
}
</script>
<style>
  .article_list {margin: auto;}
</style>

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

template 部分

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

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

script 部分

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

import Header from '../components/header.vue'
import Footer from '../components/footer.vue'

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

export default {
  // 这里写你的代码,外面要包起来。
}

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

components: { Header, Footer },

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

data () {
  return {
    list: []
  }
},

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

created () {
  this.getData()
},

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

methods: {
  getData () {
    this.$api.get('topics', null, r => {
      console.log(r)
    })
  }
}

更多关于vue的语法解释请参见:https://cn.vuejs.org/v2/guide/syntax.html

style 部分

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

<style>
.article_list {margin: auto;}
</style>

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

附录

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

 初识 Vue.js 中的 *.Vue文件

总结

以上所述是小编给大家介绍的初识 Vue.js 中的 *.Vue文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 #Javascript
基于JavaScript实现表格滚动分页
Nov 22 #Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 #Javascript
Vue官方文档梳理之全局配置
Nov 22 #Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 #Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 #Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 #Javascript
You might like
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
大学学风建设方案
2014/05/04 职场文书
自我查摆剖析材料
2014/10/11 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
志愿者个人总结
2015/03/03 职场文书
入党申请书格式
2019/06/20 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android