阅读量:0
主要介绍了Node.js的安装教程、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> 入门代码
<!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常用的一些指令、声明周期！！！
