vue学习
vue学习
叶玖洛·星尘基础概念什么是Vue?
概念定义:
渐进式JavaScript框架。
web前端框架。
特点:
- 简单易学,性能优秀。
- 提升开发体验。
- 适用场景广泛。
为什么使用Vue?
Vue.js 是一款构建用户界面的渐进式框架,它的设计目的是简化 web 开发。Vue.js 使用简洁的、声明式的代码来描述用户界面和交互。Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定到底层的 Vue 实例的数据上。
使用 Vue.js 的好处如下:
简洁:Vue.js 简洁的代码和易用的语法使得学习、理解和维护都更加容易。
声明式:Vue.js 使用基于 HTML 的模板语法,开发者只需要关心界面应该是什么样的,不需要关心实现细节。
组件化:Vue.js 将应用程序分为组件,使得代码更加模块化,易于维护和扩展。
响应式:Vue.js 使用响应式设计,当数据发生变化时,视图会自动更新,开发者不需要手动更新 DOM。
性能优化: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 |
如果成功安装,命令行会显示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/ |
修改Hello World内容
如果你想修改显示的内容,可以编辑src/components/HelloWorld.vue
文件,在<template>
标签内修改文本内容。