投稿
  1. 极客之音首页
  2. 技术随笔

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

Java光头强 • • 技术随笔 • 阅读 244

导读：本篇文章讲解 Vue.js的快速入门（Vue、axios、node、js、npm、wepback的快速入门），希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

目录

一.Vue.js 是什么

二.Vue的demo快速入门

三.Vue的语法

 四.Vue组件(重点)

五.Vue实例的生命周期

六.axios

七.Node.js

八.npm包管理工具

九.模块化

十.Webpack打包工具

学习前置条件：html.css.Javascript都已了解，Es6语法快速入门可以看完另外一篇文章：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>

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

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

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

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

 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>

默认为勾选：

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

 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.js的快速入门（Vue、axios、node、js、npm、wepback的快速入门）

 四.Vue组件(重点)

1.Vue组件有什么作用？

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

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

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.js的快速入门（Vue、axios、node、js、npm、wepback的快速入门）

五.Vue实例的生命周期

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

 两个常用的：

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：

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

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

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

输出：

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

七.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/');

在终端中输入命令：

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

 访问127.0.0.2：8888：

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

八.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)

控制台输出：

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/116143.html

赞 (0)
Java光头强的头像Java光头强
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！