![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 85
学习笔记
guardwhy
这个作者很懒,什么都没留下…
展开
-
Vue.js-axios(网络模块封装)
1.1 为什么选择axios?axios 是一个基于 promise 的 HTTP库网络请求插件.基本特点可以用在浏览器==(测试网站:httpbin.org/)==和 node.js中支持 Promise API。自动转换 JSON 数据。客户端支持防御 XSRF。创建项目:vue init webpack axiostest,终端安装插件:cnpm install axios --save1.2 axios基本使用App.vue<template> <原创 2021-05-05 17:21:34 · 262 阅读 · 1 评论 -
Vue.js-vuex 详解
1.1 Vuex是做什么的?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。状态管理到底是什么?可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。原创 2021-05-05 02:16:24 · 669 阅读 · 2 评论 -
Vue.js-TabBar实现
1.1 项目目录创建项目: vue init webpack tabbardemo1.2 项目实现代码项目所需的图片:https://pan.baidu.com/s/1T0LxSsT4yGamy3giIKcNFw 提取码:bo79App.vue<template> <div id="app"> <!--使用组件--> <router-view></router-view> <main-tab-bar原创 2021-05-03 15:01:54 · 328 阅读 · 2 评论 -
Vue.js-vuerouter详解
1.1 什么是路由路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动。路由中有一个非常重要的概念叫路由表,路由表本质上就是一个映射表, 决定了数据包的指向。后端路由渲染(JSP)早期的网站开发整个HTML页面是由服务器来渲染的,服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。后端处理URL和页面之间的映射关系!!具体流程一个页面有自己对应的网址, 也就是URL。URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个控制器原创 2021-05-02 16:51:04 · 1581 阅读 · 0 评论 -
Vue.js-VueCLI详解
1.1 什么是Vue CLICLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。1.2 Vue CLI使用前提条件1.2.1 安装NodeJS可以直接在官方网站中下载安装,网址: http://nodejs.cn/download/默认情况下自动安装Node和NPM,Node环境要求8.9以上或者更高版本。检测安装的版本原创 2021-04-29 17:54:57 · 1043 阅读 · 1 评论 -
Vue.js- webpack 详解
1.1 什么是Webpack?从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。前端模块化在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件,CSS、图片、json文件等等在webpack中都可以被当做模块原创 2021-04-28 15:42:42 · 2763 阅读 · 14 评论 -
Vue.js-ES6模块化
1.1 export基本使用export指令用于导出变量export let name = 'kobe';export let age = 18;export let flag = true;上面的代码还有另外一种写法let name = 'kobe';let age = 18;let flag = true;export {name, age, flag}导出函数或类function test(num){ console.log(num);}class Per原创 2021-04-26 16:01:12 · 273 阅读 · 0 评论 -
Vue.js-插槽
10.1 为什么使用slot组件的插槽组件的插槽也是为了让封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么。slot基本使用在子组件中,使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容。代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2021-04-26 12:10:33 · 289 阅读 · 0 评论 -
Vue.js-组件通信
1.1 父组件向子组件传递真实的开发中,Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。子组件是不能引用父组件或者Vue实例的数据的。这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。props基本用法在组件中,使用选项props来声明需要从父级接收到的数据。props的值有两种方式方式一:字符串数组,数组中的字符串就是传递时的名称。方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。props传递案例原创 2021-04-26 10:09:57 · 144 阅读 · 2 评论 -
Vue.js-组件化开发
1.1 基本概念组件化是Vue.js中的重要思想。它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。 组件化思想的应用有了组件化的思想,我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理,并且扩展性也更强。1.2 组件化的基本使用组件的使用分成三个步骤创建组件构造器。注册组件使用组件。代码示例<!DOCTYPE html&原创 2021-04-25 17:19:58 · 278 阅读 · 0 评论 -
Vue.js-v-model
7.1 v-model基本使用Vue中使用v-model指令来实现表单元素和数据的双向绑定。案例的解析当输入框输入内容时,因为input中的v-model绑定了message。所以会实时将输入的内容传递给message,message发生改变。当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变。所以,通过v-model实现了双向的绑定。<!DOCTYPE html><html lang="e原创 2021-04-24 23:19:14 · 363 阅读 · 0 评论 -
Vue.js-购物车案例
1.1 项目目录 1.2 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车案列</title> <link rel="stylesheet" href="style.css"></head><body> <div id="app"> &l原创 2021-04-24 19:34:59 · 300 阅读 · 0 评论 -
Vue.js-过滤器和侦听器
1.1 filter过滤器1.1.1 什么是过滤器过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。数据加工车间,对值进行筛选加工。1.1.2 过滤器使用位置双括号插值内{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道将数据传输给过滤器进行过滤。加工操作v-bind绑定的值的地方<h1 v-bind:id=" msg | fi原创 2021-05-05 23:56:04 · 202 阅读 · 3 评论 -
Vue.js-基础语法
1.1 v-on指令基本特点作用:绑定事件监听器缩写:@预期:Function | Inline Statement | Object参数:event1.1.1 v-on的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-on的基本使用(监听事件)</title></head><body&原创 2021-04-24 19:02:21 · 195 阅读 · 0 评论 -
Vue.js- computed计算属性
1.1 computed作用但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示。减少运算次数, 缓存运算结果. 运用于重复相同的计算。1.2 计算属性基本使用计算属性是写在实例的computed选项中的。代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性的基本使用</title&原创 2021-04-23 21:48:42 · 629 阅读 · 0 评论 -
Vue.js- 常用的指令
3.1 Mustache语法{{}}: 插值表达式通常用来获取Vue实例中定义的数据(data),属性节点中 不能够使用插值表达式。el: 挂载点类型: String | HTMLElement定义 Vue实例挂载的元素节点,表示vue接管该区域。1、Vue的作用范围是什么 ?Vue会管理el选项命中的元素,及其内部元素。2、el选择挂载点时,是否可以使用其他选择器 ?可以,但是建议使用 ID选择器。3、是否可以设置其他的DOM元素进行关联 ?可以但是建议选择DIV, 不能使用原创 2021-04-23 18:00:45 · 242 阅读 · 0 评论 -
Vue.js-初体验
1.1 Vue.js 介绍1.1.1 Vue.js是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计 为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一 方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。官方网站: https://cn.原创 2021-04-23 15:31:27 · 143 阅读 · 0 评论