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

主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！

文章目录

前言

Node.js安装

选择安装目录

验证NodeJS环境变量

配置npm的全局安装路径

切换npm的淘宝镜像

安装Vue-cli

编辑 Vue2入门

vue.js%E6%96%87%E4%BB%B6-toc" style="margin-left:40px;">引入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%E6%96%87%E4%BB%B6">引入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页面渲染成功。（发送请求到服务端，加载数据）

总结

主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！