网站首页 > 前端 > 正文

visual studio code node.js npm Vue.js前端框架技术学习总结

自动化运维软件前端 2024-04-29 3 0

一、认识Vue.js

前言

1、Vue.js的优点

2、学习Vue.js的基础

3、Vue.js的构建方式

4、Vue.js的安装与配置

二、Vue.js基本语法

1、插值表达式

2、v-bind

3、v-model

4、v-if 和 v-else-if

5、v-for

6、v-on

7、v-html

三、Vue.js组件

1、定义组件

2、使用组件

3、Props

4、Events

5、自定义事件

6、插槽 (Slots)

四、路由（router）插件

1、安装Vue Router

2、创建路由实例

3、定义路由

4、创建导航链接

5、显示路由对应的组件

6、启动路由

五、axios插件

1、安装Axios

2、在vue组件中引入axios

3、全局引入axios

4、使用axios发送请求

5、axios请求拦截器

六、项目实践练习

1、监听器deep选项

2、v-for指令练习--商品列表

3、表单元素结构渲染

一、认识Vue.js

前言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1、Vue.js的优点

（1）更高的运行效率：基于虚拟 DOM，可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化。（2）双向数据绑定：让开发者不用再去操作 DOM 对象，把更多的精力投入到业务逻辑上。（3）生态丰富、学习成本低：市场上有大量成熟、稳定的基于 Vue.js 的 UI 框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多。

2、学习Vue.js的基础

（1）熟悉 HTML/CSS/JavaScript 等前端开发技术：这是学习 Vue.js 的基础。（2）初步掌握 JSON，闭包，AJAX 等JavaScript技术：这些技术会对 Vue.js 的学习有所帮助。（3）事先掌握一些 ES6 的知识：Vue.js 中广泛使用了 ES6 的新特性。

3、Vue.js的构建方式

（1）独立构建（Stand-alone Build）: 独立构建包含了 Vue 的编译器，它可以将 Vue 组件的模板（template）转换为最终在浏览器中呈现的 DOM 元素。这种构建方式通常用于开发环境，因为它包含了所有必要的编译器功能，使得开发者可以充分利用 Vue 的特性。独立构建的 Vue.js 文件通常较大，因为它包含了编译器。（2）运行构建（Runtime Build）: 运行构建不包含 Vue 的编译器，它只包含了运行时所需的代码。这种构建方式通常用于生产环境，因为它更轻量，减少了文件大小，提高了加载速度。运行构建的 Vue.js 文件通常较小，但它需要开发者提前将模板编译为 JavaScript 模板字符串，然后在运行时使用 new Vue() 创建 Vue 实例时提供这些编译后的模板。

为了提高开发效率，Vue 推荐使用 Vue CLI（Vue 的命令行工具）来搭建项目。Vue CLI 可以自动处理依赖项和构建过程，使得开发者可以专注于编写代码，而不是花费时间在配置和构建工具上。

4、Vue.js的安装与配置

安装 Node.js 和 npm

1. 访问 Node.js 官方网站（https://nodejs.org/）并下载适合操作系统的 Node.js 版本。 2. 安装 Node.js，它通常会自动安装 npm。 3. 打开命令行工具（在 Windows 上是 Command Prompt 或 PowerShell，在 macOS 和 Linux 上是 Terminal）。 4. 输入以下命令以检查 Node.js 和 npm 是否已正确安装： node -v npm -v 如果安装成功，命令将返回安装的版本号。

安装 Vue CLI

Vue CLI（命令行工具）是官方提供的标准工具，用于快速搭建 Vue.js 项目。可以使用 npm 来安装 Vue CLI： npm install -g @vue/cli

创建一个新的 Vue.js 项目

使用 Vue CLI 创建新项目的命令是 `vue create`。可以通过以下命令创建一个新项目，并在提示时选择所需的配置： vue create my-vue-project

项目结构

创建的项目将包含以下结构： - `node_modules/`: 依赖包目录 - `public/`: 静态资源 - `src/`: 源代码 - `assets/`: 资源如图片、样式等 - `components/`: Vue 组件 - `App.vue`: 主组件 - `main.js`: 入口文件 - `package.json`: 项目的依赖和脚本信息 - `README.md`: 项目文档 - `.gitignore`: Git 忽略文件列表

运行项目

在项目目录中，可以使用以下命令来启动开发服务器： npm run serve 这将启动一个热重载的本地开发服务器，可以通过浏览器访问 `http://localhost:8080`（或命令行工具中提示的其他端口）来查看 Vue.js 应用。

构建和部署

当准备好将项目部署到生产环境时，可以在项目目录下运行以下命令来构建生产版本的应用： npm run build 构建完成后，`dist/` 目录将包含可用于部署的所有静态文件。

二、Vue.js基本语法

1、插值表达式

Vue.js 使用双大括号语法 {{ }} 作为插值表达式，用于将数据绑定到模板中：

