#vue学习

vue学习笔记之组件

先点赞后关注，养成习惯再看。寄语：没有一个冬天不会过去，没有一个春天不会到来。前言在前面vue的一些博客中，我们几乎将vue的基础差不多学习完了，而从本篇博客开始将会进入到vue的另一个阶段性学习，本篇博客的内容在以后的vue项目中占很大的比重，所以小伙伴们需要认真学习，本篇博客的内容也比较简单，看过我博客的人都知道我所写的每一篇博客都是非常的详细的，所以大家不要担心学不会。我会尽量将所学的知识讲
一级元佬·2020-03-06 02:47

Vue学习系列一 —— MVVM响应式系统的基本实现原理

MVVM是什么MVVM是Model-View-ViewModel的简写。它模式是MVC—>MVP—>MVVM的进化版。Model负责用JavaScript对象表示，View负责UI界面显示，两者做到了最大限度的分离。而把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的界面修改同步回Model更新数据。主流MVV
浩3108·2020-03-05 04:04

Vue学习（4）-父子组件数据传递

在之前已经学习过如何创建组件和引入组件。这次来学习一下怎么在父子组件之间传递数据，这在实际开发过程中会经常涉及到。值得注意的是，这里只讨论父子组件之间的数据传递，而两个子组件之间的数据传递可通过父组件做中转，间接进行。prop通过在子组件中设置prop，可接收来自父组件的数据。子组件代码如下：{{postTitle}}exportdefault{props:['postTitle']//props
小焲·2020-03-04 04:00

第一章：vue HelloWorld

相对于angular和react，vue学习路线相对简单，中文文档资料相对详细，容易上手，大胆实战开发！不支持ie低版本，谁他妈要兼容ie8，请把眼睛移到右上角，看见那个叉叉没，点击它。
Z_D_殿峰·2020-03-03 08:28

vue学习笔记之slot插槽用法实例分析

本文实例讲述了vueslot插槽用法。分享给大家供大家参考，具体如下：不使用插槽，在template中用v-html解析父组件传来的带有标签的contentRachel">Vue.component('child',{props:['content'],template:'hello'})varvm=newVue({el:'#app'})使用插槽，如果父组件为空，就会显示slot中定义的默认内容R
Rachel~Liu·2020-02-29 18:47

vue学习笔记之Vue中css动画原理简单示例

本文实例讲述了Vue中css动画原理。分享给大家供大家参考，具体如下：当transition包裹了一个元素之后，vue会自动分析元素的css样式，构建动画流程。so，我们需要定义style。vue中的css动画，其实就是某一个时间点，给元素再增加了一个css样式体现的。v-if、v-show、动态组件都可以实现过渡效果。如果没有给transition定义name，vue中默认是.v-enter、.
Rachel~Liu·2020-02-29 18:09

vue学习笔记之动态组件和v-once指令简单示例

本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考，具体如下：点击按钮时，自动切换两个组件，当点击按钮之后，会自动清除原来的组件，显示新的组件。每一次切换，都需要销毁+创建但是这样消耗有点大，所以我们在子组件中引用了v-once指令，这样可以将显示在页面中的组件存到内存中，不会完全销毁。动态组件和v-once指令-->-->changeVue.component('child-o
Rachel~Liu·2020-02-29 18:05

VUE学习

【链接】深入响应式原理http://cn.vuejs.org/guide/reactivity.html【链接】利用JavaScript数据绑定实现一个简单的MVVM库https://segmentfault.com/a/1190000004847657准备知识前端开发基础html、css、js前端模块化基础对ES6有初步的了解什么是VUE.jsVUE.js是一种轻量级的MVVM框架，同时吸收了R
ddai_Q·2020-02-29 04:03

Vue学习—— Vuex学习笔记

组件是Vue最强大的功能之一，而组件实例的作用域是相互独立的，意味着不同组件之间的数据是无法相互使用。组件间如何传递数据就显得至关重要，这篇文章主要是介绍Vuex。尽量以通俗易懂的实例讲述这其中的差别，希望对小伙伴有些许帮助。一、Vuex是什么？Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。二、
沉静地闪光·2020-02-27 14:25

vue学习笔记之给组件绑定原生事件操作示例

本文实例讲述了vue学习笔记之给组件绑定原生事件操作。分享给大家供大家参考，具体如下：当在父组件中定义一个点击事件，并且在父组件的methods中定义了这个点击事件时，在页面上点击并不会有什么反应。
Rachel~Liu·2020-02-27 12:56

【Vue.js】实例中的数据，事件和方法（三）

函数中数据改变，页面会同步刷新，handleClick:function () {this.content= "world"}}this相当于python中的selfcontent值改变后，页面内容会自动刷新>Vue
kingloongMagic·2020-02-26 15:25

Vue学习笔记

1,Vue--------学习笔记1.1：【vue是什么】1，是一个用于创建用户界面的开源javascript框架，也是一个创建单页应用的web应用框架2，MVVM：是Model-View-ViewMdel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定这使的ViewModel的状态改变可以自动传递给View，就是所谓的双向数据绑定1.2：【vue的
梦想起航-冬·2020-02-26 12:14

Vue学习笔记4

条件渲染v-ifTitleParagraph1Paragraph2varvm=newVue({el:'#app',data:{message:"hello",ok:true}})v-else0.5">NowyouseemeNowyoudon'tvarvm=newVue({el:'#app',})v-showHello!varvm=newVue({el:'#app',data:{ok:true}})
qfstudy·2020-02-26 02:01

vue学习笔记--表格列中根据不同内容显示不同按钮

目标：在表格中，A列的数据显示不同，B列根据A列中不同的数据，再显示不同的按钮。如图：2.png分析一下，“状态”这一列，有不同的tag。操作这一列会根据“状态”这列“已注册”“未注册”去分别显示“注销账号”或者是“获取注册链接”。先做“已注册”“未注册”效果，tag实现不同的颜色，就是通过type属性实现的，,对于tag的type直接用三元表达式进行实现代码片段{{scope.row.state
一个总在代码里给自己下毒的小白·2020-02-26 00:56

Vue学习笔记入门篇——组件杂项

本文为转载，原文：Vue学习笔记入门篇——组件杂项动态组件通过使用保留的元素，动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并动态切换：varhome={template:'thisishome
ChainZhang·2020-02-25 05:19

Vue学习总结

0.前言前端开发模式的发展：静态页面最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。异步刷新，操作DOM1995年，网景工程师BrendanEich花了10天时间设计了JavaScript语言.随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。ajax盛
Fenco_Han·2020-02-24 22:51

vue学习笔记-prop

用于组件props:['title','likes','isPublished','commentIds','author']说明这个组件有'title','likes','isPublished','commentIds','author'这几个attribute以下说明组件有title,likes等等属性，并且指定对应属性的类型，当给到错误类型的值时控制台会报错props:{title:Str
听着music睡·2020-02-23 21:00

Vue2.0—仿知乎日报总结

demo(PC模式下推荐使用chrome移动端模式浏览去观看)如果觉得做得还不错,或者项目源码对您有帮助,希望您小抬右手到右上角点一个star,您的支持是作者长期更新维护的动力^_^项目起源从二月份开始学习vue
哈哈哈蜜瓜·2020-02-23 00:47

Vue学习笔记-Day2 Vue基本用法、MVVM模型、生命周期函数、深度响应式原理、虚拟DOM

day2–vue起步文章目录day2--vue起步Vue安装Vue初体验Vue的MVVM模型Vue的生命周期函数Vue深度响应式原理插值语法绑定参数计算属性条件渲染虚拟DOMVue安装目前有种使用方式：1CDN引入开发环境版本：生产环境版本：开发人员的话，还是建议使用第一个2下载引入直接去vue的官网找这个，然后点击链接另存为即可下载vue.js文件，然后放到自己的项目JS文件夹中，在需要使用的页
小菜鸡的日常问题·2020-02-22 22:17

Vue学习笔记-插槽

深入理解vue中的slot与slot-scope插槽，也就是slot，是组件的一块HTML模板。对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板，比如‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由组件自身控制；插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组
赵客缦胡缨v吴钩霜雪明·2020-02-22 19:49

Vue学习笔记一：Vue.js介绍

一、近年来前端开发趋势旧浏览器逐渐淘汰，移动端需求增加前端交互越来越多，功能越来越复杂架构从传统后台MVC向RESTAPI+前端MV*迁移MV*：1、MVC2、MVP3、MVVM←Vue.js二、MVVM框架介绍MVVM的应用场景：针对具有复杂交互逻辑的前端应用提供基础的架构抽象通过Ajax数据持久化，保证前端用户体验MVVM：1、Angular.js2、react.js3、vue.js三、什么是
APRII2·2020-02-22 17:31

vue学习指南：vue的生命周期(详细)

今天小编给大家详细讲解一下vue的生命周期。希望大家多多指教，哪里有遗漏的地方，也请大家指点出来谢谢。一、怎么理解Vue的生命周期的？生命周期：从无到有，到到无的一个过程。Vue的生命周期对组件来说的或实例来说。简单理解：比如我们都知道js中的定时器，定时器都有开始的那一秒，已经执行过程中，最后执行完毕，我们的Vue的生命周期就好像定时器一样，有许多过程，他们就像钩子一样，相互牵连着。1.在Vue
晋飞翔·2020-02-21 23:44

Vue学习笔记入门篇——安装及常用指令介绍

本文为转载，原文：Vue学习笔记入门篇——安装及常用指令介绍介绍Vue.js是当下很火的一个JavaScriptMVVM库，它是以数据驱动和组件化的思想构建的。
ChainZhang·2020-02-21 22:01

vue学习资料三（v-if、v-else、v-show、v-for）

VUE模板指令还记得underscore.js中if如何书写的吗？vardata={isShow:true,title:'hello',otherTitle:'world'}vardemo=_.template(document.getElementById('tpl').innerHTML)(data)console.log(demo)条件判断v-if直接在元素上添加v-if如果该数据KEY是t
凯哥开小灶·2020-02-21 15:55

脚手架安装

Vue2.0史上最全入坑教程（上）——搭建Vue脚手架（vue-cli）2017.03.0110:34*字数1425阅读111618评论103喜欢174赞赏2ps:想了解更多vue相关知识请点击VUE学习目录汇总
暖人_·2020-02-21 04:32

FCC 武汉 Vue学习计划展开「第一期」【即将开始】

FCC学习计划，主要是为了帮助大家同时也包括我自己，走出懂和不懂的交界线。在设计一条大体层次分明的主线下，大家一起分享学习，不再是你讲我听的低效率模式，而是大家一起学习一起分享一起参与。在一个主线下，重新捋清楚大家的技术盲区。本期内容选择武汉前端行业比较流行的Vue框架，在基础的层次上，稍微提高和进行发散，不论你是老手或是新手，相信参加过后都会有很大的收获。**主线简介—Vue语法—Vue属性方法
Rico_wang·2020-02-21 01:54

vue学习系列-vue结合Semantic-UI

新鲜的Semantic-UI优秀的前端界面框架，语义化的标签更容易理解与记忆，不过相比于bootstap，组件还是少了一些。但可以在个人项目用来尝尝鲜，因为它足够漂亮和简约。与vue的结合安装&编译安装方法如下：npminstallsemantic-ui--save安装过程中会有一些选项提示，按照默认选择回车即可，这里不会将它安装到node_modules中，事实有些配置还是需要我们修改的，比如它
风穆雷·2020-02-20 05:28

Vue学习（一）

基于学习weex的需求，要将Vue.js的基础进行学习，并完成一个简单的图书馆上下架系统。初探数据绑定组件化数据绑定数据绑定组件化样例：在父组件中注册使用Vue.component()1、使用Vue.component()进行模块定义Vue.component('component1',{props:['message'],template:'{{message}}'});该子模块中定义了一个属性
美乃滋酱啊·2020-02-20 03:00

vue学习笔记

Vue学习笔记Vue初始化对象varvm=newVue({el:"#box",//绑定的元素template:"{{money}}",//使用的模板data:function(){//绑定的数据return
土豪码农·2020-02-20 03:27

Vuex实现组件通信-Vue学习笔记(2).md

2017.4.17-4.21前言本周继续上周的登录界面，使用less与vuex进行完善。笔记导航Vue套件使用Vuex状态管理学习（state&getters&mutations&actions）通过Vuex实现多个组件间的通信使用less编辑页面样式详细笔记1.Vue组件嵌套使用新建父组件，在script段落内引入子组件，并且在父组件中插入已定义的子组件entry//声明引入子组件变量impor
daisimin7·2020-02-20 00:41

vue学习笔记-vue风格指南-优先级

优先级A的规则：1.组件名为多个单词，但是根组件除外。如：exportdefault{name:'UnitList',}2.组件的data必须是一个函数3.Prop定义应该尽量详尽，至少要指定其类型4.为v-for设置键值，即总是用key来配合v-for5.不要把v-for和v-if同时使用在同一个dom元素上6.为组件样式设置作用域：a.scopedb.使用CSSModulesc.使用BEM约定
一个总在代码里给自己下毒的小白·2020-02-19 21:34

vue学习笔记

.$data.#$el$data表示vue实例中data的值$el表示vue实例中el的值,注意el效果等同getElementById.遇到多个同样classname，只处理第一个{{a}}//此处值为1{{a}}{{a}}vardata={a:1}varvm=newVue({el:'.box',data:data})vm.$data===data//=>truevm.$el===documen
李诺哦·2020-02-19 17:12

vue学习笔记

1.router使用方法：step1项目引入：importVuefrom'vue';importVueResourcefrom'vue-resource';Vue.use(VueResource);//注意这一步，要将两者关联起来step2常用配置：mode:访问路径的带不带#号hash-带history-不带base:基路径，如'/page/app'routes:路由列表routes.path-
花泽香个菜菜·2020-02-19 06:37

vue学习目标

第一部分理解为什么要学习Vue理解什么是CDN加速学会使用插值表达式{{}}和v-html&v-text的使用学会使用v-on来监听事件学会使用v-bind来绑定html属性(比如绑定img的src的属性)学会使用v-model来进行模型和View的双向绑定学会使用v-if与v-else来进行判断学会使用v-for来进行循环操作学会自定义私有过滤器来实现所有字母转小写操作学会自定义全局过滤器来实现
花开有声是我·2020-02-19 06:32

VUE学习七【插件】

/***自定义Vue插件*/(function(){constMyPlugin={}MyPlugin.install=function(Vue,options){//1.添加全局方法或属性Vue.myGlobalMethod=function(){alert('Vue函数对象方法执行')}//2.添加全局资源Vue.directive('my-directive',function(el,bind
HOT SUMMER·2020-02-18 16:00

VUE学习六【指令】

[v-cloak]{display:none}atguigu.com显示左侧文本{{url}}alert('模拟加载慢')newVue({el:'#example',data:{url:'尚硅谷',myid:'abc123',imageSrc:'http://cn.vuejs.org/images/logo.png'},methods:{showMsg:function(){alert(this.
HOT SUMMER·2020-02-18 16:00

VUE学习五【动画，时间格式化】

.fade-enter-active,.fade-leave-active{transition:opacity.5s}.fade-enter,.fade-leave-to{opacity:0}/*可以设置不同的进入和离开动画*/.slide-fade-enter-active{transition:all.3sease;}.slide-fade-leave-active{transition:a
HOT SUMMER·2020-02-18 13:00

VUE学习四【自动获取提交的数据，生命周期】

用户名:密码:性别:女男爱好:篮球足球乒乓城市:未选择{{city.name}}介绍:varvm=newVue({el:'#demo',data:{user:{username:'',pwd:'',sex:'female',likes:[],cityId:'',desc:'',},allCitys:[{id:1,name:'BJ'},{id:2,name:'SZ'},{id:4,name:'SH'
HOT SUMMER·2020-02-18 12:00

VUE学习三【绑定监听，事件修饰符，按键修饰符】

1.绑定监听GreetGreet2Greet32.事件修饰符百度一下3.按键修饰符newVue({el:'#example',data:{name:'Vue.js'},methods:{test1(event){//方法内`this`指向vm//alert('Hello'+this.name+'!')//`event`是原生DOM事件alert(event.target.innerHTML)},t
HOT SUMMER·2020-02-18 09:00

VUE学习二【样式，列表，筛选，排序】

.classA{color:red;}.classB{background:blue;}.classC{font-size:20px;}1.class绑定::class='xxx'表达式是字符串:'classA'表达式是对象:{classA:isA,classB:isB}表达式是数组:['classA','classB']2.style绑定style="{color:activeColor,fon
HOT SUMMER·2020-02-17 21:00

VUE学习一

Hello,{{username}}newVue({el:'#app',data:{username:'atguigu'}})1.双大括号表达式{{msg}}{{msg.toUpperCase()}}2.指令一:强制数据绑定访问指定站点访问指定站点2访问指定站点33.指令二:绑定事件监听点我点我2newVue({el:'#app',data:{msg:'NBAILoveThisGame!',url
HOT SUMMER·2020-02-17 20:00

vue学习笔记-事件监听

最简单的点击事件Add1Thebuttonabovehasbeenclicked{{counter}}times.varexample1=newVue({el:'#example-1',data:{counter:0}})点击button一次。触发时运行一些JavaScript代码即counter+1并更新uiv-on:click执行一个方法的方式：Greetvarexample2=newVue(
听着music睡·2020-02-17 20:00

vue学习笔记-列表渲染

{{item.message}}varexample1=newVue({el:'#example-1',data:{items:[{message:'Foo'},{message:'Bar'}]}})效果：FooBar{{parentMessage}}-{{index}}-{{item.message}}varexample2=newVue({el:'#example-2',data:{paren
听着music睡·2020-02-17 19:00

vue学习笔记之数据驱动

1、数据驱动是什么vue.js的核心思想是数据驱动页面，所谓数据驱动，就是页面上的dom结构由数据的映射产生，开发项目的过程中，我们不需要去管界面的渲染，只需要集中精力管理数据的修改。最经典的例子创建一个vue的实例：当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。关于数据驱动界面，值得注意的点
zzzyZhang·2020-02-17 08:59

2020-02-16 Vue中runtime-compiler和runtime-only的区别

最近看B站上的vue学习视频，是由coderwhy老师讲的，讲的非常好，自己也在慢慢理解vue的由来，正好看到老师讲的runtime-compiler和runtime-only的区别，这里写个笔记，把老师讲的和自己理解的记录上去
本泽锅·2020-02-16 21:12

vue学习笔记-条件渲染

v-if最基本的条件渲染Vueisawesome!if-else的渲染Vueisawesome!Ohno注：v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。v-else-ifABCNotA/B/C渲染分组TitleParagraph1Paragraph2
听着music睡·2020-02-15 13:00

vue学习笔记-常用指令

v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。v-html内容按普通HTML插入-不会作为Vue模板进行编译双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html{{msg}}Usingmustaches:{{rawHtml}}varvm=newVue({el:"#app",da
听着music睡·2020-02-15 11:00

vue

传送门---个人网站Vue学习及参考总结整理>varvm=newVue({el:"选择器",挂载到页面的那个元素里，即确定vue的作用范围外部可通过vm.
梁小七·2020-02-15 07:59

Vue学习笔记（双向数据绑定、样式、v-for遍历、v-if和v-show显示隐藏元素） 2020/2/14

一、v-model（1）概念v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定使用v-model指令，可以实现表单元素和Model中数据的双向数据绑定注意：v-model只能运用在表单元素中例如：input(radio,text,address,email…)selectcheckboxtextarea（2）案例（使用v-model实现简易计算器）+-*/varvm=ne
梦想是成为工程师·2020-02-14 18:45

vue学习笔记

title:vue.js学习笔记(一)date:2018-03-2819:09:16tags:vue.js前端javascript指令指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。v-if条件判断TitleParagraph1Paragraph2元素当做不可见的包裹元素ABNotA/B/Cv-if是惰性的：如果在初
这是这时·2020-02-14 16:23
上一页 41 42 43 44 45 46 47 48 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他