Vue入门

最新推荐文章于 2024-06-01 15:46:07 发布

追梦的男哥

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量1.2k

点赞数

分类专栏：大前端文章标签： vue.js javascript 前端框架

本文链接：https://blog.csdn.net/xinggongzi/article/details/121926511

版权

大前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 简介

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。
Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。
官方网站

2 Hello world

创建文件夹vue_pro
引入vue.js,或者下载后引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

创建 hello.html

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <div id="app">
        <!-- 插值表达式-->
        {{message}}
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                message:'hello vue'
            }
        })
    </script>

</body>
</html>

声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

2.1 使用vscode开发

创建工作区
创建代码片段

文件 => 首选项 => 用户片段 => 新建全局代码片段文件

{
	"vue html": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"    <script src=\"https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

3 基本语法

3.1 基本数据渲染和指令

<div v-bind:style="msg">单向绑定</div>
<div :style="msg">单向绑定</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg:'color:green;'
        }
    })
</script>

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写冒号（:）

3.2 双向数据绑定

v-model
当数据发生变化的时候，视图也会跟着发生变化
数据模型发生了改变，会直接显示在页面上
当视图发生变化的时候，数据也会跟着同步变化
用户在页面上的修改，会自动同步到数据模型中去

<div id="app">
    {{keyword}}
    <br/>
    <input type="text" :value="keyword"/>
    <br/>
    <input type="text" v-model="keyword"/>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword:'男哥学java'
        }
    })
</script>

3.3 事件

使用 v-on 进行事件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中。

<div id="app">
    <button v-on:click="show()">事件绑定1</button>
    <button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            show() {
                console.log("show.....")
            }
        }
    })
</script>

3.4 条件渲染

v-if
v-else

<div id="app">
    <input type="checkbox" v-model="ok"/>
    <br/>
    <div v-if="ok">选中了</div>
    <div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok:false
        }
    })
</script>

3.5 列表渲染

<div id="app">
    <div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
    <div v-for="(user,index) in userList">
        {{index}} -- {{user.name}} -- {{user.age}}
    </div>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
          userList:[ {"name":"lucy","age":20},{"name":"mary","age":30}]
        }
    })
</script>

3.6 实例生命周期

官网描述

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

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

4 axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)
GitHub：https://github.com/axios/axios
中文文档：http://www.axios-js.com/

4.1 实例

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
    <table>
        <tr v-for="user in userList">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList:[]
        },
        created() { //在页面渲染之前执行
            //调用方法，得到返回json数据
            this.getList()
        },
        methods:{
            getList() {
                //使用axios方式ajax请求
                axios.get("user.json")
                    .then(response => {//请求成功
                        //console.log(response)
                        this.userList =  response.data.data.items
                        console.log(this.userList)
                    }) 
                    .catch(error => {
                        console.log(error)
                    }) //请求失败
            }
        }
    })
</script>

5 element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建
官网： http://element-cn.eleme.io/#/zh-CN

6 Node.js介绍

6.2 什么是Node.js

浏览器的内核包括两部分核心：
- DOM渲染引擎
- JavaScript解析引擎

Chrome浏览器内置V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。
Node.js是一个基于Chrome V8引擎的JavaScript运行环境：即Node.js内置了Chrome的V8 引擎，可以在Node.js环境中直接运行JavaScript程序。
在Node.js中写JavaScript和在Chrome浏览器中写JavaScript基本没有什么不一样。哪里不一样呢？
Node.js没有浏览器API，即document，window的等。
加了许多Node.js 专属API，例如文件系统，进程，http功能。

6.3 Node.js有什么用

如果你想开发类似JavaWeb的简单的后端程序，那么学习Node.js是一个非常好的选择。
如果你想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。
通常它会被用来作一个BFF层，即 Backend For Frontend（服务于前端的后端），通俗的说是一个专门用于为前端业务提供数据的后端程序
官网：https://nodejs.org/en/
中文网：http://nodejs.cn/

7. BFF

用户体验适配器
BFF层的作用是让前端有能力自由组装后台数据，减少大量的业务沟通成本，加快业务的迭代速度。
无论是数据聚合还是数据剪裁，这类程序的特点是不需要太强大的服务器运算能力，但是对程序的灵活性有较高的要求，这两个特点都正好和Node.js的优势相吻合。

8. NPM包管理器

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

8.1 使用npm管理项目

#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

8.2修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

8.3 npm install命令的使用

8.3.1 基本命令

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
#默认参数：--save  简写  -S  将当前依赖保存在dependencies节点下
npm install jquery

8.3.2 下载特定版本的依赖

#如果安装时想指定特定的版本
npm install jquery@2.1.x

8.3.3 下载开发依赖

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint

8.3.4 下载全局依赖

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖，初始化项目

8.3.5 其它命令


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

9 Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

9.1 安装

npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli

安装后查看版本号
webpack -v

10 ES模块化的导入导出功能

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

10.1 导出

export指令用于导出变量，比如下面的代码

写法1

//info.js
export let name = 'why'
export let age = 18
export let height = 1.88

写法2

//info.js
let name = 'why'let age = 18
let height = 1.88
export {name，age，height}

写法3: export default
某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名。

// info.js
export default function (){
	console.log( 'default function');
}

我们来到main.js中，这样使用就可以了,这里的Func是我自己命名的，你可以根据需要命名它对应的名字.

import Func from './info.js'
Func()

另外，需要注意：
export default在同一个模块中，不允许同时存在多个。

10.2 导入

import指令用于导入模块中的内容，比如main.js的代码

import {name，age，height} from "./info.js"
console.log(name,age，height);

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：
通过*可以导入模块中所有的export变量
但是通常情况下我们需要给*起一个别名，方便后续的使用

import * as info from './info.js'
console.log(info.name，info.age，info.height，info.friends) ;

在HTML代码中引入两个js文件，需要将类型设置为module

<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>

追梦的男哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

vue入门1. 简介2 Hello world2.1 使用vscode开发3 基本语法3.1 基本数据渲染和指令3.2 双向数据绑定3.3 事件3.4 条件渲染3.5 列表渲染3.6 实例生命周期4 axios4.1 实例5 element-ui6 Node.js介绍6.2 什么是Node.js6.3 Node.js有什么用7. BFF8. NPM包管理器8.1 使用npm管理项目8.2修改npm镜像8.3 npm install命令的使用8.3.1 基本命令8.3.2 下载特定版本的依赖8.3.3 下载开
复制链接

扫一扫