2、v-bind

v-bind 指令用于绑定属性值，例如 href、title 等：

Click me

3、v-model

v-model 指令用于在表单元素上创建双向数据绑定：

4、v-if 和 v-else-if

v-if 指令用于条件渲染，如果条件为真，则渲染元素：

This is an A

v-else-if 用于多个条件渲染：

This is an A

This is a B

5、v-for

v-for 指令用于基于一个数组渲染列表：

6、v-on

v-on 指令用于绑定事件监听器，可以使用简写形式 @：

Click me

7、v-html

v-html 指令用于将数据作为 HTML 元素插入到 DOM 中：

三、Vue.js组件

组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。

组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

1、定义组件

在 Vue.js 中，你可以使用 Vue.component() 全局注册一个组件，也可以在组件内部局部注册组件。以下是全局注册一个组件的例子：

Vue.component('my-component', {

This is a component!

data() {

return {

}

methods: {

increment() {

this.count++;

}

});

2、使用组件

在模板中，你可以像使用 HTML 标签一样使用自定义组件：

3、Props

组件可以接收外部传递的属性，这些属性被称为 props。在定义组件时，你可以指定 props：

Vue.component('my-component', {

props: ['message'],

});

在父组件中传递 props：

4、Events

组件可以通过 $emit 方法触发事件，将信息传递给父组件。在父组件中，你可以监听这些事件：

this.$emit('my-event', someData);

在父组件中监听事件：

5、自定义事件

除了使用 $emit 触发事件，Vue.js 还允许使用 v-on 指令在组件内部监听事件：

6、插槽 (Slots)

组件可以通过插槽来分发内容。在组件模板中，你可以使用元素来定义插槽，父组件可以提供内容来填充这些插槽：

Vue.component('my-component', {

});

在父组件中使用插槽：

This is some content for the component.

动态插槽 Vue.js 还支持动态插槽，允许根据条件渲染不同的内容：

Vue.component('my-component', {

data() {

return {

text: 'Hello'

}

});

在父组件中使用动态插槽：

四、路由（router）插件

路由实例（Router）：创建一个路由实例，用于配置整个应用的路由。路由定义（Routes）：定义路由组件和路径的映射关系。导航链接（Navigation Links）：使用组件创建导航链接。路由出口（Route Views）：使用组件显示当前路由对应的组件。

1、安装Vue Router

npm install vue-router

2、创建路由实例

import Vue from 'vue';

import Router from 'vue-router';

Vue.use(Router);

3、定义路由

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About },

// ...更多路由

];

4、创建导航链接

Home

About

5、显示路由对应的组件

6、启动路由

const router = new Router({

routes // 简写，等价于 routes: routes

});

new Vue({

router,

render: h => h(App)

}).$mount('#app');

五、axios插件

1、安装Axios

npm install axios

2、在vue组件中引入axios

import axios from 'axios';

export default {

data() {

return {

// 数据

};

methods: {

fetchData() {

axios.get('/api/data')

.then(response => {

// 处理成功响应

})

.catch(error => {

// 处理错误响应

});

}

};

3、全局引入axios

import Vue from 'vue';

import axios from 'axios';

Vue.prototype.$http = axios;

new Vue({

// Vue 实例选项

}).$mount('#app');

4、使用axios发送请求

this.$http.get('/api/data')

.then(response => {

// 处理响应数据

})

.catch(error => {

// 处理错误

});

this.$http.post('/api/data', {

// 发送的数据

})

.then(response => {

// 处理响应数据

})

.catch(error => {

// 处理错误

});

5、axios请求拦截器

this.$http.interceptors.request.use(config => {

// 在发送请求之前做些什么

return config;

}, error => {

// 对请求错误做些什么

return Promise.reject(error);

});

this.$http.interceptors.response.use(response => {

// 对响应数据做点什么

return response;

}, error => {

// 对响应错误做点什么

return Promise.reject(error);

});

六、项目实践练习

1、监听器deep选项

2、v-for指令练习--商品列表

3、表单元素结构渲染

参考文章

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

前端框架 vue.js 学习 visual studio code node.js npm

本文由用户于 2024-04-29 发布在金钥匙，如有疑问，请联系我们。
本文链接：https://www.51969.com/post/18815994.html

金钥匙

visual studio code node.js npm Vue.js前端框架技术学习总结

vue.js javascript 前端 vue 前端框架 v-bind详解与常见用法

UI组件库、前端框架、UI框架、前端库，脑瓜嗡嗡的？一文解决

发表评论取消回复

金钥匙

visual studio code node.js npm Vue.js前端框架技术学习总结

vue.js javascript 前端 vue 前端框架 v-bind详解与常见用法

UI组件库、前端框架、UI框架、前端库，脑瓜嗡嗡的？一文解决

相关文章

发表评论取消回复