初识 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中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
BootStrap前端框架使用方法详解
Feb 26 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将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python 利用toapi库自动生成api
2020/10/19 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
python实现简单的学生管理系统
2021/02/22 Python
智能钱包:Ekster
2019/11/21 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
个人自我评价范文
2014/02/05 职场文书
市场营销方案范文
2014/03/11 职场文书
第二课堂活动总结
2014/05/07 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
新闻学专业求职信
2014/07/28 职场文书
机关党员公开承诺书
2014/08/30 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js