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部分

就是写的样式

猜你喜欢

转载自blog.csdn.net/Sun_of_Rainy/article/details/88823497
今日推荐