Vue.js

最新推荐文章于 2024-11-09 21:44:05 发布

粗线条C

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量878

点赞数 22

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/2203_75463867/article/details/135302396

版权

本文介绍了Vue.js的基本概念，包括其作为JavaScript框架的特点、安装配置步骤、使用VueCLI构建项目的过程，以及关键指令的使用。从零基础开始，逐步引导读者入门并掌握Vue.js的核心技能。

摘要由CSDN通过智能技术生成

一、Vue.js概述

vue.js是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。 Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

二、Vue.js的安装配置

安装vue.js npm install vue -g 1 其中-g是全局安装,指安装到global全局目录去,如果不加-g,模块就会安装到当前路径下的node_modules文件夹下,没有目录则自动创建。如果出现了这个问题,是因为当前用户没有这个权限。网上有些方法是删除C:\Users\用户名\下的.npmrc文件,万万不可这样,因为那个文件删除了,我们前面修改的全局模块目录和缓存目录配置就没了!!!到时候vue包就下载到C:\Users\你的用户名\AppData\Roaming

pm去了,也就是默认的地方去了,那我们前面修改就没意义了。正确的打开方式是,用管理员身份运行呗! Win + s 搜索 “命令提示符”,右键以管理员身份运行。 npm install vue -g 1

Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了_怎么配置vue命令-CSDN博客参考链接：Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了_怎么配置vue命令-CSDN博客

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

三、第一个Vue.js实例

第一步：引入头文件

第二步：加入数据输出框

第三步：创建Vue对象，定义数据

案例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

// 第一步：引入vue.js

<script src="../js/vue.js"></script>

</head>

<body>

// 第二步：创建根节点

<div id="app">

</div>

<script>

// 第三步：初始化vue实例，绑定根节点

var app= new Vue({

el: "#app",

data: {

msg: "第一个vue实例!",

})

</script>

</body>

</html>

案例分析

1、示例参数分析

el : 元素挂载位置（值可以是css选择器，或者DOM元素）

data：数据模型（值是一个对象）

2、插值表达式用法

将值填充到HTML标签中

插值表达式支持基本的计算操（符合js代码规范即可。）

3、Vue代码运行原理分析

概述编译过程的概念（Vue语法->原生语法）

例如：插值表达式就在内部将其解析为js代码

Vue实例

在一个html文件中，我们直接可以通过script标签引入Vue.js，然后就可以在页面里写Vue.js代码了。上图中我们通过new Vue()构建了一个Vue的实例，在实例中，可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。不同的实例选项拥有不同的功能，如：

（1） el表明我们的Vue需要操作哪一个元素下的区域，'#demo'表示操作id为demo的元素下区域。

（2） data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。

（3） created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法

四、Vue.js的常用指令

概述：

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

（1） v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法

（2） v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法

（3） v-if: 用于根据表达式的值的真假条件渲染元素，如果上图P3为false则不会渲染P标签

（4） v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性

（5） v-for: 用于遍历数据渲染元素或模板，如图中P6为[1,2,3]则会渲染3个P标签，内容依次为1，2，3

（6） v-on: 用于在元素上绑定事件，图中在P标签上绑定了showP3的点击事件

小结：

Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。

五、Vue.js项目化

1、Vue CLi由三个主要的工具组成，分别是：

a>> CLI

CLI是一个npm包，通过Vue.js命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建）项目的话，你可以运行vue ui命令行来打开可视化界面。

b>> CLI Service

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

c>> CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。

2、环境准备

之前语法演示直接使用script引入Vue 3，从而在浏览器里实现所有调试功能。但实际项目中，使用专门调试工具。在项目上线之前，代码也需打包压缩，并考虑到研发效率和代码可维护性，所以在下面，需建立一个工程化项目实现这些功能。

3、工具

VS Code写Vue 3的代码
直接在Chrome浏览器里展示

4、下载配置

a>> 下载安装node,下载之后一步步默认安装即可

下载 | Node.js 中文网

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

b>> 下载安装VScode代码编辑工具

Visual Studio Code - Code Editing. Redefined

六、使用VueCli快速构建项目

卸载命令如下：

// 注意，第一次使用vue脚手架的同学可直接忽略此步骤

npm uninstall vue-cli -g

1、vue cli 脚手架的安装

// 通过npm全局安装@vue/cli脚手架 @3.10表示下载某个指定版本，如果不写，则下载最新版本

          npm install -g @vue/cli



PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

//安装淘宝镜像的命令行

          ① npm install -g cnpm --registry=https://registry.npmmirror.com

  // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ② cnpm install -g @vue/cli



//PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com