【Web开发手礼】探索Web开发的秘密（十四）-Vue2（1）Node.js的安装、Vue入门
创始人
2024-11-03 20:04:45
0次

主要介绍了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 部分