脚本宝典收集整理的这篇文章主要介绍了VUE学习，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1 vue

主要思想就是更新数据不用刷新页面

中国人写的

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。

只管视图层：html+css+js：给用户看，刷新后台数据

Vue是先加载模板，再渲染数据。（这里需要你把浏览器网络中的网络限制调成slow 3G，这样网速就比较慢了，就可以发现渲染过程）

第一步：

第二步：

css预处理器

php、js承载并发量比较小，所以干不掉java

npm install

项目综合管理工具，npm下载包，类似于maven

2 第一个VUE程序

MVVM:

runtime和compiler就是及时运行，及时编译，运用了虚拟DOM

首先导入vue的js代码

1.vue是一个类，首先要创建一个vue对象.

2.由于前后端分离了，所以数据data交给前端来绑定，相当于存的后端的数据。现在后台不给数据前端也能自己有数据了

3.这张图里面有两层view层和model层，viewmodel层在vm对象

4.按道理来说前端页面不刷新的情况下，是不能改变数据的，但是这里改变了，所以就是viewmodel层

其中el用于绑定标签#id或者@class

其中{{message}}就是模板，以后前端的html页面就是vue+模板了，数据由viewmodel去接收model的数据

绑定：{{message}}或者v-bind:xx=yyy例如：< span v-bind:title= "message " >，其中title是自己命名的是形参，也可以是官方的形参，例如href就绑定了

其中vm对象就是一个viewmodel，是双向绑定的，即前端页面传给viewmodel的值可以改变viewmodel，而后端传递给viewmodel 的值也可以改变前端（并且是瞬间完成，不需要再加载刷新前端页面）

以往，想要改变前端，必须重新请求页面

现在控制台的操作（console）可以让界面实时更新

所以，现在就是你前端能改变model中的数据，model中数据变了，前端内容就变了，并且，前端内容变了，也会让model中数据变化

这就是双向绑定。vue不改变DOM元素。只模板取值（就是虚拟dom）

综上VUE就是MVVM模型的实现者。他的核心就是DOM监听和数据绑定.

vue一共有7大对象（el；data..）

v-bind 简写为：

v-bind:value="name"

你看到的v-bind等被称为指令。指令带有前缀v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title特性和Vue 实例的message属性保持一致”。 如果你再次打开浏览器的JavaScript控制台，输入app.message = '新消息'，就会再一次看到这个绑定了title 特性的 HTML已经进行了更新。

v-if、v-else

注意这里必须使用===，因为js是弱语言

v-for

v-on自定义事件简写为@

可以自定义事件，也可以用官方定义好的

3 VUE绑定事件---methods

方法必须定义Vue 的Methods对象中，并且方法需要事件event驱动

调用方法

vue实现数据双向绑定

案例：

相当于吧input的值绑定（传递）给message变量

4 Vue组件

组件：自定义标签并让他合法

组件是可复用的vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:

拼装组合，数字一一对应，每一个小框都是一个组件，组件里面可以嵌套别的组件

案例:1：相当于你输入qinjaing就会显示hello

案例2：

<组件名 v-bind:组件定义的传参接收变量="传入参数">

案例3：

组件能添加自己的方法，并且组件里的事件只能直接绑定组件里定义的方法：

要想调用vue里面的方法，需要使用参数传递，自定义事件v-on:组件里的方法="vue里的方法"

this.$emit是自定义事件分发，可以绑定前端的自定义事件，也就是v-on的remove

5 网络通信Axios

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

Axios需要在vue的钩子函数中编写

链式编程是指xx.xxx.xxx.这种用“.”来调用的，axios得到的数据返回保存在response中，../data.json是返回上一级去获取数据

=>是浏览器ES6规范的新特性，ES6以下不支持

获取数据

这里data的return中你需要有你想要的参数，才能去获取，没有写的就不能获取

注意这里的data()是类方法，注意与data属性区分开了

解决vue加载慢，先显示模板的问题

这样就能不让用户看到加载模板的过程，加载模板时是白屏的

6 计算属性---computed

计算出来的结果，保存在属性中，内存中运行：虚拟DOM

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有 计算的能力（计算是动词)，这里的计算 就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存!

为什么需要用这个而不直接用方法呢？

以时间戳为例，如果是方法methods，每一次加载之后都会重新计算时间戳，耗费时间

如果是计算属性computed（可以直接作为vm的属性），在没有vm其他属性进行改变的时候，计算属性时间戳不会改变，而是在内存中存储上一次加载的时间戳，当vm中有属性改变时，计算属性才会重新计算。所以计算属性就相当于缓存，加快加载速度，对于一些简单的不需要经常计算的东西，可以用这个

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

7 slot 插槽组件

例如，我们想从后端加载书籍名称，但是书籍名都是在li标签中，我们以前用的在li标签中用v-for循环只能不断改变一个li标签中的内容

