vue学习

day 83 Vue学习三之vue组件

本节目录一什么是组件二v-model双向数据绑定三组件基础四父子组件传值五平行组件传值六xxx七xxx八xxx一什么是组件首先给大家介绍一下组件(component)的概念我们在进行vue开发的时候，还记得我们自己创建的vm对象吗，这个vm对象我们称为一个大组件，根组件(页面上叫Root)，在一个网页的开发中，根据网页上的功能区域我们又可以细分成其他组件，或称为子组件，看下面的图解：testvue
deng6648·2020-09-14 13:50

如何快速上手一个新技术之vue学习经验

碰到紧急项目挪别人的vue项目过来直接改，但是vue是18年初看过一遍，18年底再来用，早就忘到九霄云外了，结果丢脸的从打开vue开始学，虽然之前在有道云笔记做了很多记录，然后没有系统整理。所以借这次机会锻炼自己快速上手能力，顺便整理vue相关的资料。如何快速上手，三个诀窍：去碰问题+提出问题+有效筛选搜索信息。大概过程就是:打开index.html没反应——>搜索怎么打开vue项目？——>打开页
weixin_30735391·2020-09-14 11:14

vue学习——v-on实例

v-on绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok',$event)"。从2.4.0开始，v-
人生莫如饥荒·2020-09-14 11:10

ES6的新特性----Vue学习必备基础知识

学习Vue之前，ES6的基础常识是必须要了解的，下面列举了几种最重要的特性，学会了这些，Vue的学习就易如反掌了。变量声明关键字扩展运算符对象数组结构赋值对象属性和方法简写模板字符串数组SetMap模块import和exportdefault箭头函数promise对象类Class1.变量声明const和let在ES6之前，我们都是用var关键字声明变量。var声明的变量存在变量提升问题，也就是va
weixin_41697323·2020-09-14 08:56

electron-vue学习笔记(1):工具栏和标题栏的设置

使用electron-vue是为了桌面应用程序，本来首选是微软的.net，但是收费你懂得，个人研究研究eletron-vue。如有错误，请别骂我~本人建立工程是根据：https://simulatedgreg.gitbooks.io/electron-vue/cn/getting_started.html提供的方法建立，建立的末尾出现关于README的警告，应该没有关系。选择的yarn来下载依赖。
ZXWBBILY·2020-09-14 04:16

Vue2.js学习笔记-06(v-for指令迭代数组、对象数组、对象、数字)

二、v-for指令学习学习代码如下：Vue学习{{elem}}元素为：{{elem}}+索引为：{{i}}名字为：{{user.name}}+年龄为：{{user.age}}{{k}}:{{v}}+索引为
笑笑是一个码农·2020-09-13 23:26

vue学习：在main.js中全局导入基础组件

在项目中，可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表：但是只用于模板的一小部分。importBaseButtonfrom'./BaseButton.vue'importBaseIconfrom'./BaseIcon.vue'importBaseInputfro
sayok_why·2020-09-13 22:18

Vue学习记录-v-show,v-for遍历数组，对象，绑定key

