主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！
[编辑 Vue2入门](#编辑 Vue2入门)
前言
主要介绍了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>
入门代码
javascript
<!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...
javascript
<!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>
javascript
<input type="text" v-model="url">
通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
javascript
<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
javascript
<!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
javascript
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
javascript
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
data: {
. . .
addrs: ['北京','上海','广州','深圳','成都','杭州']
},
javascript
<!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 实例的方法，目前示例中未定义具体方法。
生命周期
- 生命周期：指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
javascript
<script>
new Vue({
el: "#app",
data: {
},
mounted() {
console.log("Vue挂载完毕,发送请求获取数据");
},
methods: {
},
})
</script>mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）
总结
主要介绍了Node.js的安装教程、Vue2常用的一些指令、声明周期！！！