Vue入门

最新推荐文章于 2023-04-02 11:15:07 发布

DayDreamWMM

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量198

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/DayDreamWMM/article/details/87809085

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 环境搭建

安装node环境：

首先去官网下载node.js，传送门node.js下载地址，推荐下载长期支持版
在这里插入图片描述

Node.js下载完成之后，一步步默认安装就可以，安装完成之后，可以用命令行node -v 检测一下是不是安装成功了，如果出现下图类似信息，证明安装成功了。
在这里插入图片描述

当node环境安装成功之后，已经默认安装了npm包，这里也可以用命令行npm -v 检测一下，出现下面情况证明已经安装成功：

安装vue脚手架
安装命令：npm install -g @vue/cli
检测安装结果命令：vue --version
如图出现下图，说明vue脚手架安装成功，整个的vue环境也就搭建完成了。
在这里插入图片描述
2.新建一个vue项目
新建一个文件夹，用来存放vue项目，然后在当前文件夹下打开powershell，执行命令

 vue init webpack demo 项目是基于webpack的
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查js代码）：n
Set up unit tests（安装单元测试工具）：n
Setup e2e tests with Nightwatch（是否安装端到端测试工具）：n
Should we run npm install for you after the project has been created? (recommended)：回车。
cd demo(切换当项目目录下)
npm run dev （本地运行项目）

这样，一个简单的可运行的vue demo已经完成了。

3 项目目录：
用编译器打开这个demo项目，可以看到项目目录是这样的：
├─README.md
├─build // build脚本
├─config // prod/dev build config文件
├─index.html // 基础HTML页面
├─package.json // 依赖
│
├─src
│ │ App.vue // Vue实例
│ │ main.js // Vue入口文件
│ │
│ ├─assets //静态文件文件夹
│ │ logo.png
│ │
│ ├─components // 组件
│ │ HelloWorld.vue
│ │
│ └─router //路由
│ index.js
│
└─static
.gitkeep

4 组件结构

<!--组件模板-->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>{{data1}}</p>
    <router-view/> // 嵌套路由的一个入口
  </div>
</template>
<!--组件相关操作-->
<script>
export default {
  name: 'App',
  data () { // 要渲染到页面的数据
    return {
      data1: '测试'
    }
  },
  methods () { // 页面里面的事件和方法

  },
  created () { // 页面渲染之前的一个钩子（常用放获取接口数据的一些函数）

  },
  mounted () { // 页面渲染之后的一个钩子 （这个时候，页面已经生成，可以执行一些涉及到DOM节点的函数）

  }
}
</script>
<!--组件样式-->
<style scoped>
 /*组件里面的CSS样式，默认有一个scope的属性，scoped属性存在时，CSS样式只在当前组件有用*/
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6 组件化开发
开发过程中可以把一个页面拆分成一个一个的小组件，每一个组件都是一个.vue文件，组件像一个个积木一样，是可以复用的。
引入组件：import Component from './Component' // script区域
注册组件：components: {Component }
使用组件：<Component ><\Component >

7 组件间传参
考虑到组件的可复用性，那么组件里的数据应该是可以灵活变化的，所以可以通过传参的方式，把父组件的数据传到子组件，由子组件负责展示。这样组件就是一个纯的组件了，只负责数据的展示。
父组件代码：

<layout :headerTransform="hasHeaderBg" :title="title"><layout>

子组件代码：

props: { // 通过props接收到的变量，可以直接用在页面（也就是template）里面
    hasHeaderBg: {
      Boolean,
      default: true
    },
    title: {
      String,
      default: '少儿运营工作台'
    }
}

既然数据是从父组件传递过去的，假设这么一个情况，在子组件里对数据进行了某些操作，或者父组件的某些数据需要根据子组件的状态进行更改，这样就涉及到，数据的回流，vue里面叫子父传参，代码如下：
父组件：

<week-slider @dateClick="dateClickhandler($event)"
                   @changeMonthType="getMonthType($event)">
</week-slider>

子组件：

// html代码
 <div v-if="day.week !== null" @click.stop="dayClickHandle(day.date)"></div>

// JavaScript代码
 dayClickHandle (date) {
      this.$emit('dateClick', date)
    }

8 VueRouter

Vue Router 是vue.js官方的路由管理器。它和vue.js深度集成，让构成单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

通常一个Vue应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述
用vue.js + Vue Router创建单页应用，是非常简单的。使用vue.js我们是通过组合组件来组成应用程序，当要把Vue Router添加进来，我们需要做的是，将组件（components）映射到路由(routes)，然后告诉Vue Router在哪里渲染他们。
如果我们在创建项目的时候默认加入了Vue Router，那么在项目的src目录下是有一个router文件夹的，里面就是路由到组件的映射。渲染的地方就是项目的根节点，也就是入口组件App.vue里面的，这个标签是路由的出口，Vue Router识别到这个标签，就会在这里渲染路由映射的组件。
比较常用的就是嵌套路由/视图表，vue创建的是单页面应用，一个项目里所有的东西都是在一个页面里面的，当前显示在视图里的东西是由页面的路由决定的。所以当需要增加一个页面的时候，一定要增加相对应得路由，页面才会显示出来