初识 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 相关文章推荐
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
js图片预加载示例
Apr 30 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
详解JavaScript中的强制类型转换
Apr 15 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
react 生命周期实例分析
2020/05/18 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中将字典转换为列表的方法
2016/09/21 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
安全宣传标语口号
2014/06/06 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
行政前台岗位职责
2015/04/16 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android