Vue.js的快速入门（Vue、axios、node、js、npm、wepback的快速入门）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">  //一个div是一个范围
        {{message}}  //插值表达式，绑定vue中的数据
    </div>
 
    <script src="vue.min.js"></script>
 
    <script> //创建一个Vue对象
        new Vue({
            el: '#app',  //绑定Vue的作用范围
            data: {  //定义页面中的模型数据
                message: 'Hello'
            }
        })
    </script>
</body> 
</html>

三.Vue的语法

1.单向绑定v-bind和双向绑定v-model

单向绑定v-bind：单向绑定的变量修改后，不会影响其它调用相同变量的值

双向绑定v-model：双向绑定的变量修改后，其它调用相同变量的值也会被修改


<body>
    <div id="app">   
        <input type="text" v-bind:value="map.keyWord"/>
        <input type="text" v-model:value="map.keyWord"/>
        <p>{{map.keyWord}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                map: {
                    keyWord: '尚硅谷'
                }
            }
        })
    </script>
</body>

单向绑定修改值后，不影响其它调用相同变量的值

双向绑定修改值后，其它调用相同变量的值也会跟随改变

2.绑定事件v-on

绑定事件使用 v-on:事件=“方法名” 命令，可以触发methords中的方法


<body>
    <div id="app">   
       <button v-on:click="search()">查询</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                search(){
                    console.log("你好")
                }
            }
        })
    </script>
</body>

3.条件渲染v-if、v-else

可以做条件判断，如下例：做一个是否选中的判断


    <div id="app">   
       <input type="checkbox" v-model:value="ok">是否选择</input>
       <h1 v-if="ok">已选择</h1>
       <h1 v-else>未选择</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: true
            }
        })
    </script>
</body>

默认为勾选：

4.列表渲染v-for


<body>
    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
</div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                { id: 1, username: 'helen', age: 18 },
                { id: 2, username: 'peter', age: 28 },
                { id: 3, username: 'andy', age: 38 }
              ]
            }
        })
    </script>
</body>

输出：

四.Vue组件(重点)

1.Vue组件有什么作用？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

2.Vue组件的使用

（1）局部组件：定义的局部组件只能在当前页面中使用


<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            components: {    // 定义局部组件，这里可以定义多个局部组件
                'Navbar':  {  //组件的名字
                     template: '<ul><li>首页</li><li>学员管理</li></ul>'  //组件的内容
                        }
                    }
             })
    </script>
</body>

（2）全局组件：定义的局部组件可以在其它页面中使用

先创建一个新文件：


// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
 })

然后在页面中引入


<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="Navbar.js"></script>
    <script>
        var app = new Vue({
            el: '#app'
        })
    </script>
</body>

显示：

五.Vue实例的生命周期

两个常用的：

created方法是在数据渲染之前执行，mounted方法是在数据渲染之后执行


<body>
    <div id="app">
        hello
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            created(){
            console.log('页面渲染之前执行')
            },
            mounted(){
                console.log('页面渲染之后执行')
            }
        })
    </script>
</body>

查看F12：

六.axios

1.axios是什么？

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送

在node.js中可以向远程接口发送请求

2.axios的使用


<body>
    <div id="app">
        {{userList}}
    </div>
 
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[]
            },
            created(){
                this.getUserList() //在页面渲染之前执行getUserList()方法
            },
            methods: {
             // axios语法：axios.请求方式("请求接口路径").then(箭头函数).catch(箭头函数)
             //请求成功执行then方法，请求失败执行catch方法
                getUserList(){                
                    axios.get("aaa.json")     
                    .then(response => { //resonse是接口返回的数据
                        console.log(response)
                        //获取response中的数据赋给userList
                     this.userList=response.data.data.items 
                    })                       
                    .catch(error =>{
                        console.log('*****'+error)
                    })                  
                }
            }
        })
    </script>
</body>

F12可以看到response的包含的数据

输出：

七.Node.js

1.Node.js是什么

简单的说 Node.js 是JavaScript的运行环境，就像jdk是java的运行环境一样。JavaScript可以不用浏览器，直接使用Node.js运行JavaScript，它基于Google的V8引擎，V8引擎执行Javascript的性能。Node.js还模拟了tomcat服务器，可以用来做服务端应用开发。

官网：Node.js

中文网：Node.js 中文网

查看版本：node -v

2.Node.js快速入门

模拟服务器：


const http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

在终端中输入命令：

访问127.0.0.2：8888：

八.npm包管理工具

1.什么是nmp?

npm是Node.js包管理工具,相当于后端的Maven 。在下载Node.js的时候，npm会被一起下载到Node.js的安装目录下，也就是Node.js本身集成了npm

2.使用npm管理项目

第一步：npm init （初始化项目）


#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#我们也可以使用npm init -y命令，跳过初始化设置

确认后会生成一个package.json文件，这个是包的配置文件，相当于maven的pom.xml，我们之后可以根据需要进行修改。

第二步：修改npm镜像


#使用淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
 
#查看npm配置信息
npm config list

第三步：npm install(下载镜像)


npm install jquery        #安装依赖包的最新版
 
npm install jquery@2.1.x  #安装指定的版本
 
npm install               #根据package.json中的配置下载依赖，初始化项目

npm的其它命令


npm update 包名 #更新包（更新到最新版本）
npm update -g 包名 #全局更新
npm uninstall 包名 #卸载包
npm uninstall -g 包名 #全局卸载

九.模块化

1.什么是模块化

理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。

模块化规范：

ES5模块化规范

ES6模块化规范：ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行

2.ES5模块化规范

假设想在02.js中调用01.js，01.js内容如下：


// 定义成员：
const jia = function(a,b){
    return parseInt(a) + parseInt(b)
}
const jian = function(a,b){
    return parseInt(a) - parseInt(b)
}
// 设置哪些方法可以被其它模块调用
module.exports = {
    jia,
    jian
}

02.js内容如下


//引入模块，注意：当前路径必须写 ./
const m = require('./01.js')
const result1 =m.jia
const result2 = m.jian
console.log(result1, result2)

控制台输出：

十.Webpack打包工具

1.什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求

2.Webpack使用

（1）创建配置文件webpack.config.js


const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件名
    }
}

（2）执行编译命令，生成bundle.js文件


webpack #有黄色警告
webpack --mode=development #没有警告

（3）可以在其它模块直接导入bundle.js文件

相关阅读:
【专题学习】对比学习原理及代码
 JAVA——JVM中垃圾回收算法
 30天Python入门（第二十二天：Python爬虫基础）
ECCV 2022 | k-means Mask Transformer
全局前置路由守卫（beforeEach）
Web Audio API 第6章高级主题
 通过中断类型码求中断入口地址
 毕业季--写给大学毕业生的一番话
 docker安装mysql
从技术角度看待某物APP私删用户视频事件
原文地址：https://blog.csdn.net/w20001118/article/details/125475022