vue项目学习

1、什么是.vue文件？

*.vue文件，是一个自定义的文件类型，用类似于HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言模块<template>,<script><style>。这三个部分分别代表了html,js,css。其中<template>和<style>是支持用预编译语言来写的。我们的项目用了“less”预编译，是这样写的

 

2、在App.vue文件中，已经用一句@import “./assets/style/components”;将样式给写到指定的地方去了。所有的样式都会在assets/style/components文件夹中对应的位置去写。这样做的好处是，不需要重复的引入各种less基础文件，并且做到了项目的样式代码的可管控

3、*.vue代码解析

这里就是一个*.vue文件的基本结构

template部分

下面，不再称呼*.vue文件了，改称为vue组件。首先，一个vue组件，template则代表它的html结构。需要注意的是，不是代码包含在<template></template>中就可以了，而是必须在里面放置一个html标签来包裹所有的代码。上面的截图例子中，采用了<div></div>标签。

script部分

会引入需要的组件，除了引用组件之外，我们会将所有的代码包裹在export default{}里面

引入组件之后，要在components:后面进行声明

data是数据演示代码

 

created表示组件加载完成时，需要执行的内容

methods是这个组件的方法，也可以说是函数。下边截图中的代码表示，组件自定义了一个叫getActivityCont的函数

style部分

就是写的样式