vue学习

基础概念什么是Vue?

概念定义:

  • 渐进式JavaScript框架。

  • web前端框架。

特点:

  • 简单易学,性能优秀。
  • 提升开发体验。
  • 适用场景广泛。

封面

为什么使用Vue?

Vue.js 是一款构建用户界面的渐进式框架,它的设计目的是简化 web 开发。Vue.js 使用简洁的、声明式的代码来描述用户界面和交互。Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定到底层的 Vue 实例的数据上。

使用 Vue.js 的好处如下:

  1. 简洁:Vue.js 简洁的代码和易用的语法使得学习、理解和维护都更加容易。

  2. 声明式:Vue.js 使用基于 HTML 的模板语法,开发者只需要关心界面应该是什么样的,不需要关心实现细节。

  3. 组件化:Vue.js 将应用程序分为组件,使得代码更加模块化,易于维护和扩展。

  4. 响应式:Vue.js 使用响应式设计,当数据发生变化时,视图会自动更新,开发者不需要手动更新 DOM。

  5. 性能优化:Vue.js 使用虚拟 DOM,在实际 DOM 更新之前,先在内存中模拟一次 DOM 更新,这样可以减少不必要的 DOM 操作,提高性能。

总的来说,Vue.js 是一款功能强大、易于使用的框架,可以帮助开发者更轻松地构建复杂的用户界面。

学习Vue前建议掌握的知识

首先前端老三件套:

  • HTML 网页基本结构。
  • CSS 让页面更美观。
  • JavaScript 让页面动起来。

Ajax 无刷新的和服务器交互。

Vue大觅项目的技术栈的几个现代化技术

  • Node 环境:作为前端技术的基础环境,大部分技术都依赖于Node.js。
  • 包管理工具 NPM:它是随Node.js一起安装的,用于管理项目中的依赖包。
  • Vue-cli:用于初始化Vue项目,是Vue.js框架的标准开发工具。
  • UI框架 iView:与Vue框架搭配使用,可以大大节约开发时间和成本。
  • 页面路由 vue-router:用于处理单页面应用的路由。
  • 状态管理 VueX:用于Vue项目中的数据共享和管理。
  • ECMAScript 6:使用ES6语法编写JavaScript,提高代码的可读性和效率。
  • axios:Vue官方推荐的插件,用于发送异步请求。
  • Mock数据:由于大觅项目是前后端完全分离的,所以使用Mock数据来模拟后台数据。

Vue第一课,在Vue环境中执行Hello World

要从头开始配置Node环境并运行一个Vue的Hello World项目,请按照以下步骤操作:

1. 安装Node.js和npm

首先,确保你的电脑上安装了Node.js和npm。可以从Node.js官网下载并安装。

安装完成后,打开命令行工具(如终端或命令提示符),输入以下命令来验证安装是否成功:

node -v
npm -v

如果成功安装,命令行会显示Node.js和npm的版本号。

2. 安装Vue CLI

打开命令行工具(如终端或命令提示符),安装Vue CLI(Vue的命令行工具):

npm install -g @vue/cli

3. 创建Vue项目

使用Vue CLI创建一个新的Vue项目:

vue create hello-world

在创建过程中,会有一些选项让你选择,比如预设(默认配置或者自定义配置)、Vue版本等。这里选择默认配置即可。

4. 进入项目目录

创建完成后,进入项目目录:

cd hello-world

5. 运行项目

在项目目录下,运行以下命令来启动开发服务器:

npm run serve

运行成功后,命令行会显示一个本地服务器的地址,通常是 http://localhost:8080/

6. 访问项目

在浏览器中输入上述地址,你应该能看到Vue的Hello World页面。

项目结构简述

你的Vue项目目录结构大致如下:

hello-world/
├── node_modules/
├── public/
│ ├── favicon.ico
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ └── main.js
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

修改Hello World内容

如果你想修改显示的内容,可以编辑src/components/HelloWorld.vue文件,在<template>标签内修改文本内容。