主要介绍了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页面渲染成功。（发送请求到服务端，加载数据）
总结
主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！