，又或者在ul标签，但是又没办法制造出多个li标签

8 第一个Vue-cli项目

vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架（模板）项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能:

• ·统一的目录结构
• 本地调试热部署
• ·单元测试
• 集成打包上线

1.首先需要安装node.js，并且安装完后就已经可以使用npm下载东西了，这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!

2.然后需要安装node.js淘宝镜像加速器（cnpm）

nmp install 类似于apt install或者pip instal下载包的

淘宝的cpnm可能下载之后在打包项目的时候会失败，所以一般国内下载还是用npm，下载国外的采用cnpm

安装位置改为了： C:Usersas8AppDataRoamingnpmnode_modulescnpmbincnpm

3.安装vue-cli

cnmp install vue-cli -g

4.使用

vue init webpack myvue #新建一个vue webpack项目

这是新建后的目录

5.在项目中执行npm install 下载依赖包

6.npm run dev跑当前项目

然后就可以访问网页了

9 webpack的 使用

webpack用于打包web项目,WebPack 是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS.图片等都作为模块来处理和使用。我们一般开发用es6规范，然后打包之后可以打包成es5规范项目（因为大部分浏览器只支持es5），

以前的js可能导入包会出现重名的情况，但是现在不会node.js遵守规范

使用'use strict'，使用严格检查模式，所以你需要设置一下用哪个规范支持这个严格检查模式

使用 webpack

使用study/vue/webpack-study项目

1.创建项目

2.创建一个名为modules的目录，用于放置JS模块等资源文件 3.在modules下创建模块文件，如hello.js，main.js（入口函数）用于编写JS模块相关代码

类似于java中的类，hello是对象，sayhi是对象的方法

4.编写webpack.config.js

module.exports = {
    entry: './modules/main.js' ,
    output: {filename: ".js/bundle.js"}

};

5.在终端执行webpack命令，如果失败就使用管理员模式

可以使用webpack --watch去监听变化，比如你修改了之后会自动帮你重新编译（使用ctrl+c停止此功能），类似于热部署

6.可以编写html页面去

10 VUE-router路由模块(页面跳转)

1.vue-router 会直接安装到node_modules下

这里导入vue和vue-router都是在modules里面

2.组件之间的导入

3.index.js不一定是主页，应该是主配置

4.index.js需要安装路由

使用Vue.use(VueRouter)

5.使用VUE-router

由于vue是前端工程，不需要后端来实现页面跳转，所以就需要这个router，相当于requestmapping

其中APP.vue（主页面index.html的默认加载组件）和main.vue是组件

注意这里的跳转不仅仅可以跳转页面，还可以显示组件，例如点击/content就会显示组件，如果去掉router-view页面就不会展示

这里就相当于以前的a标签，router-view是展示视图

使用这个router-view展示模板

main.js是总配置文件

11 快速实现vue网页

VUE和elementUI结合的非常紧密。可以结合一起开发

注意:命令行都要使用管理员模式运行 1、创建一个名为hello-vue 的工程vue init webpack hello-vue

选择Runtime + Compiler : recomerded for most users，然后一路no

2、安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

#进入工程目录
cd hello-vue
#安装vue-router
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装所有依赖（第一次安装这是最久的，20000多个文件）
npm install
#安装SAsS加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev

npm命令的解释：

对虚拟内存的理解

JS操作真实DOM的代价！

​ 用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

为什么需要虚拟DOM，它有什么好处?

​ Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，

​ 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

vue网页

app.vue是首页

错误

运行npm run dev报错

这样安装完后可能还会报错, 此时就需要卸载掉所有的 webpack webpack-cli webpack-dev-server

　　重新一起安装, 一定记住, 一起同时安装!!

npm i webpack webpack-cli webpack-dev-server -D

组件的第二种方式

类似于之前的这个，只是把组件中的模板拿出来了

一些个人理解

1.注意这里可以看做是组件,这是APP.vue的内容，这里表示在的位置显示网页跳转，也就是跳转其实就是把这个组件插入这里面，就会使得头部和边框不会动，只动跳转的地方

<template>
  <div>
<!--    头部-->
    <Header/>

<!--    侧边栏-->
    <div style="display: flex">
     <Aside/>
      <!--  主体-->
      <router-view/>
    </div>
  </div>
</template>

<script>
  import Header from "./components/Header";
  import Aside from "./components/Aside";

  export  default {
    name:"Layout",
    components:{
      Header,
      Aside
    }
  }
</script>

2.main.js中的#app绑定了index.html的<div id="app"></div>，并用App.vue内容替换div标签及其内容。

index.html在public文件夹里

3.组件的导入，相当于是把整个文件导入，使用scope表示css样式只在当前组件内有效，就不会影响其他的

脚本宝典总结

以上是脚本宝典为你收集整理的VUE学习全部内容，希望文章能够帮你解决VUE学习所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。