- 博客(20)
- 收藏
- 关注
原创 Vue学习笔记之18-网络请求模块的封装
常见的网络请求模块, 以及它们的优缺点对比传统Ajax请求缺点: 配置和调用方式等非常混乱真实开发中真的很少直接使用, 而是使用Jquery-AjaxJquery-ajax相对于传统的Ajax非常好用但是我们在整个vue的开发中都是不需要使用Jquery的那么就意味着为了方便我们进行一个网络请求, 特意引用了一个jQuery, 这显然不合理, Vue的代码才一万多行, jQuery的代码就一万多行了完全没有必要为了使用网络请求就引用jQuery这个框架官方在Vue1.x的时候
2020-11-16 18:51:56 351 1
原创 Vue学习笔记之16-tarbar地开发思路
页面下方有一个单独的TabBar组件, 如何封装自定义TabBar组件, 在App组件中使用让TabBar处在底部, 并且在 .vue文件中的style标签中设置相关的样式页面中会有很多公共的样式, 我们如何处理公共样式呢?在项目的assets文件夹中创建一个名为css的文件夹, 在该文件夹中创建一个名为 base.css 的文件在base.css文件中写入公共的样式在 .vue组件文件中的 style标签中使用 @import url 来引入公共的样式<!-- 这个是 .vue
2020-11-14 23:49:17 289
原创 Vue学习笔记之15-vue-router详解
什么是路由路由是一个网络工程中的一个术语路由(routing) 就是通过互联的网络把信息从源地址传输到目的地址的活动路由器提供了两种机制: 路由和传送路由是绝对数据包从来源到目的地的路径传送将输入端的数据转移到合适的输出段路由中有一个非常重要的概念叫路由表路由表本质就是一个映射表, 决定了数据包的指向相关概念内网IP, 每一个链接上网络的设备都有一个内网IP, 这个内网IP是为了区分链接同一个局域网的不同设备, 在同一个局域网中的每个设备的内网IP是唯一的公网IP,
2020-11-13 16:08:58 356
原创 Vue学习笔记之14-Vue-CLI脚手架
什么是Vue CLI如果只是写几个Vue的Demo程序, 那么时不需要用Vue CLI的如果在开发大型项目的话, 那么就需要, 而且必然需要使用Vue CLI因为在使用Vue.js开发大型应用的时候, 我们需要考虑代码的目录结构,项目结构和部署,热加载,代码单元测试(国内公司少做)等事情如果每个项目都要手动完成这些工作,那无疑效率是十分低效的, 所以我们需要使用一些脚手架工具来帮助完成这些繁琐的事情CLI是什么意思CLI是Command-Line Interface, 翻译过来就是命令
2020-11-11 21:14:37 154
原创 npm install失败的解决方法
在通过npm下载安装模块,安装失败的解决方法在通过npm下载安装模块的时候, 可能会遇到一些问题例如网络掉包, 导致的安装失败程序出错导致的安装失败如果是因为网络掉包的原因可以设置npm的淘宝镜像源(推荐)或者下载cnpm 模块,来进行安装(不推荐)在安装模块失败的时候, 通常我们都需要重新安装这个模块但是在重新安装之前, 我们需要将之前安装失败的文件先删除具体步骤第一步, 通过 npm uninstall 模块名 来卸载模块第二步, 命令行输入 npm cle
2020-11-11 00:19:02 1687
原创 Vue学习笔记之13-webpack的配置 傻子看了都会配置的超详细教程
认识webpackwebpack是什么本质上来说, webpack是一个现代的javaScript应用的静态模块打包工具实质上, webpack就是 将代码进行模块化和打包的工具前端模块化前端模块化的一些方案有, AMD CMD CommonJS ES6在ES6之前, 我们想要进行模块化开发, 就必须借助于其他的工具进行而且在通过模块化开发完成项目后, 还需要处理模块和模块之间的各种依赖, 进行整合打包而webpack和其中一个核心就是帮助我们进行模块化开发, 并且帮助我们处理模块
2020-11-10 17:25:16 275
原创 Vue学习笔记之12-前端模块化
JavaScript原始功能在早期的网页开发时期, js的代码很少, 都是直接将js代码写到html代码中的script标签中就可以了随着ajax异步请求的出现, 慢慢形成了前后端分离用户需求越来越多, 代码与日俱增为了应对代码量的剧增, 我们将代码写到多个js文件中, 进行维护但是这样容易引起变量泄露等等的严重问题可以使用匿名函数闭包来解决变量泄露的问题但是这样又引入了另外的一个问题, 代码不能复用了如何使用闭包防止变量泄露原理利用函数自身的块级作用域特性, 函数内
2020-11-08 17:54:01 146 1
原创 Vue学习笔记之11-slot插槽
slot插槽为什么要使用slot插槽组件的插槽是为了让我们封装的组件更加具有扩展性让使用者可以灵活地决定组件内部的内容到底展示什么网页和网页间每一个组件有很多的区别, 也有很多共性, 如果我们为每一个网页都去单独地封装一个组件是不合适的, 所以我们需要slot插槽如何封装一个灵活的组件将共性(相同的地方)抽取放到组件中, 将不同的地方暴露为插槽预留了插槽, 就可以让使用者根据自己的需求, 决定插槽内的内容slot的基本使用在子组件中, 用特殊的元素标签slot就可以为
2020-11-08 17:53:23 138
原创 Vue中子组件向父组件请求数据时的数据格式问题
props中的数据的类型 type 设置为数字 0 的话, 则标示传入任何类型的数据都可以cpn: { template: '#cpn', // 向根组件 请求 数据 props: { number1: { type: 0, // type设置为0的话, 那么传入任何类型的数据都不会报错 required: true } }...
2020-11-07 11:46:43 218
原创 Vue学习笔记之10-组件化开发
什么是组件化将一个复杂的问题, 拆解为很多个可以处理的小问题, 再将其放到整体当中,大问题就可以迎刃而解 其实就是 动态规划问题组件化也是类似的思想如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂, 而且不利于后续的管理以及扩展, 不利于维护如果将一个页面拆分成一个个效地功能块, 每个功能块完成属于自己的部分的独立功能, 那么之后整个页面的管理和维护就变得非常容易了组件化是Vue.js中的重要思想, 它提供了一种抽象, 让我们开发出一个个独立的可以复用的小组件
2020-11-06 18:38:04 150
原创 Vue学习笔记之09-v-model双向绑定
v-model的基本使用在input框中添加指令, v-model, 值为需要绑定的data数据这样的话, 修改input框中的内容, data中的内容也会响应式改变<div id="app"> <input type="text" v-model="message"> {{message}} </div> <script> const app = new Vue({ el: "#app", d
2020-11-06 18:37:19 351
原创 Vue学习笔记之07-v-for循环遍历
v-for循环遍历数组v-for循环遍历一个数组, 没有使用索引值(下标值) v-for=“item in arr”v-for循环遍历一个数组, 使用索引值(下标值) v-for="(item, index) in arr"<div id="app"> <!-- v-for循环遍历一个数组, 没有使用索引值(下标值) --> <ul> <li v-for="item in names">{{item}}</li>
2020-11-06 18:36:42 314
原创 Vue学习笔记之06-响应式的数组方法
数组中的哪些方法是响应式的push(), pop(), shift(), unshift(), splice(), sort(), reverse() 这些方法是响应式的修改数组中的数据不是响应式的!如果想要修改数组中的数据也有响应式 则需要用splice() 方法或者使用Vue的set()方法 set(要修改的数组, 要修改的数据的下标, 修改后的数据)<div id="app"> <ul> <li v-for="item in arr"&g
2020-11-06 18:36:12 208
原创 Vue学习笔记之05-条件判断
v-if指令的值可以是一个布尔值, 也可以是一个判断条件用于决定一个标签元素是否在页面中渲染如果值为真, 则指令的标签会加载在页面中, 为false则不会加载在页面中(不会存在)<div id="app"> <!-- v-if基本使用, 如果值为true则会加载该标签, 为false则不会加载该标签(这个标签不会存在) --> <h2 v-if="false">{{meassage}}</h2> </div> &
2020-11-06 18:35:22 472 1
原创 Vue学习笔记之04-computed计算属性
计算属性 computed什么是计算属性, 在某些情况下, 需要将数据先进行转化后再进行显示, 或者需要将多个数据结合后再进行显示, 那么就需要将属性进行处理, 这就叫做计算属性在进行变量的操作的时候 将操作写到computed对象中, return 计算的结果定义名字的时候尽量与methods的方法区别开来, methods中定义名字用动词, computed中定义名字用名词<div id="app"> <!-- 定义好后直接mustache语法调用即可 -->
2020-11-06 18:34:53 261
原创 Vue学习笔记之03v-on事件监听
v-on指令的基本使用<div id="app"> <h2>{{counter}}</h2> <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> --> <!-- <button v-on:click="increment">+</
2020-11-06 18:34:09 178
原创 Vue学习笔记之02-Mustache语法以及一些指令
Mustache语法又称大胡子语法 就是用两个大括号来包裹变量 从而挂钩Vue去解析里面的代码比如 <h2>{{message}}</h2> <!-- Mustache语法中不仅仅可以直接写变量, 还可以写一些简单的表达式 --> <h2>{{firstName + lastName}}</h2> <h2>{{firstName}} + ' ' + {{lastName}}</h2>
2020-11-06 18:33:04 736
原创 Vue学习笔记之01-Vue的特点
Vue基础0.准备工作+ 下载vue 可以通过cdn引入vue 也可以下载vue.js本地引入+ vue的基本使用 - 在引入vue后 new Vue({}) 一个vue对象 - 这样操作是为了防止XSS,csrf的攻击 - 例如 new Vue({ el : '#box', //此处写需要进行vue渲染的元素 data : { // 此处写变量 myname : 'xiaoLam'
2020-11-06 16:43:58 215
原创 JS报错: Uncaught SyntaxError: Invalid shorthand property initializer
JS报错: Uncaught SyntaxError: Invalid shorthand property initializer如果你的代码报错以上提示, 那么就去检查一下, 对应的代码是不是把对象格式写错了, 比如: 冒号 “:” 写成了 等号 “=”return { // 查看对象的格式 // 这里就是错误的格式 num = 0 // 正确的格式应该是将等号换成冒号 }...
2020-11-06 14:11:21 195
原创 如何利用VUE动态添加class样式
看注释, 就可以理解原理<body> <!-- 需求, 在每次点击li的时候, 当前的li添加class, 其余的li删除class --> <div id="app"> <ul> <!-- @click="getClass(index) 在每次点击li后调用getClass方法 --> <!-- :class="{'red':index==current}" 动态绑定class, 并且进行判断, 当
2020-11-02 20:33:42 2042
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人