NAIYAnana-优快云博客

原创 Vue CLI(脚手架)

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。一、安装脚手架注意：安装脚手架之前，系统中必须有NodeJS、Git、Webpack 有两个版本 2.X npm install vue-cli -g 4.X（注：cli后不加@4及为安装最新版） npm install @vue/cli@4 -g vue --version 或 vue -V 查看当前版本号二、创建项目利用命令创建 2.X vue init .

2022-05-25 20:28:44 177

原创 Vue Router

一、Vue Router概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。而传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由中有三个基本的概念 route, routes, router。 1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Ho

2022-05-21 20:43:08 351

原创 Vue组件

一、Vue组件概述组件：是由HTML、CSS、JavaScript所组成，是把网站中某块效果界面封装起来，提供了界面效果【代码】的复用性【类似于Bootstrap】 1.组件可以扩展HTML元素，封装可重用代码 2.在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能 3.所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周期钩子函数二、组件的注册方式组件的注册方式：1.全局注册；2.局部注册全局注册组件：

2022-05-18 19:52:25 282

原创 Vue进阶

一、computed高级 computed：计算属性 methods里的函数每次调用都会执行一次 computed里的函数第一次调用会执行后面再次调用则会从缓存中获取 getter：获取数据【当使用到了计算属性，就会自动执行get函数】 setter：设置数据【当更改了计算属性，就会自动执行set函数】注意：如果数据没有发生改变那么不会执行get含数，则会从缓存中获取数据 get函数必须有return methods函数每次一定会执行 <!DOCTYPE html>

2022-05-16 18:03:20 682

原创 V-model&计算属性

一、V-model 表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； <!DOCTYPE html> <html lang="en"> <head> <.

2022-05-13 21:09:34 3532

原创 Vue实现导航栏切换

使用Vue @mouseenter 鼠标移入事件 @mouseout鼠标移出事件实现导航栏鼠标移入移出效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="../public/vue.min.js"></script

2022-05-12 22:09:50 2843

原创 v-bind

插值表达式、v-text、v-html这些都是渲染数据，而且数据是渲染到标签体中的，但是如果想要渲染到属性中【更改属性值】，这些表达式和指令解决不了 v-bind：负责渲染数据到属性中【更改属性值】 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type=".

2022-05-11 20:59:12 138

原创 Vue简单运用

1.插值表达式插值表达式：数据绑定【插值表达式中一般指定变量，也可以指定表达式等等。】插值闪烁当数据不是预定义的时候，而是通过网络进行获取的，那么当网络延迟加载时，页面中会显示插值表达式的语法，等网络加载完毕后，数据进行渲染，这种现象称之为：插值闪烁 2.v-text&v-html <div id="app"> <h1 v-text="name"></h1> <h2 v-text="age"></h2...

2022-05-10 18:07:09 280

原创 Vue概述

一、什么是Vue？ Vue是一个渐进式的JavaScript框架，比较于传统的多页面应用Vue项目是单页面；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。二、MVVM设计模式 M：模型【后端响应的数据模型】 M：模型【后端响应的】 VM：视图模型三、虚拟DOM和真实DOM 我们之前人为操作DOM，都是真实DOM，而且DOM操作本来就对系统的性能有很大的影响 VM底层也是操作真实DOM，但是其中使用了虚拟DOM，整

2022-05-09 18:13:30 122

原创 Promise解决回调地狱

一、Promise是什么 Promise 其实是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从改对象获取异步操作的消息。可以用来解决回调地狱的问题。二、Promise的简单使用我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数, let f

2022-05-08 19:39:37 2628 1

原创 JS-回调地狱

一、什么是回调地狱前端的ajax和jsonp内部充斥着大量的异步，为了能够拿到异步的数据，使用了大量的回调函数，来获取将来异步执行成功之后的数据。如果请求不多时还好，一旦请求的数量达到一定程度，并且复杂度提升以后，会造成一些问题，这就是回调地狱。二、回调函数在发送Ajax中，客户端和服务器之间的请求和响应都是需要时间的，而我们要拿响应回来的数据就必须等响应完成，这些都是回调函数的常用场景。 let fs = require('fs'); // 【异步函数读取】 // 读取a文件 fs.

2022-05-07 18:00:03 2376

原创 WebPack入门

一、WebPack概述 webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。简单来说webpack是一个项目打包工具。二、为什么要使用WebPack 在日常的开发中经常在一个index.html页面中引入多个css，js文件，会导致页

2022-05-06 21:26:38 165

NAIYAnana的博客