vue页面基本组成

作为编写过html的人,vue页面的基本组成是什么呢?如何快速入手vue呢?我来讲下自己的思路。

简介:
vue是一个前端框架,运行它需要下载node.js(后台支撑),下载vs code(代码编辑器)来编辑代码。可配合eliment ui(上百度搜),快速开发前端页面。

以前写的网页是.html后缀,现在编写的是.vue后缀的文本文件。

下载好node,用node自带的仓库管理工具npm安装好vue后,在power shell中运行命令 vue ui。使用图形化工具即可创建项目。或者在power shell输入命令:vue init webpack vueProject1(你的项目名字),即可创建好项目。创建好vue项目后 按cirl + shift + ` (键盘上方1的旁边)调出终端terminal 后输入npm install 指令加载项目,加载成功后输入npm run dev 或 npm run serve指令启动vue项目。

正文:.vue后缀的文本包括三个部分。
1、 这里边放的就是html文件的body里放的东西,比如table、form、div块等等,我们想要在网页上展示什么,就在这里面写什么就可以了

2、


顾名思义,这里肯定放的就是java script方法了,其实还不精准。 import pageHeader from "@/components/pageHeader";用来引入文件或者其他文件中的方法。
export dafault{ } 又具体可分为4个 同级的 部分,不同的部分以英文逗号分割。下面一一讲解。
①、方法部分, 里面是手打的java script方法,示例:

methods:{
changeDate(){console.log("方法一")},
clear(){console.log("方法二")},
},

不同的方法间,以英文逗号分割。
②、数据部分,这里用来定义全局变量,只要在这里定义的变量,在methods部分的方法中,直接用 this. 属性名即可调用!属性要写在return里,不同属性以英文逗号分割。示例:

data(){
return{
      paramDate: "",
      dataValue: "",
      temporaryTable: [],
}},

③、vue生命周期方法。 一个生命周期,主要包括创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后这8个部分。每个部分都对应一个方法,具体用哪个看实际场景。

beforeCreate(){console.log("创建前")},
created(){console.log("创建后")},
beforeMount(){console.log("挂载前")},
mounted(){console.log("挂载后")},
beforeUpdate(){console.log("更新前")},
updated(){console.log("更新后")},
beforeDestroy(){console.log("销毁前)},
destroyed(){console.log("销毁后")},

注意,这8个方法不管写哪个,都是和data(){return{}},methods(){},是同级别的。
④、组件部分。 引入别的组件(别的vue文件)由import引入

components: { pageHeader, },

使用

 

3、就是写css样式的地方。

<style lang="scss" scoped>
// 宽按钮
.elbutton {
  width: 90%;
}
// 绿底白字
.greenwhite {
  background-color: #1dd2c1;
  color: white;
}
style>

调用方法

本文暂时就到这里啦,后续发现有不足,作者还会进行补充 欢迎大家交流hhh

你可能感兴趣的:(vue,vue.js)