【Web开发手礼】探索Web开发的秘密（十四）-Vue2（1）Node.js的安装、Vue入门
创始人
2024-11-03 20:04:45
主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！
文章目录
前言
Node.js安装
选择安装目录
验证NodeJS环境变量
配置npm的全局安装路径
切换npm的淘宝镜像
安装Vue-cli
编辑 Vue2入门
引入vue.js文件
入门代码
常用指令
生命周期
总结
前言
主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！
Node.js安装
安装地址
选择安装目录
选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）
验证NodeJS环境变量
NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过：
node -v
配置npm的全局安装路径
使用管理员身份运行命令行，在命令行中，执行如下指令：
npm config set prefix "安装路径"切换npm的淘宝镜像
使用管理员身份运行命令行，在命令行中，执行如下指令：
npm config set registry https://registry.npm.taobao.org安装Vue-cli
npm install -g @vue/cli这个过程中，会联网下载，可能会耗时几分钟，耐心等待。
Vue2入门
引入vue.js文件
我们可以通过下载路径直接下载vue.js文件，然后放到script文件夹下面，通过script标签引入。
也可以引入在线路径vue.js文件
入门代码
Document {{message}} 
常用指令
指令：HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
Document 
通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
- v-if
Document 经判定为： 年轻人 35 && age < 60">中年人 老年人 
- v-show
年龄{{age}},经判定为: 年轻人 
{{addr}} {{index + 1}} : {{addr}} data: { . . . addrs: ['北京','上海','广州','深圳','成都','杭州'] }, 
Document 编号 姓名 年龄 性别 成绩 等级 {{index+1}} {{user.name}} {{user.age}} 男 女 {{user.score}} = 85">优秀 = 60">及格 不及格
Body 内容
: HTML 主体部分，包含页面的可见内容。- : Vue.js 应用的根元素，用来绑定 Vue 实例。
: 表格元素，用于显示用户数据。
: 表格行，包含表头和用户数据。 : 表头单元格，显示表格列的标题。 - 列标题: 编号、姓名、年龄、性别、成绩、等级。
: 表格数据单元格，显示具体的用户信息和计算出的等级。 {{ expression }}: Vue.js 插值表达式，用于在表格中动态显示 Vue 实例中的数据。{{ index + 1 }}: 显示用户的编号。{{ user.name }},{{ user.age }},{{ user.score }}: 显示用户的姓名、年龄和成绩。- 条件渲染 (
v-if,v-else-if,v-else): 根据用户的性别和成绩显示不同的内容，如性别（男或女）和成绩等级（优秀、及格、不及格）。
Vue.js 部分
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）
总结
主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！
相关内容
热门资讯裸辞做“一人公司”，我后悔了 去年这个时候，一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品，一个让任...南京建成国内首个Pre-6G试... 4月21日，2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前，一名远在北京的工作人员...超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”，探讨分享优质内容传播，服务万千学员。 ...摩托罗拉Razr 2026（R... IT之家 4 月 22 日消息，摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...库克卸任，特纳斯领航：苹果新纪... 苹果首席执行官蒂姆·库克将卸任，硬件工程主管约翰·特纳斯将接任，苹果公司今天宣布此事。 库克将在夏季...