【Web开发手礼】探索Web开发的秘密（十四）-Vue2（1）Node.js的安装、Vue入门

news2025/1/18 16:55:20

主要介绍了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标签引入。

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

也可以引入在线路径vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

入门代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>

     new Vue({
        el: '#app',
        data: {
            message: 'hello Vue'
        }
    })
</script>
</html>

常用指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">百度</a><br>
        <a :href="url">百度</a>
    </div>
</body>
<script>

     new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>
</html>

<input type="text" v-model="url">

通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

<input type="button" value="按钮" v-on:click="handle()">

<input type="button" value="按钮" @click="handle()">
<script>
    new Vue({
        el: "#app",
        data: {
	//...
        },
        methods: {
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model:age = "age">经判定为：
        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="age > 35 && age < 60">中年人</span>
        <span v-else>老年人</span>

    </div>
</body>
<script>

    new Vue({
        el: '#app',
        data: {
            age: 60,
        },

        methods: {
            handle:function(){
                alert("被点击")
            }
        },

    })
</script>
</html>

v-show

年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>

<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
data: {
   . . .
   addrs: ['北京','上海','广州','深圳','成都','杭州']
},

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender === 1 ">男</span>
                    <span v-else-if="user.gender === 2 ">女</span>
                </td>
                <td >{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span v-else style="color: red;">不及格</span>
                </td>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {

        }
    })
</script>

</html>

Body 内容

<body>: HTML 主体部分，包含页面的可见内容。
- <div id="app">: Vue.js 应用的根元素，用来绑定 Vue 实例。
  - <table>: 表格元素，用于显示用户数据。
    - <tr>: 表格行，包含表头和用户数据。
      - <th>: 表头单元格，显示表格列的标题。
        列标题: 编号、姓名、年龄、性别、成绩、等级。
      - <td>: 表格数据单元格，显示具体的用户信息和计算出的等级。
        {{ expression }}: Vue.js 插值表达式，用于在表格中动态显示 Vue 实例中的数据。
        {{ index + 1 }}: 显示用户的编号。
        {{ user.name }}, {{ user.age }}, {{ user.score }}: 显示用户的姓名、年龄和成绩。
        条件渲染 (v-if, v-else-if, v-else): 根据用户的性别和成绩显示不同的内容，如性别（男或女）和成绩等级（优秀、及格、不及格）。

Vue.js 部分

<script>: 包含 Vue.js 实例的配置和逻辑。
- new Vue({}): 创建一个新的 Vue 实例。
  - el: "#app": 将 Vue 实例挂载到 id 为 "app" 的 DOM 元素上。
  - data: {}: Vue 实例的数据对象，包含一个名为 users 的数组，每个元素代表一个用户的信息。
  - methods: {}: 可以定义 Vue 实例的方法，目前示例中未定义具体方法。

生命周期

生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

<script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）