• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

VUE学习

开发技术 开发技术 3小时前 3次浏览

1 vue

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

中国人写的

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

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

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

第一步:

VUE学习

第二步:

VUE学习

css预处理器

VUE学习

VUE学习

VUE学习

VUE学习

VUE学习

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

npm install

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

2 第一个VUE程序

VUE学习

MVVM:

VUE学习

VUE学习

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

VUE学习

首先导入vue的js代码

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

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

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

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

VUE学习

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

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

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

VUE学习

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

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

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

VUE学习

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

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

VUE学习

综上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

VUE学习

VUE学习

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

v-for

VUE学习

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

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

3 VUE绑定事件—methods

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

VUE学习

调用方法

VUE学习

vue实现数据双向绑定

VUE学习

案例:

VUE学习

相当于吧input的值绑定(传递)给message变量

VUE学习

4 Vue组件

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

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

VUE学习

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

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

VUE学习

案例2:

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

VUE学习

案例3:

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

VUE学习

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

VUE学习

VUE学习

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

VUE学习

5 网络通信Axios

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

VUE学习

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

VUE学习

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

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

获取数据

VUE学习

VUE学习

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

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

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

VUE学习

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

6 计算属性—computed

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

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

VUE学习

VUE学习

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

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

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

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

7 slot 插槽组件

VUE学习

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

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

VUE学习

8 第一个Vue-cli项目

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

主要的功能:

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

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

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

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

VUE学习

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

安装位置改为了: C:Usersas8AppDataRoamingnpmnode_modulescnpmbincnpm

3.安装vue-cli

cnmp install vue-cli -g

4.使用

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

VUE学习

这是新建后的目录

VUE学习

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

VUE学习

6.npm run dev跑当前项目

然后就可以访问网页了

9 webpack的 使用

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

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

VUE学习

VUE学习

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

使用 webpack

使用study/vue/webpack-study项目

1.创建项目

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

VUE学习

类似于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和vue-router都是在modules里面

2.组件之间的导入

VUE学习

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

VUE学习

4.index.js需要安装路由

使用Vue.use(VueRouter)

5.使用VUE-router

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

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

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

VUE学习

VUE学习

VUE学习

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

VUE学习

VUE学习

使用这个router-view展示模板

VUE学习

main.js是总配置文件

VUE学习

11 快速实现vue网页

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

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

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

VUE学习

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命令的解释

VUE学习

对虚拟内存的理解

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

组件的第二种方式

VUE学习

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

VUE学习

一些个人理解

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学习
喜欢 (0)