{{message}}{{message}}constapp=newVue({el:'#app',data:{message:'hello',isShow:false}}){{n}}{{index+1}}.{{n}}constapp=newVue({el:'#app',data:{message:'hello',names:['t','r','e']}}){{n}}{{key}}--{{value
orangecloudy·2020-09-13 22:11

vue学习随笔之vue-devtools安装填坑

vue-devtools安装填坑这玩意貌似挺不好安装的而且走了很多的弯路当然使用谷歌商店另说大佬也可以直接略过此文安装GIT安装Node.JS本来不屑谷歌商店的..但是感觉真香.浪费了两个小时找手动档直接拖拓展的瞧这链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg密码:1hsv链接如果失效那你就试试下面的手动档1.gitclonehttps://
时秋·2020-09-13 19:14

Vue学习笔记01——Vue基础知识介绍与Vue语法

Vue学习笔记基本介绍对象属性配置表Vue生命周期生命周期图Vue语法插值绑定1只要使用双大括号（Mustache语法）将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来
丶萌萌哒的小太阳·2020-09-13 08:45

Vue学习之路（七）---transition过渡动画

vue中过度动画v-if和v-show都可以使用，首先要明白四个状态，v-enter(刚开始进入)，v-enter-active(进入过程中到进入完毕),v-leave-enter(刚开始离开),v-leave-enter-active(离开过程中到离开)，示例图如下好的，弄清楚了这四种状态，然后我们就可以简单的开始transition过渡的实操了,在v-enter-active以及v-leave
Tommy·Yang·2020-09-13 08:38

vue学习笔记

vue一个vue文件通常由三部分构成，其最终输出结果等同于html。【template】：html的模板，真正的DOM结构，不同点是支持vue指令，由script和stype来调整，也可以是纯粹的html。【script】：js脚本，用于修改template的数据。【style】：css样式，用于修改template的样式。【components】：依赖组件。一个vue可以称作为一个组件，更准确的
清风半夜鸣蝉·2020-09-13 07:54

VUE学习07--VUE使用localStorage和mounted实现toDoList（待办事项新增，切换，删除）

上一篇文章我们讲了如何实现一个简单的toDoList，可以新增，删除，修改状态的待办事项。但是它还不够完善，比如我们输入了几个项目进去，如果页面刷新或者重新进入，刚才添加或者删除的项目就没有了，为了能够实现永久保存，我们可以利用Html5的一个缓存机制localStorage加上vue的mounted来实现。一、localStorage用法：1.存储/更新数据localStorage.setIte
stalin_·2020-09-13 06:40

VUE学习09--VUE生命周期函数/钩子的介绍和使用

VUE中的生命周期函数/生命周期钩子指的是在组件挂载，组件更新，组件销毁的时候触发的一系列的方法。常见的钩子函数如下：beforeCreate实例创建前执行created实例创建后执行beforeMount模板编译前执行mounted模板编译后执行（请求数据，操作dom,放在这个里面mounted）beforeUpdate数据更新前执行updated数据更新后执行beforeDestroy实例销毁
stalin_·2020-09-13 06:40

VUE学习10--VUE如何请求数据（一）--Vue-Resource的使用（包含前后端使用demo）

VUE请求数据的常用方式有三种：vue-resourceaxiosfetch-jsonp今天我们先来说一下vue-resource一、优势及特点：1.体积小vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。2.支持主流的浏览器和Vue.js一样，vue-resource除了不支持IE9以下的浏览器，其他主流的
stalin_·2020-09-13 06:40

VUE学习08--VUE使用组件来复用页面内容

组件化是VUE的一大特性，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。简单来说，有了组件化设计，我们可以实现部分页面的复用，比如我们定义一个header.vue，然后多个页面中都可以引用这个header.vue，这样使代码量更少，更简洁。当然对程序员自身的设计能力也有了更高的要求。下面来说说组件应该如何定义和使用。1.首先我们需要把组
stalin_·2020-09-13 06:40

前端 vue学习（一）

前端学习1.Vue.nextTick1.1遇到问题1.2处理方案1.3分析如下：2.计算异常3.elementinput背景图、字体颜色修改1.Vue.nextTick1.1遇到问题问题1（接口调用异步）：页面展示需要调用两个接口，其中接口A的查询参数需要依赖接口B查询结果，故写成先调用B接口，然后调用A接口，发现有时候A请求正常，有时候异常。问题2（页面渲染异步）：document.getEle
长安依旧·2020-09-13 04:31

vue学习踩坑1:VSCode无法执行live-server

在学习vue的时候发现live-server命令无法使用，具体报错如下解决办法：1.以管理员身份运行VSCode2.使用get-ExecutionPolicy查看PowerShell的执行策略，发现为Restricted(单词Restricted的意思是“受限制的”，所以这种执行策略主要是限制脚本的执行。说简单点就是：可以执行单个的命令，但是不能执行脚本)3.使用set-ExecutionPoli
自学Java真蛋疼·2020-09-13 01:46

vue学习笔记---搭建vue环境

vue和Angular,React都是前端框架单页面框架基于模块化组件化的开发模式vue是国人大牛开发的,具有简单灵活高效的特点.搭建vue开发环境必须拥有node.js安装vue的脚手架工具,也就是vue的命令行工具(新版本的脚手架和旧版本的脚手架创建项目方式会不一样)老版本:npminstall--globalvue-cli/cnpminstall--globalvue-cli（此命令只需要执
{[("青椒盖饭")]}·2020-09-12 23:30

Vue学习笔记01-搭建node.js环境

1.首先官网：https://nodejs.org/en/download/下载好对应系统和版本的node.js，不更换安装路径的话基本点击下一步即可。下载安装好node.js后点击finish。2.打开cmd窗口:输入node-v显示node.js的版本号说明node.js安装成功。输入npm-v显示npm版本号说明自带的npm也安装成功。此处说明下：Node.js已自带npm，安装Node.j
weiweiQAQ·2020-09-12 21:12

Vue学习笔记（7）

1、总结复习Document//webpack//是什么？前端最流行的打包工具，更准确的来说它是一个模块化打包工具//ES6（import）//nodejs中的CommonJS规范（require()/module.exports）//require.js（require()/define()）////在webpack看来所有的资源(CSS/图片/字体等)都是模块//作为打包工具，它提供了什么功能
魔法 • 革·2020-09-12 21:49

Vue学习篇(十)—组件化高级-插槽

VueDay10——组件化开发—插槽编译作用域认识slotslot基本使用具名插槽slot作用域插槽10.1.编译作用域在真正学习插槽之前，我们需要先理解一个概念：编译作用域。官方对于编译的作用域解析比较简单，我们自己来通过一个例子来理解这个概念：我们来考虑下面的代码是否最终是可以渲染出来的：中，我们使用了isShow属性。isShow属性包含在组件中，也包含在Vue实例中。我是组件哈哈hahah
云澈丿·2020-09-12 17:26

Vue学习笔记 (九) slot插槽-新旧版本用法(vue2.6.0前后)

slot翻译为插槽，插槽的目的是让我们原来的设备具备更多的扩展性。vue组件中使用插槽，也是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。vue2.6.0之前用法单个插槽(默认/匿名插槽)在子组件中，使用特殊的元素就可以为子组件开启一个插槽，该插槽插入什么内容取决于父组件如何使用。具名插槽当子组件的功能复杂时，子组件的插槽可能并非是一个。比如我们封装一个导航栏
楠丶·2020-09-12 17:18

前端之：Vue学习记录（持续更新）

（1）子组件用props接收父组件传过来的参数，type:[Array,String]可以指定多种接收类型（2）子组件里用this.$attrs接收没有被props显式接收的“父组件传递给子组件”的属性（3）子组件用this.$listeners接收父组件传递给子组件的方法（4）用jsx渲染（template则无法被渲染），可以用this.$childrens得到render的return中渲染的
luxiaopengyou·2020-09-12 16:42

Vue学习-安装篇

Vue学习Vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。
只是学习学习·2020-09-12 13:03

319、Vue学习笔记25 -【TypeScript 支持】 2020.04.20

0、目录1、发布为NPM包的官方声明文件2、推荐配置3、开发工具链3.1工程创建3.2编辑器支持4、基本用法5、基于类的Vue组件6、增强类型以配合插件使用7、标注返回值8、参考链接1、发布为NPM包的官方声明文件静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐丰满会更加显著。这就是为什么Vue不仅仅为Vuecore提供了针对TypeScript的官方类型声明，还为VueRo
youyouwuxin1234·2020-09-12 09:53

Vue学习（计算属性computed）

Vue.js计算属性关键词：computed。我们可以使用computed来替代methods，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。可以说使用computed性能会更好，但是如果你不希望缓存，你可以使用methods属性。computed属性默认只有getter，不过在需要时
LSQ_2584951836·2020-09-12 05:07

vue学习

Vue学习笔记在父组件向子组件传递值的时候，有关于参数名字的问题这个为父组件，向其中的的一个user组件传值，主要传递的是user值-->importHeaderfrom".
幻夜~星辰·2020-09-12 04:59

Vue学习笔记(一)：从零开始创建一个Vue前端项目

一、开篇最近公司的老的项目重构，改成了前后端分离的架构，前端采用的是vue.js前端框架，所以接触到vue.js。Vue.js是当下很火的一个JavaScriptMVVM(Model-View-ViewModel)库，它是以数据驱动和组件化的思想构建的。相较于其他的前端框架，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。Vue.js不同于以前的jQuery操作DOM
新一、·2020-09-12 03:04

Vue学习笔记(四) 条件渲染和列表渲染

1、条件渲染（1）v-ifv-if指令用于条件性（根据表达式的值）渲染内容，可以与v-else指令和v-else-if指令一同使用DemoABCElsenewVue({el:'#app',data:{type:'A'}})（2）v-if&v-showv-show指令同样可以根据表达式的真假渲染内容DemoAnewVue({el:'#app',data:{isSeen:true}})它们不同之处在于
半虹·2020-09-12 01:56

vue学习----activated 触发不了事件

methods:{handleScroll(){console.log(document.documentElement.scrollTop)}},activated(){window.addEventListener('scroll',this.handleScroll)}activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在
八月@谁·2020-09-12 01:10

VUE学习必备知识之数据通信

v-on点击事件.........v-bind缩写.........父=>子组件在父里面使用子组件Children：子组件里面：{{aaa}}--{{aa}}exportdefault{name:'Children',props:{aaa:String,aa:Number}}这样父组件里面的aaa/aa值变化子组件里面就自动接收跟着变变化这里指定了传入的类型子组件=>父父组件使用子组：并自定义方法
李 东兵·2020-09-12 01:08

Vue学习笔记3.8 列表渲染 v-for

基本的v-for使用方式：列表渲染{{item}}------{{index}}varvm=newVue({el:"#app",data:{list:['Dell','Nice','To','Meet','You']}})要注意的是不能通过下标直接为列表添加数据需要用特定函数进行修改：pop(),push(),shift()unshift()splice()sort()reverse()不过可以先
@凌晨三点半·2020-09-12 00:14

vue学习【引入外部js文件，出现异常：Uncaught SyntaxError: Unexpected token】

今天做一个VUE的项目，在引入JS文件时，遇到了一个问题：报错信息控制台的提示：UncaughtSyntaxError:Unexpectedtoken出错，是跟我开玩笑是吧！但根据以往的印象，这个好像是引入JS的问题，确认JS文件没出错后，再仔细看了看index.html文件。index.html原本我的JS文件是放在/src/utils文件夹下的，但引入/src和/static的文件是有区别的。
Rachel~Liu·2020-09-12 00:16

Vue学习笔记（条件渲染、列表渲染、Class与Style绑定）

条件渲染、列表渲染、Class与Style绑定.条件渲染：v-ifv-elsev-else-if，v-show列表渲染：v-forstyle和class的绑定：style可写成对象形式，然后通过属性绑定v-bind进行绑定；class绑定写成对象形式，键名是真是的class名称，值为布尔值或表达式，或者可以使用数组直接输出字符串，也可以用对象表达式+数组混合的方式
不忘初心砥砺前行·2020-09-12 00:32

vue学习笔记（二）- 数据绑定、列表渲染、条件判断

vue的数据绑定和列表渲染的造轮子GitHub:八至作者：狐狸家的鱼双向数据绑定Vue中数据的双向绑定-v-model数据->页面页面->数据适用：input、select、textarea{{checked}}{{message}}varmessage='sue';varvm=newVue({el:'#app',data:{message,checked:true}})这是一个简单的表单输入双向
diaoyanbian8143·2020-09-12 00:36

vue学习笔记

npm-换淘宝源Node的模块管理器npm会一起安装好。由于Node的官方模块仓库网速太慢，模块仓库需要切换到阿里的源。npmconfigsetregistryhttps://registry.npm.taobao.org/执行下面的命令，确认是否切换成功。npmconfiggetregistryVUE组件说明：1.全局组件：写在newVue外面的组件例：Vue.Component('标签名'),
bajun3444570·2020-09-12 00:27

vue学习笔记(五)条件渲染和列表渲染

前言在众多的编程语言中，我们的基础语法总是少不了一些专业语法，比如像定义变量，条件语句，for循环，数组，函数等等，vue.js这个优秀的前端框架中也有同样的语法，我们换一个名词，将条件语句改成专业词汇叫做条件渲染，循环语句改成专业词汇叫做列表渲染，这样比较舒服一点。本章目标学会条件渲染的使用学会可复用的key的使用学会列表渲染的使用条件渲染1.v-if的使用成绩为Aletvm=newVue({e
二郎神杨戬·2020-09-11 23:33

Vue学习笔记09- v-else-if的玩法

前言：我们使用v-if、v-else-if和v-else就可以像条件判断一样去玩这个标签。1.首先我们创建一个vue实例：这次我们使用随机数来玩这个条件语句。constapp=newVue({el:"#app",//根据名称操作div,作用域只在该divdata:{random:0},methods:{},});2.添加一个双向绑定按钮：触发点击事件时候，会执行@click等号后面的函数或语句，由
weiweiQAQ·2020-09-11 23:00

Vue学习笔记

1.ES6中字符串的新方法给字符串补足位数padStart（2，‘0’）padEnd（，’’）2.VUE的按键修饰符：监听固定按键监听固定按键.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right也可使用键盘码自定义全局按键修饰符的方法Vue.config.keyCodes.f2=113;//@keyup.enter="add()"
lm_four·2020-09-11 15:48

Vue学习props传递数据

vue数据传递props。使用选项props来声明需要从父级接受的数据。props的值可以是两种，一种是字符串数组，一种是对象。props声明的数据与组件data函数return的数据主要区别就是props的来自父级，而data中式组件自己的数据，作用域是组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。如下，数据msg就是通过props父级传递
凡心所致·2020-09-11 12:42

Vue学习笔记

Vue学习笔记Vue学习笔记——vue生命周期Vue生命周期在页面首次加载执行顺序有如下：beforeCreate//在实例初始化之后、创建之前执行一般使用场景是在加loading事件的时候created
wwincir·2020-09-11 11:26

Vue学习（六）

Vue学习（六）命名视图实现经典布局标签代码结构：JS代码：varheader=Vue.component('header',{template:'header'});varsidebar=Vue.component
SanPhantom·2020-09-11 09:09

VUE学习笔记(三)-子路由、多路由、嵌套路由、动态路由都是什么鬼？

最近学习到VUE路由这块，发现这块知识点有点多，好容易混乱，我的学习习惯就是先要建立框架，然后再去挨个学习搞懂，所以先来把概念搞搞清楚再说。首先，我们要知道VUE路由创建的是单页面路由。子路由其实和单路由意思是一样的，单路由应该很好理解，因为我们都知道路由是可以一层一层嵌套的，你可以想象一下俄罗斯套娃，就是一个套一个的这种感觉，而里面那个都会一直被外面一个包含着。所以单路由的意思就是只有一层呗，放
心若向阳无谓悲伤·2020-09-11 09:56

vue学习-v-if和v-show

v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。v-showv-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSSpropertydisplay。区别1、v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。2、v-if也是惰性的：如果在初始渲染时条件为假，则什么
sunxiaolinlinx·2020-09-11 03:35

Vue 史上最全学习笔记（2020年1月9日）

目录✎VUE学习◆VUE学习心路历程◆VUE学习视频来源➀VUE学习视频百度网盘资源➁VUE本笔记学习视频资源◆VUE语法❶Vue基础语法——模板语法（Threeruleoftemplate）❷Vue基础语法
winner_corl·2020-09-11 00:23

【Vue学习总结】8.Vue事件结合双向数据绑定实现todolist

接上篇《7.Vue定义方法、操作数据以及事件对象》上一篇我们主要讲解了Vue事件，以及如何定义、执行方法，如何获取和改变数据，执行方法传值以及事件对象的操作。本篇我们讲解通过Vue事件，结合双向数据绑定来实现todolist的效果。本系列博文使用的Vue版本：2.6.11一、要实现的ToDoList效果这一次我们要实现一个todolist的效果，这个todolist其实就是“正在进行”的任务的列表
光仔December·2020-09-10 18:59

【Vue学习总结】9.Vue结合localStorage和生命周期实现todolist

接上篇《8.Vue事件结合双向数据绑定实现todolist》上一篇我们主要讲解了通过Vue事件，结合双向数据绑定来实现todolist（待办事项列表）的效果。本篇我们讲解如何结合Vue的模块化以及封装Storage实现todolist（待办事项列表）。本系列博文使用的Vue版本：2.6.11上一篇我们实现了带有“进行中”和“已完成”效果的todolist（待办事项列表）：最后我们提出了一个问题，就
光仔December·2020-09-10 18:59

Vue学习日记28

1.Browserslist:caniuse-liteisoutdated.Pleaserunnextcommandnpmupdatecaniuse-litebrowserslist解析：cdnode_modulesrm-rfcaniuse-literm-rfbrowserslistcd../npminstallcaniuse-litebrowserslistnpmrunstart2.errori
1000sprites·2020-09-10 17:37

vue学习笔记：VUE组件通信（子传父）

引用：js：varvm=newVue({el:'#app',//挂载data:{},components:{'my-tab':{//父组件template:'#sueTab',data(){return{childn:0,//创建变量用来接收子组件传递过来的值chindtablist:[]//同上}},methods:{getdata:function(d){//获取子组件传递的值并给父组件dat
　岁岁.·2020-09-10 17:23
上一页 22 23 24 25 26 27 28 29 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他