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

落日映苍穹つ 2023-10-03 19:24 4阅读 0赞

**目录**

一.Vue.js 是什么

二.Vue的demo快速入门

三.Vue的语法

四.Vue组件(重点)

五.Vue实例的生命周期

六.axios

七.Node.js

八.npm包管理工具

九.模块化

十.Webpack打包工具

学习前置条件：html.css.Javascript都已了解，Es6语法快速入门可以看完另外一篇文章：[http://t.csdn.cn/OCgT6][http_t.csdn.cn_OCgT6]

## 一.Vue.js 是什么 ##

Vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

官方网站：[Vue.js][]

## 二.Vue的demo快速入门 ##

步骤：

1.将vue.js包放到到项目目录下

2.使用vccode创建新的html文件，输入！会自动填充vue的初始模板

3.Vue的基本模板：

<!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>

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

![26dfde3250824814bd683db5ebeadc93.png][]

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

![6b2389b1128641a2ac0cc86ecd795c0a.png][]

**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**

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

默认为勾选：

![087b6316e0e848ed9f1917cde3b7cc93.png][]![2a3b77cab79e4fafaf40b8fc7031bf34.png][]

**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>

输出：

![e68eb225eddd4dc3a87a8a4094bec3ee.png][]

## 四.Vue组件(重点) ##

**1.Vue组件有什么作用？**

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

![6ebcebed6e0049edbb0a887c81d3c02b.png][]

**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>'
     })

然后在页面中引入

显示：

![7d4c54a4151a41988f501ada7ff471f2.png][]

## 五.Vue实例的生命周期 ##

![28b304ddc821438c871caf74eb05320a.png][]

**两个常用的：**

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：**

![7732b751be674fb7bbe4b659ec0682da.png][]

## 六.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的包含的数据

![eed5643d0e1b40b1a2be61a44d2b4a78.png][]

输出：

![5232da4005ac44738ff391b3e7c3c77d.png][]

## 七.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.js 1]

查看版本：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/');

在终端中输入命令：

![1595dc452d1c4d919aa1abb6437ac556.png][]

访问127.0.0.2：8888：

![bc3e8d80349e4797bdb410efba3f7916.png][]

## 八.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(下载镜像)**

此处若出现错误，就把C盘下用户目录.npmrc文件删除

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)

控制台输出：

![0a84fbdda4484a2dbf476da8ca723384.png][]

## 十.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文件

[http_t.csdn.cn_OCgT6]: http://t.csdn.cn/OCgT6
[Vue.js]: https://cn.vuejs.org
[26dfde3250824814bd683db5ebeadc93.png]: https://img-blog.csdnimg.cn/26dfde3250824814bd683db5ebeadc93.png
[6b2389b1128641a2ac0cc86ecd795c0a.png]: https://img-blog.csdnimg.cn/6b2389b1128641a2ac0cc86ecd795c0a.png
[087b6316e0e848ed9f1917cde3b7cc93.png]: https://img-blog.csdnimg.cn/087b6316e0e848ed9f1917cde3b7cc93.png
[2a3b77cab79e4fafaf40b8fc7031bf34.png]: https://img-blog.csdnimg.cn/2a3b77cab79e4fafaf40b8fc7031bf34.png
[e68eb225eddd4dc3a87a8a4094bec3ee.png]: https://img-blog.csdnimg.cn/e68eb225eddd4dc3a87a8a4094bec3ee.png
[6ebcebed6e0049edbb0a887c81d3c02b.png]: https://img-blog.csdnimg.cn/6ebcebed6e0049edbb0a887c81d3c02b.png
[7d4c54a4151a41988f501ada7ff471f2.png]: https://img-blog.csdnimg.cn/7d4c54a4151a41988f501ada7ff471f2.png
[28b304ddc821438c871caf74eb05320a.png]: https://img-blog.csdnimg.cn/28b304ddc821438c871caf74eb05320a.png
[7732b751be674fb7bbe4b659ec0682da.png]: https://img-blog.csdnimg.cn/7732b751be674fb7bbe4b659ec0682da.png
[eed5643d0e1b40b1a2be61a44d2b4a78.png]: https://img-blog.csdnimg.cn/eed5643d0e1b40b1a2be61a44d2b4a78.png
[5232da4005ac44738ff391b3e7c3c77d.png]: https://img-blog.csdnimg.cn/5232da4005ac44738ff391b3e7c3c77d.png
[Node.js]: https://nodejs.org/en/
[Node.js 1]: http://nodejs.cn/
[1595dc452d1c4d919aa1abb6437ac556.png]: https://img-blog.csdnimg.cn/1595dc452d1c4d919aa1abb6437ac556.png
[bc3e8d80349e4797bdb410efba3f7916.png]: https://img-blog.csdnimg.cn/bc3e8d80349e4797bdb410efba3f7916.png
[0a84fbdda4484a2dbf476da8ca723384.png]: https://img-blog.csdnimg.cn/0a84fbdda4484a2dbf476da8ca723384.png