![](https://img-blog.csdnimg.cn/20200803230220693.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 50
vue
lzh~
Keep on going never give up.
展开
-
vue中书籍购物车的实现
实现效果用到了filter、map、reduce等高阶函数index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"></head><body><d原创 2021-02-04 19:38:40 · 226 阅读 · 0 评论 -
vue数组响应式的方法详解
vue数组的方法push方法,可以做到响应式可以传入一个值可以传入多个值<script> this.letters.push('aaa'); this.letters.push('aaa','bbb','ccc');</script>pop():删除数组中的最后一个元素,可以做到响应式<script> this.letters.pop();</script>shift():删除数组中的第一个元素,可以做到原创 2021-02-04 19:12:38 · 807 阅读 · 1 评论 -
为什么for循环要绑定key
无论是使用小程序还是使用vue时,在for循环时都要绑定key特别实在小程序中,不写key的时候还会有一个警告,看着很难受,特别是对有强迫症的人来说vue中<ul> <li v-for="(item,index) in letters" :key="item">{{item}}</li></ul>小程序中<view wx:for="{{items}}" wx:for-item="item" wx:for-index="index原创 2021-02-04 17:44:02 · 1204 阅读 · 0 评论 -
vue中v-for遍历数组
v-for遍历数组在遍历的过程中,没有使用索引值(下标值)<ul> <li v-for="item in names">{{item}}</li></ul>在遍历的过程中,获取索引值<ul> <li v-for="(item,index) in names"> {{index+1}}.{{item}} </li></ul>代码<!DOCTY原创 2021-02-04 17:14:33 · 7844 阅读 · 3 评论 -
v-for遍历对象
v-for遍历对象在遍历对象的过程中,如果只是获取一个值,那么获取到的是value<ul> <li v-for="item in info">{{item}}</li></ul>获取key和value(value,key)<ul> <li v-for="(value,key) in info">{{value}}-{{key}}</li></ul>获取key和value和inde原创 2021-02-04 17:11:23 · 8723 阅读 · 0 评论 -
v-if和v-show的区别
v-if和v-show的区别v-if:当条件为false时,包含v-if指令的元素,根本就不会寄存在dom中当只一次切换时,通过使用v-ifv-show:当条件为false时,v-show只是给我们的元素添加一个行内样式:display:none当需要在显示与隐藏之间切换很频繁时,使用v-show代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-02-04 17:02:34 · 167 阅读 · 0 评论 -
vue用户登录切换小案例(v-if和v-else的使用)
切换有问题代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <span v-if="isUser"> <label for="usern原创 2021-02-04 16:53:16 · 677 阅读 · 1 评论 -
v-on的使用
v-on基础这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用下面的代码中,我们使用了v-on:click="counter++”<div id="app"> <h2>{{counter}}</h2> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button></di原创 2021-02-04 16:22:08 · 648 阅读 · 0 评论 -
ES6对象字面量的增强写法
属性的增强写法ES5的写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> const name = 'why'; const age = 18; const height = 1.88; c原创 2021-02-03 18:39:05 · 143 阅读 · 0 评论 -
ES6中的const
一旦给const修饰的标识符赋值后,不能修改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> //1.注意一:一旦给const修饰的标识符赋值后,不能修改 const name = 'why';原创 2021-02-03 18:16:09 · 154 阅读 · 0 评论 -
ES6的块级作用域
ES6之前因为if和for都没有块级作用域的概念我们都必须借助于function的作用域来接决应用外面变量 的问题下面分析几种没有作用域带来的结果1、变量作用域:变量在什么范围内是可用.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>&原创 2021-02-03 18:15:57 · 192 阅读 · 0 评论 -
vue计算属性computed(以及和methods的对比)
先看一个简单的案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h2>总价格: {{totalPrice}}</h2> <h2>原创 2021-02-03 17:14:16 · 165 阅读 · 1 评论 -
vue中v-bind的简单使用
v-bind基础v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍)在开发中,有哪些属性需要动态进行绑定呢?还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等v-bind有一个对应的语法糖,也就是简写方式——:比如通过Vue实例中的data绑定元素的src和href,代码和效果如下:<!DOCTYPE html><html lang="en"><head>原创 2021-02-03 16:04:25 · 3248 阅读 · 1 评论 -
v-bind绑定style时css属性名的写法(驼峰和短横线)
我们可以利用v-bind:style来绑定一些CSS内联样式。在写CSS属性名的时候,比如font-size我们可以使用驼峰式 (camelCase) fontSize或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit.原创 2021-02-03 15:52:32 · 1249 阅读 · 0 评论 -
vue点击列表变亮(v-for和v-bind的结合)
v-for和v-bind的结合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color: red; } ul li{ cursor: pointer;原创 2021-02-03 15:33:34 · 221 阅读 · 0 评论 -
v-bind绑定class的两种方式
绑定方式:数组语法用法一:直接通过[]绑定一个类<h2 :class="['active']">{{message}}</h2>用法二:也可以传入多个值<h2 :class=“[‘active’, 'line']">{{message}}</h2>用法三:和普通的类同时存在,并不冲突注:会有title/active/line三个类<h2 class="title" :class=“[‘active’, 'line']">{{mes原创 2021-02-03 15:24:35 · 1261 阅读 · 0 评论 -
vue基础语法——插值操作-其他指令
双大括号{{}}语法如何将data中的文本数据,插入到HTML中呢?可以通过Mustache语法(也就是双大括号)。Mustache: 胡子/胡须.我们可以像下面这样来使用,并且数据是响应式的v-once但是,在某些情况下,我们可能不希望界面随意的跟随改变这个时候,我们就可以使用一个Vue的指令v-once:该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。代码如原创 2021-01-31 21:43:37 · 296 阅读 · 5 评论 -
自定义vue模板template
输入vue直接按tab,就出来自定义的模板我的自定义代码<div id="app"> {{message}}</div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { message: '你好啊' } })</s原创 2021-01-30 18:59:58 · 614 阅读 · 0 评论 -
Vue的生命周期
看图识原理左边是官方原图右边是添加注释的图红色框代表回调(钩子)函数,绿色背景代表内置函数 看图识原理原创 2021-01-30 18:15:10 · 84 阅读 · 0 评论 -
创建Vue实例传入的options
创建Vue实例传入的options你会发现,我们在创建Vue实例的时候,传入了一个对象options。这个options中可以包含哪些选项呢?详细解析(官方): https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE目前(通过引入js体验vue的功能)掌握这些选项:el:类型:string | HTMLElement作用:决定之后Vue实例会管理哪一个DOM。data:类型:Object | F原创 2021-01-30 17:55:51 · 260 阅读 · 1 评论 -
Vue中的MVVM
什么是MVVM呢?通常我们学习一个概念,最好的方式是去看维基百科(对,千万别看成了百度百科)https://zh.wikipedia.org/wiki/MVVM我们直接来看Vue的MVVM计数器案例MVVM分析,具体代码点这里原创 2021-01-30 17:43:07 · 128 阅读 · 0 评论 -
Vue计数器小案例
现在,我们来用vue来实现一个小的计数器点击 + 计数器+1点击 - 计数器 -1这里,我们又要使用新的指令和属性了新的属性:methods,该属性用于在Vue对象中定义方法。新的指令:@click, 该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是methods中定义的方法)实现效果代码<!DOCTYPE html><html lang="en"><head> <meta chars.原创 2021-01-30 17:31:42 · 771 阅读 · 1 评论 -
Vue列表展示(循环显示)
效果展示响应式的展示代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> {{movies}} <ul> <li v-f原创 2021-01-30 17:19:36 · 3546 阅读 · 0 评论 -
Vuejs的hello案例
我们来做我们的第一个Vue程序,体验一下Vue的响应式代码做了什么事情?我们来阅读JavaScript代码,会发现创建了一个Vue对象。创建Vue对象的时候,传入了一些options:{}{}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上{}中包含了data属性:该属性中通常会存储一些数据这些数据可以是我们直接定义出来的,比如像上面这样。也可能是来自网络,从服务器加载的。浏览器执行代码的流程:执行到8~11行代.原创 2021-01-30 17:09:04 · 210 阅读 · 0 评论 -
Vuejs的安装
方式一:直接CDN引入 开发环境版本(包含有帮助的命令行警告)<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 生产环境版本(优化了尺寸和速度)<script src=“https://cdn.jsdelivr.net/npm/vue@2.6.11...原创 2021-01-30 16:24:33 · 192 阅读 · 0 评论 -
简单认识一下Vuejs
官方vue点这里Vue (读音 /vjuː/,类似于 view),不要读错。Vue是一个渐进式的框架,什么是渐进式的呢?渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM这些特点,不需要一个个去原创 2021-01-30 16:12:13 · 221 阅读 · 0 评论 -
Vuejs知识量化
原创 2021-01-30 15:41:35 · 164 阅读 · 0 评论 -
Vue笔记——实战快速上手(狂神)
创建工程注意:命令行都要使用管理员模式运行1、创建一个名为hello-vue的工程vue init webpack hello-vue2、安装依赖, 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件#进入工程目录cd hello-vue#安装vue-routern npm install vue-router --save-dev#安装element-uinpm i element-ui -S#安装依赖npm install#原创 2020-07-22 10:32:58 · 784 阅读 · 1 评论 -
sass-loader版本过高
今天在学习狂神的vue实战上手的时候运行项目就死了,配置了半天终于好了第一个错误:Module build failed: TypeError: loaderContext.getResolve is not a functionsass-loader版本太高 解决:(1和2选一个)修改配置文件,重新安装//1.修改sass-loader的版本为^7.3.1//2.重新安装配置环境npm install卸载当前,重新下载// 卸载当前版本npm uninstall sass原创 2020-07-21 20:34:30 · 8725 阅读 · 3 评论 -
Vue笔记——vue-router路由(狂神)
说明学习的时候,尽量的打开官方的文档Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成, 让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSS class的链接HTML5 历史模式或hash模式, 在IE 9中自动降级自定义的滚动行为安装基于第一个vue-cli进行测试学习; 先查看node modules中是否存原创 2020-07-21 18:50:51 · 345 阅读 · 0 评论 -
Vue笔记——webpack使用(狂神)
什么是Webpack本质上, webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时, 它会递归地构建一个依赖关系图(dependency graph) , 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个bundle.Webpack是当下最热门的前端资源模块化管理和打包工具, 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再原创 2020-07-21 17:21:51 · 292 阅读 · 0 评论 -
Vue笔记——第一个vue-cli项目(狂神)
1、什么是vue-clivue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加的快速;主要的功能统一的目录结构本地调试热部署单元测试集成打包上线2、需要的环境安装nodejs:Node.js:http://nodejs.cn/download/安装就是无脑的下一步就好,安装在自己的环境目录下Git:https://git-scm.c原创 2020-07-21 12:24:54 · 553 阅读 · 0 评论 -
Vue笔记——计算属性、内容分发、自定义事件(狂神)
1、什么是计算属性计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数:简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2020-07-21 09:44:56 · 308 阅读 · 0 评论 -
Vue笔记——Axios异步通信(狂神)
1、什么是AxiosAxios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下:从浏览器中创建XMLHttpRequests从node.js创建http请求支持Promise API[JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF(跨站请求伪造)GitHub:https://github.com/axios/axios中文文档:http://www.axios-原创 2020-07-20 22:20:56 · 390 阅读 · 0 评论 -
vue中data和data()的区别
Vue实例中data属性:new Vue({ el: '#app', data: { message: 'message' }})组件化的项目中使用:export default{ data(){ return { message: 'message' } }}注意:在大型项目中data会造成数据污染(data是全局的)将data封装成一个函数,我们在实例化组件的时候只是调用了这个函数生成的数据副原创 2020-07-20 22:13:04 · 11344 阅读 · 1 评论 -
Vue笔记 —— 表单双绑、组件(狂神)
1、什么是双向数据绑定Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突。1.1、为什么要实现数据的双向绑定在Vue.js中,如果使用vuex, 实际上数据还是单向的原创 2020-07-20 21:13:39 · 251 阅读 · 1 评论 -
Vue笔记——基础语法(狂神)
1、v-bind我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似, 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联, 所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!我们还可以使用v-bind来绑定元素特性!上代码<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <原创 2020-07-20 18:57:05 · 282 阅读 · 0 评论 -
vue笔记 —— 第一个vue程序(狂神)
1、MVVM1.1、什么是MVVMMVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight(类似于Java Applet,简单点说就是在浏览器上运行WPF)的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。由John Gossman(同样也是WPF和Sliverlight的架构师)与2005年在他的博客上发表。MVVM源自于经典的MVC(Mod原创 2020-07-20 18:43:15 · 1127 阅读 · 0 评论 -
vue01-前端知识体系(狂神)
1、概述Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架,发布于2014年2月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库(如:vue-router:跳转,vue-resource:通信,vuex:管理)或既有项目整合。官网:https://cn.vuejs.org/v2/guide/2、前端知识体系想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是原创 2020-07-20 17:46:53 · 650 阅读 · 0 评论