Vue笔记

5、条件渲染

title:5、条件渲染date:2017-07-3119:50:10tags:vue笔记(妙味)v-if在vue中使用v-if实现判断YesNo上面这种方式只能给一个元素判断，如果是多个元素可以按照下面的写法
Gary23·2020-02-05 18:56

Vue笔记（有点乱）

Vue学习笔记(2019.7.31)目录Vue学习笔记(2019.7.31)vue基本指令用法v-cloakv-textv-htmlv-bindv-on跑马灯v-onv-modelclassv-forkeyv-ifv-showfilter，filters键盘修饰符directivevue的生命周期vue-resourceVue中的动画vue组件组件切换v-ifv-elsecomponent:is父
garxirapper·2020-01-31 22:00

vue笔记之组件

定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：1.模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；2.组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的三种方式使用Vue.exte
努力，就对了·2020-01-15 10:00

Vue笔记（1）

条件渲染：1.v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。你可以使用v-else指令来表示v-if的“else块”v-else-if，顾名思义，充当v-if的“else-if块”，可以连续使用2.v-show指令：带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。3.v-if和v-show的区别：
海的那一边·2020-01-13 14:32

vue笔记之过滤器和自定义指令

过滤器和自定义指令人员管理案例添加人员id:name:搜索关键字：idnamedateoption{{item.id}}{{item.name}}{{item.ctime}}删除HTML部分代码varvm=newVue({el:"#app",data:{id:"",name:"",keywords:"",lst:[{id:1,name:"傻大个",ctime:newDate()},{id:2,na
努力，就对了·2020-01-12 07:00

vue笔记之vue指令学习

初识vue指令什么是Vue.jsVue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。node中的express；库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需
努力，就对了·2020-01-11 08:00

Vue笔记七： Vue的自动化测试

Vue笔记七：Vue的自动化测试前言为什么我们需要测试？让产品可以快速迭代，同时还能保持高质量--阮一峰持续集成是什么？
brandonxiang·2020-01-07 03:37

Vue笔记——搭建脚手架并快速创建Vue项目

现在的Vue脚手架已经升级到3.x版本，即vue-cli3。脚手架升级之后，安装的命令发生了变化，所以这篇文章会跟大家演示新旧版本的脚手架安装过程，以及使用新旧版本脚手架创建项目的过程。下面的安装过程均是在window平台下安装。一、准备工作1.安装node.js和npmVue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js，如果你对node.js不熟悉
振礼硕晨·2020-01-04 01:48

3、计算属性

title:3、计算属性date:2017-07-2710:19:21tags:vue笔记(妙味)之前说过，模板内在插值中写表达式很方便，但是如果放太多逻辑会让模板过重难以维护。
Gary23·2020-01-02 10:18

Vue笔记八：多页面打包框架（mpa）

Vue笔记八：多页面打包框架（mpa）该文章已经过时，请移步Vue笔记十：Vue-cli3.0我记得去年很多人看了我《用Webpack构建Vue》一篇文章，但是因为webpack和vue升级速度很快，那文章很快就过时了
brandonxiang·2019-12-26 22:54

vue笔记

工欲善其事必先利其器,首先我们得有一个趁手的ide,一直习惯使用phpstorm,但是Ctrl+Alt+l的格式化实在满足不了ESLint校验我们写的代码!1.phpstorm配置ESlint检查代码image.pngCtrl+ALT+L是phpstorm自带的快速格式化的缩进量，我们需要配置eslint格式化快捷键。如图添加快捷键ALT+L即可，以后就可以用Alt+L格式化成符合eslint规则
dongshixiao·2019-12-23 05:25

Vue笔记

v-bind和v-model的区别v-bind用来绑定数据和属性以及表达式，缩写为'：'v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用v-modelv-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected绑定text{{val}}绑定radioradioval的值随着选择单
懒癌正患者·2019-12-18 11:17

Vue笔记6：生命周期

beforeCreate和created小结：created中可以操作数据，实现vue->页面的影响应用：发起ajax请求代码：//定义Test组件varTest={data:function(){return{text:'stevenqin',}},template:`我是test组件`,beforeCreate:function(){//组件创建之前console.log(this.text)
StevenQin·2019-12-16 12:54

Vue笔记一：简单入门

Vue笔记一：简单入门引言vue.js是由尤大神EvanYOU主持的MVVM项目，相对angular更轻量，相对react更好用，结合了很多前段框架的优点。入门其实，在官网的教程也十分清晰。
brandonxiang·2019-12-12 00:22

1、创建Vue实例

title:1、创建Vue实例date:2017-07-2509:10:40tags:vue笔记(妙味)一个最简单的Vue的例子Vue的核心是：允许采用简洁的模板语法、声明式的将数据渲染进DOM(与声明式相对应的是命令式
Gary23·2019-12-12 00:05

vue笔记(一)

Vue的开发一丶下载#中文下载地址:https://cn.vuejs.org/#使用方式:#1.单独使用vue.min.js。文件#2.结合node.js使用集成工具二丶vue的基本使用基本案例Documentwindow.onload=function(){//vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。//1.实例化一个vue对象,里面的参数都是以键值对形式
染指未来·2019-12-04 19:00

vue笔记

例子：https://www.iviewui.com/docs/guide/installvue模板指令文本{{msg}}控制内容的v-textv-html控制显示隐藏v-ifv-show事件绑定v-on:后面可加click，hover（缩写@），事件对象@click="show($event)"属性绑定v-bind:后面可加href，src,class,type,width等（缩写：）循环v-f
头头_d92d·2019-11-30 17:25

Vue笔记--通过自定义指令实现按钮操作权限

经常做中后台系统，此类系统的权限是比较重要，拿自己做过的一些项目做个笔记。Vue实现的中后台管理系统。按钮操作权限的空置一般都是通过自定义指令Vue.directive。按钮通常我们会把从后台请求过来的数据存贮到Vuex或localStorage，接下来我们先注册一个全局自定义指令并监控它Vue.directive('has',{bind:function(el,binding){constper
陌上人如玉，公子士无双·2019-11-26 15:00

《Vue笔记01: 我与唐金州二三事》

最近我在收看唐金州在极客时间发布的《vue从入门到精通》，颇有收获。唐金州，一点资讯前端技术专家，曾在蚂蚁金服就职，也是开源组件库antdesignvue的作者，虽然唐老师写的antdesignvue有一些瑕疵，但不得不承认，能以一己之力撸完一个UI框架，是真的强，而他本人对于vue的理解也到很深的境界，于是我特做此视频笔记，较为零散，没什么章法，只是对于一些比重要的或者比较细节的地方做一下记录。
陌上兮月·2019-11-25 13:00

Vue笔记

ES6常用语法关键字let/varlet为作用域严格的varES5之前因为if和for都没有块级作用域的概念，所以在很多时候，都必须借助于function的作用域来解决应用外面变量的问题（闭包）const定义常量，在定义时就必须赋值，若常量指向的是对象，则可以对对象的内部属性进行修改对象增强写法对象属性简写letname='xiaoming'//ES6之前letobj1={name:name}//
月下梦花落·2019-11-14 23:00

vue笔记（四）注册组件，路由，vuex

官网一、项目中的组件注册二、路由三、vuex一、项目中的组件注册1.全局importLoadingfrom'@/components/loading';//封装的loading组件Vue.component('Loading',Loading);2.局部importantloadingfrom'./components/loading'components:{loading}二、路由1、路由配置2
Start2019·2019-11-14 16:30

vue笔记 父子组件传值1

用户名:exportdefault{props:['morenwenzi'],data:function(){return{username:""}},}另外在index.js中需要绑定一下这个组件importVuefrom"vue";importhomefrom"./../components/home.vue";letparam={el:'.app2',components:{"homepag
丧心病狂的小菜鸡·2019-11-07 12:28

初识Vue笔记

参考教程：1、Vue官方教程2、菜鸟教程笔记(一)、基础1、当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。值得注意的是只有当实例被创建时就已经存在于data中的属性才是响应式的。例外：使用Object.freeze()数据对象，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。2、生命周
鸢尾嵌宇·2019-11-07 10:59

Vue 笔记三：Vue2.0与1.0的区别

Vue笔记二：Vue2.0与1.0的区别升级的区别与angular的断层式升级不同，vue延续了自己的风格。在命名方式和API上有一些区别，掌握它们是你升级整个项目的关键。
brandonxiang·2019-11-06 01:22

Vue笔记（4） - 计算属性：computed 与 侦听器：watch

https://cn.vuejs.org/v2/guide/computed.html不得不说，文档写的真好。想起曾经学Angular、Ionic时看的英文文档，学了之后却没什么用，说多了都是泪。以下笔记部分摘自官网{{info}}...varapp=newVue({el:'#app',data:{name:'heqi',age:20,//info:this.name+""+this.age这样写
ceido·2019-11-06 00:43

vue笔记——后台数据存储

1：sessionStoragelocalStorage和sessionStorage属性允许在浏览器中存储key/value对的数据。sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。范例：存储数据（表单中提交的数据）sessionStorage['username']=this.loginForm.loginName;取出数据sessi
似清风·2019-10-18 10:00

vue笔记

createdmounted区别：created运行时，还未挂载到DOM，不能访问到$el属性，可用于初始化一些数据，但和DOM操作相关的不能在created中执行；monuted运行时，实例已经挂在到DOM，此时可以通过DOMAPI获取到DOM节点vue-cli项目引入axios安装axios：npminstallaxios--save只需要在需要的vue文件中引入axios就可以。import
手指乐·2019-10-15 15:18

Vue笔记-2.发布订阅

前言什么叫做发布订阅，简单来说就是爷爷、爸爸和孙子祖孙三代的通信现在有个需求，做个tabsimage.pngimage.png思路如下所示：image.png首先会创建五个组件，它们分别是tabs(爷爷)，head(大儿子)，item(大儿子的儿子们)，body(二儿子)和pane(二儿子的儿子们)一开始item1是亮着的，那么pane也应该是亮着的。倘若这时候要是点击了item2，怎么通知到pa
如梦初醒Tel·2019-08-29 15:07

Vue笔记-2.发布订阅

前言什么叫做发布订阅，简单来说就是爷爷、爸爸和孙子祖孙三代的通信现在有个需求，做个tabsimage.pngimage.png思路如下所示：image.png首先会创建五个组件，它们分别是tabs(爷爷)，head(大儿子)，item(大儿子的儿子们)，body(二儿子)和pane(二儿子的儿子们)一开始item1是亮着的，那么pane也应该是亮着的。倘若这时候要是点击了item2，怎么通知到pa
如梦初醒Tel·2019-08-29 15:07

【Vue笔记】 v-model指令与v-bind指令区别

v-bind只能实现数据的单向绑定，从M绑定到V，无法实现数据的双向绑定。v-model指令可以实现表单元素和Model中的数据的双向数据绑定。v-model指令只能运用在表单元素。Document{{msg}}letvm=newVue({el:'#app',data:{msg:'肥肥好可爱啊啊啊'}})
什么时候可以升4级·2019-08-02 09:44

【Vue笔记】事件修饰符

Vue中事件修饰符：.stop阻止冒泡.prevent阻止默认事件.capture使用事件捕获机制.self只有当事件在该元素本身（比如不是在子元素）触发时触发回调.once事件只触发一次css代码如下：.outer{padding:20px;background:blue;}.inner{width:250px;height:200px;background:red;}js代码如下：//创建vm
什么时候可以升4级·2019-08-02 09:52

VUE笔记：多组件透传之provide / inject

vue前言这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉React，这与React的上下文特性很相似。版本vue2.2.0新增类型provide：Object|()=>Objectinject：Array|{[key:string]:string|Symbol|Object}详细provide选项应该是一个
Yun丶Lei·2019-06-25 14:25

vue入门教程 简单实现一个hello world

vue入门教程简单实现一个helloworld此篇适合没学习过vue的小白观看，有一定基础可观看笔者vue笔记相关文章，本文主要介绍，和讲解vue。
MmM豆·2019-05-21 11:26

Vue笔记

一：环境搭建1.安装node.js2.cnpm下载包地址：http://npm.taobao.org/安装cnpm:npminstall-gcnpm--registry=https://registry.npm.taobao.org3.搭建vue的开发环境：https://cn.vuejs.org/v2/guide/installation.html1、必须要安装nodejs2、搭建vue的开发环
小努努努力·2019-05-08 11:46

vue笔记 递归组件的使用

递归组件什么是递归组件？组件自身去调用组件自身。代码示例DetailList.vue(子组件-递归组件){{item.title}}Detail.vue（父组件）importDetailBannerfrom'./components/Banner.vue'importDetailHeaderfrom'./components/Header.vue'importDetailListfrom'./co
奔跑的太阳花·2019-04-26 14:00

Vue笔记 -- 组件模板&生命周期

一、生命周期lifecycle.png二、模板//导入组件importVHeaderfrom'./components/header/v-header.vue'exportdefault{name:"Home",//状态data(){return{msg:"WelcometoYourVue.jsApp"};},//方法methods:{show(){console.log("showfunctio
lyking·2019-03-18 17:33

Vue笔记

vue应用结构组件树和storevue-router是占位符，放在需要显示路由视图的地方子组件里面的需要配置子路由是vue封装的路由跳转，本质上是a标签vuexvuex流程图actions、mutations就像事件，需要dispatch、commit去触发概念state：存放数据的地方，页面数据最好都统一放在这里。相当于组件中的datagetters:也可以理解为属性数据，相当于组件中的comp
_CCoder·2019-03-14 18:21

【vue笔记】调试日志

1.main.js中的挂载不对：报错内容：cannotfindelement:#App报错原因：el:‘#app’，id为app的元素，这个a字母是小写的解决方式：在main.js文件中将el:’#App’改为el:‘#app’//TheVuebuildversiontoloadwiththe`import`command//(runtime-onlyorstandalone)hasbeenset
AXIMI·2019-03-08 10:23

【vue笔记】7.vue自定义指令

在Vue中自定义指令：insertedbind指令的简写形式inserted:inserted主要涉及和行为相关的指令，来看这个界面：现在我们想自定义一个指令v-focus，使得每次进入页面时，我们的光标都停在search的输入栏。为了实现这个功能，可以定义全局指令，代码如下：Vue.directive('focus',{inserted:function(el){el.focus()}})Vue
AXIMI·2019-03-04 13:51

【vue笔记】4.样式

vue中的两种样式使用方式：class样式内联样式class样式Title.red{color:red;}.thin{font-style:italic;}.active{letter-spacing:0.5em;}{{msg}}varvm=newVue({el:'#app',data:{msg:'vuetest'}})显示效果为：内联样式Title{{msg}}varvm=newVue({el:
AXIMI·2019-03-01 13:30

Vue笔记（五）——Token&生命周期

Token定义：令牌，一般用于用户身份验证Token的特点随机性不可预测性时效性无状态跨域node所需模块jsonwebtoken生成并加密Token//设置对象letuser={};//加密密钥letsecret='0000';lettoken=jwt.sign(user,secret,{'expiresIn':60*60//设置过期时间});解密Token//获取前端发送的tokenletto
FangHanJia·2019-02-28 00:00

【vue笔记】3.事件修饰符

修饰符功能.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self只有事件在该元素本身触发时触发回调（别人影响不了它，它也影响不了别人）.once事件只触发一次.stop由于vue界面的特殊性，组件一般是一层层叠加起来的，所以触发中心事件时，周边事件也会随之触发，即冒泡。例如，对于下面的vue结构：Title.inner{height:150px;b
AXIMI·2019-02-27 20:59

【vue笔记】1.vue结构分析--创建一个简单的vue工程来说明一下vue的基本框架

在控制台创建一个简单的vue工程：在需要放置工程的目录下打开控制台，输入：vueinitwebpacktest可以创建一个名为test的项目。然后会提示对项目的一些属性进行配置：Projectname工程名，不能使用大写一般直接enterProjectdescription输入一句话描述这个工程Author作者Vuebuild打包方式直接enterInstallvue-router是否安装路由选y
AXIMI·2019-02-24 18:30

vue笔记（待更新）

1.v-model指令(自定义属性)在给input元素添加v-model属性时，默认会把value作为元素的属性，然后把‘input’事件作为实时传递value的触发事件,如2中例2.v-show如果元素存在即显示例没有输入时输入18时3.v-if有输入且属性存在时跟v-show效果相同，若不存在则删除整行(存疑)4.v-for少用于字符串迭代，一般用于同类型对象迭代。实例如下代码效果5.v-bi
coherence_yp·2018-12-18 22:58

Vue笔记10：axios

axios.get|post|put|delete(url,options)varApp={template:`发ajax`,methods:{sendAjax:function(){//让组件具备axios对象的引用//axios.get|post|put|delete(url,options)axios.get('/http://127.0.0.1/upload').then(function
StevenQin·2018-12-16 13:00

Vue笔记9：路由二

路由传参查询字符串方式1、配置:to="{name:'detail',query:{id:hero.id}}"2、规则{name:'detail',path:'/detail',component:Detail}3、获取this.$route.query.id4、生成path方式1、配置:to="{name:'detail',params:{id:hero.id}}"2、规则{name:'deta
StevenQin·2018-12-15 22:16

Vue笔记——项目中设置mock数据

一、情景设定我们在使用Vue写前端项目的时候，可能会需要后端传回来的数据来进行测试。但是有的时候我们没有后端的环境，不能获取到我们想要的数据。这个时候我们就需要在Vue项目中设置一些假数据，即mock数据。配置完成之后，我们就可以像请求后台数据一样，通过一个特定的url来获取到我们需要的mock数据，比如:/api/goods、/api/ratings等。今天就跟大家分享如何在自己的Vue项目中设
fengzhen8023·2018-12-02 19:17

Vue笔记4：过滤器和监视改动

filterfilters全局过滤器（所有组件有效）：Vue.filter(''过滤器名,'过滤函数')组件内过滤器（组件内有效）：Vue.filters(''过滤器名,'过滤函数')代码：过滤器varApp={template:`过滤后数据为：{{myText|reverse("中文版：")}}`,data:function(){return{myText:'',}},filters:{//组件
StevenQin·2018-11-04 15:33

Vue笔记2：组件

最原始组件的调用//声明入口组件组件的首字母大写varApp={template:'我是入口组件'，methos:{//.......}};//只有在newVue中，才能使用单标签的组件newVue({el:'#app',components:{//声明要用的组件们//key是组件名，value是组件对象app:App},template:''//入口组件});总结：1，生出子，声明子，使用子建建
StevenQin·2018-11-04 00:49

Vue笔记之props验证

原文链接：https://juejin.im/post/5bc1f6096fb9a05cea7fb359前言工作的时候用到了iview-ui框架,结果发现它的tree树形控件与element-ui根本不是一个套路,它使用了render函数去渲染节点.本来我是应该去官网学render函数的,没想到被一把按在props上,相关API是有介绍的,是我蠢,之前没找见,所以转载别的小伙伴的文章,可那是博客园
weixin_33716557·2018-10-13 14:43
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他