Vue学习笔记

Vue学习笔记——Vue-router

第1节：Vue-router入门1、解读router/index.js文件importVuefrom'vue'//引入VueimportRouterfrom'vue-router'//引入vue-routerimportHellofrom'@/components/Hello'//引入根目录下的Hello.vue组件Vue.use(Router)//Vue全局使用Routerexportdefau
Stephen-James·2019-02-24 17:21

Vue学习笔记-百度统计

百度统计是一个可以统计页面数据的平台工具，同样也可以使用在Vue页面里。百度统计——移动统计通过多年沉淀下来的分析方法论赋能给开发者提供全面、专业、精准的分析，同时，更能将APP、百度小程序、微信小程序多端数据统一查看，深刻洞察线上用户的行为特征，以实现数据驱动商业运营与产品迭代的目标。我之前分享过一篇介绍百度统计的文章，感兴趣的朋友可以了解一下：免费便捷的统计工具-百度统计在Vue单页面开发中接
赵客缦胡缨v吴钩霜雪明·2019-02-14 09:53

Vue小白课（二）——项目结构解析（Vue2.x）

GitHub地址 查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue学习笔记，以记录自己的学习心得。现分享给大家，以供参考。 作为一只前端菜鸟，这
weixin_34119545·2019-01-15 04:49

Vue学习笔记6——Webpack 案例讲解

项目地址：https://github.com/masterzz/webpack-demos一、环境准备由于npm国外镜像太慢，用cnpm代替npm处理，安装cnpm：npminstall-gcnpm--registry=https://registry.npm.taobao.org首先，全局安装webpacknpmi-gwebpackwebpack-dev-server这里会遇到第一个坑需要通过
苏云南雁·2018-12-31 00:17

vue学习笔记 list数组的添加和删除

增加{{item}}删除exportdefault{data(){/*业务逻辑里面定义的数据*/return{todo:'',list:[]}},methods:{doset(){alert('增加');},doadd(){//1.获取文本框输入的值2.把文本框的值push到list里面//把todo添加到list数组中this.list.push(this.todo);this.todo='';
深沉的搬砖工·2018-12-24 23:03

Vue学习笔记（一） 利用idea 搭建 vue 项目

环境准备工作：安装node.js环境--略安装vue-li全局安装vue-cli，在命令行中执行npminstall-gvue-cliidea准备工作：安装vue.jsFile->Settings->Plugins->Browserespositoties中搜索vue.js安装HTML添加*.vue类型File->Settings->Editor->FileTypes->HTML选中点下方的+添加
dengxianji1647·2018-12-14 11:00

vue学习笔记——组件手动挂载

在VUE中一个网页可以跟搭积木一样，由各个不同的组件搭建起来，同一个组件他可以被不同的组件使用引入;组件的使用主要有三个步骤：1.定义组件，在src文件夹下创建一个新文件夹如：components，然后在该文件夹下，创建vue组件;2.引入组件，在其他组件的里面引入该组件3.挂载组件4.使用组件，在使用到该组件的地方写出在组件中定义的组件名：组件可以同时挂载多个组件，一个组件可以同时挂载在同个组件
ass_ace·2018-11-28 15:25

VUE学习笔记(二) -computed与methods的区别

最近在学习VUE的时候，发现computed与methods的作用很像，而且一些网站上也说这两种可以互相替换使用，但实际上在用的时候，发现其实这两者之间还是有区别的。computed计算属性可用于定义属性的setter和getter方法，一般如果不特意强调的话，申明出来的会被自动当做属性的getter方法调用，也就是说computed中虽然定义的时候，形式和方法很像，其实定义的是属性，可以采用属性
心若向阳无谓悲伤·2018-11-28 14:49

Vue学习笔记之路由（一）

Vue.js路由(Vue-router)1.路由安装（1）直接引入（2）npm下载npminstallvue-router如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：在你的文件夹下的src文件夹下的main.js文件内写入以下代码importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)2
赵客缦胡缨v吴钩霜雪明·2018-11-21 13:36

VUE学习笔记——es6对象合并 数组转对象

工作中遇到了一些问题需要将数组转化为对象//arrtoobjconstarr=[{date:"2018-11-18",name:"demo1"},{date:"2018-11-19",name:"demo2"}];constobj={"2018-11-18":"demo1","2018-11-19":"demo2"}如上代码，想将arr优雅的转化为obj，首先想到了Object的assign方法合
qq_39041578·2018-11-18 20:27

Vue学习笔记(二）

练习的是一个简单的前端页面，看着视频抄的，仿去哪儿的手机端，其中包含了git的使用、vue的基础点、一些插件的应用，在这里记录一下。项目练习的源码地址：https://github.com/SeriousWatermelon/Travel.git目录1.项目环境准备1.1安装node.js运行环境：https://nodejs.org/en/download/1.2git的基础命令(gitbash
崔大崔·2018-11-01 16:42

VUE学习笔记——vue+webpack脚手架搭建

使用VUE作为前端框架的环境搭建1安装node.jsnodejs的安装方式非常简单，在官网下载msi格式的安装包，傻瓜式安装，自动全局配置C:\Users\Administrator>node-vv10.12.0在cmd窗口用node-v即可查看版本号2切换淘宝cnpmnodejs带的资源安装方式是npm，但是连国外的网，这里将其切换成国内的私服，淘宝的cnpm是很好的选择npminstall-g
qq_39041578·2018-10-24 21:15

Vue学习笔记

详见：https://cn.vuejs.org目录1.数据双向绑定2.MVVM模式3.前端组件化4.父子组件传值4.1实例4.2单项数据流4.3父组件传值约束4.4非父子组件间的传值5.生命周期钩子6.简单的模板语法6.1v-text，v-html6.2计算属性、方法、侦听器6.3计算属性的setter和getter6.4条件渲染6.5列表渲染6.6组件绑定事件7.插槽slot7.1单个插槽7.2
崔大崔·2018-09-29 18:59

Vue学习笔记之组件模板

1.is的使用在html5标准中标签里只能写,但又希望row组件的内容显示在中，可以使用is属性Vue.component('row',{template:'thisisarow'});varvm=newVue({el:'#app'});2.定义data在根组件里，定义data可以直接通过对象定义，但在非根组件里定义data，data必须是一个函数，而且要返回一个包含数据的对象，这是因为一个子组件
愚蠢的土拨鼠要变聪明·2018-09-20 18:47

一、vue学习笔记系列——vue-cli脚手架搭建项目

一、nodejs环境搭建访问Node.js官网进行安装包下载（nodejs官网传送门），安装WindowsInstaller(.msi)。二、下载安装成功后，测试是否安装成功1.打开cmd，输入node2.console.log('hello')//如果输出hello代表安装成功三、设置npm的默认安装路径，和缓存路径（可以省略此步骤）在安装nodejs安装目录中新建X64文件夹设置npm安装程序
weixin_30847865·2018-09-18 20:00

vue学习笔记-实现表格的单选删除和批量删除功能

目标：选中表格内的单独某一行，点击删除按钮，实现在表格中删除；批量删除按钮在勾选选择框后才可以被激活，点击批量删除按钮后实现删除效果。如图，点击删除按钮，弹出提示框，点击确定后删除这一行。单选采用d2-curd的表格组件方法实现，表格组件d2-curd方法可自行查阅文档，单说实现删除功能。（这里默认表格里的数据已经获取成功）首先要传入rowHandle来开启列表操作列，即在列表中出现图上的修改这一
持续5年输出bug·2018-09-17 23:48

vue学习笔记--d2-curd使用

d2-curd是专门处理表格的组件，根据自己理解它可以处理表格数据按钮等常规的操作。具体使用方法：安装插件：也可以用cnpm安装npmielement-ui@d2-projects/d2-crud-S写入main.js文件中importD2Crudfrom'@d2-projects/d2-crud'Vue.use(D2Crud)现在就可以使用了！以下是利用d2-curd将模拟数据应用到Dom代码片
持续5年输出bug·2018-09-11 23:51

Vue学习笔记01day_02.v-cloak、v-text、v-html的基本使用

Document[v-cloak]{/*display:none;*/}++++++++{{msg}}----------=================={{msg2}}1212112-->-->varvm=newVue({el:'#app',data:{msg:'123',msg2:'哈哈，我是一个大大的H1，我大，我骄傲',mytitle:'这是一个自己定义的title'},methods
菜鸟柱子·2018-09-10 22:57

Vue学习笔记（1）

在学习Vue之前，先熟悉HTML和CSS这两个语言，并且有一定的JavaScript语言的基础。相对而言前面两个大部分都是标签和引用之类的，三五天的样子就应该看的差不多不用特别深究。JavaScript语言是一个需要认真学习并且变化相对而言比较多的，在学习的同时可以一同学习Jquery会使得学习不算特别枯燥（Jquery在简化JavaScript的部分起到了很大的作用）在这里推荐几个网站：-CSS
一只超级无敌大大大的西瓜瓜·2018-09-02 15:13

vue学习笔记--Element引入

完整引入：首先要在入口文件main中：//引入vueimportVuefrom'vue';//引入ElementUIimportElementUIfrom'element-ui';//完整引入时，css样式需要单独引入import'element-ui/lib/theme-chalk/index.css';//引入APPimportAppfrom'./App.vue';Vue.use(Elemen
持续5年输出bug·2018-08-27 22:45

vue学习笔记

1、vue生命周期image.png2、created里面的参数可以缓存使用，但不能双向数据绑定例子这里面created缓存了debounce方法的等待时间，所以后面输入框的去抖操作才能正常执行，如果直接把方法写在methods或watch里面，则debounce不执行，因为每次的等待时间无法缓存。可结合debounce函数的解读来分析
捞兴·2018-08-24 12:56

Vue学习笔记

主要针对笔者在学习中遇到的一些疑问进行记录以前一直以为概念是不太重要的东西，所以一直疲于记录，但是最近发现这些原理的概念还是要在以后的学习和使用中不断反复琢磨才能更加灵活的使用，因此会在后期的学习中专门记录。Vue生命周期Vue2.0生命周期官网图从图中我们可以看到Vue运行的整个生命周期以及各个阶段的动作。beforeCreate组件实例刚刚被创建，组件属性计算之前，如data属性等；creat
yanruoxin·2018-08-23 18:49

Vue学习笔记：Slot

转自：https://www.w3cplus.com/vue/vue-slot.html在Vue中，slot也分多种，从Vue的官网中可以获知，其主要分为：单个插槽、具名插槽和作用域插槽三种父组件的内容是在父组件作用域编译，子组件的内容是在子组件作用域编译。Vue的slot一般用在父组件向子组件分发内容，该内容的编译作用域名为父组件作用域。父组件分发内容给子组件，子组件需要一个标签进行接收，分发和
weixin_30548917·2018-08-23 16:00

vue学习笔记

在进入/离开的过渡中，会有6个class切换。v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。v-enter-to:2.1.8版及以上定义进入过渡的结束状态。在元素被插入一
卡布奇洛猫·2018-08-19 17:44

vue学习笔记之动态路由和get传值

不同路由传值：可以通过动态路由1.配置动态路由(动态路径参数以冒号开头)routes:[{path:'/content/:aid',component:Content},///:aid此处配置动态路由](get):{path:'/pcontent/',component:Pcontent},2.在对应的页面this.$route.params获取动态路由的值get:this.$route.quer
一条鱼i·2018-08-15 19:27

Vue学习笔记--Vue双向绑定实现原理

      我们知道Vue可以实现数据双向绑定，Angular和Vue都是采用的MVVM模式，意思就是当M（模型层）层数据进行修改时，VM层会监测到变化，并且通知V（视图层）层进行相应的修改，反之修改V层则会通知M层数据进行修改，实现了视图与模型层的相互解耦。其中Angular是采用的脏值检测实现的，Vue是采用的发布-订阅模式+数据劫持实现的。     Vue是通过Object.definePr
cc_fys·2018-08-13 00:00

vue学习笔记八：vue项目里的导航守卫beforeEach，拦截器，以及整个登录功能实现的相关细节

这几天在公司里面用到了vue，进行开发，首先就遇到了问题，登录，以前感觉登录很简单啊，我把相关的参数传给后台，然后后台返回给我相应的code,就可以了，但是这次好像，跟以前不一样，虽然说最终原理都是一样的，好了，废话不多说，直接开始代码了我在项目里面用到了的是全局守卫，beforeEach,方便管理1、我们首先要判断哪些路由是需要进行登录的，所以呢，我们可以通过一个字段，如下{path:"mana
半夏ing·2018-07-31 22:09

Vue学习笔记_计算属性VS侦听器VS方法

官网中说，对于任何复杂逻辑，你都应当使用计算属性。computed：直接用计算属性的名字作为变量名。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。即：computed中的待计算的值所依赖的值，有改变时，才会触发计算属性重新计算，这样可以提高性能。methods:与computed的区别在于，在页面上有其他非计算属性内依赖的元素需要重新渲染时，计算属性会先看所
橙橙鲁·2018-07-29 14:24

Vue学习笔记1

声明式渲染vue的引入初步使用vue{{message}}varapp=newVue({el:'#app',data:{message:"hellovue"}})错误笔记：1.newVue中的V忘记大写，2.el的#app忘了加引号以及忘了在末尾加逗号v-bind指令鼠标悬停几秒钟查看此处动态绑定的提示信息！varapp2=newVue({el:'#app',data:{message:'v-bi
qfstudy·2018-07-13 21:51

Vue学习笔记（一）组件

在做课设的时候，动态生成表格需要写一堆js代码，于是乎决定采用一个前端框架来简化编码过程，之前已经学过Vue的一些知识了，因此直接从组件开始记录。1.简单的组件实例Vue.component('button-counter',{data:function(){return{count:0}},template:"{{count}}"})varapp=newVue({el:'.vue'})对比直接写
偷亲·2018-07-13 08:47

Vue学习笔记之Vue实例

参考资料Vue.js2.x在线测试工具https://jsfiddle.net/50wL7mdz/384238/创建一个Vue实例varvm=newVuew({//options})当创建一个Vue实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在API文档中浏览完整的选项列表。数据与方法当一个Vue实例被创建时，它向Vue的响应式系统中
aitality·2018-06-20 15:34

Vue学习笔记一 （组件）

全局组件使用Vue.component(tagName,options)可以注册一个全局组件。组件是全局的，即在Vue的任何实例下都可以使用该组件Vue.component('TodoItem',{props:['content'],template:'{{content}}'})局部组件局部组件用选项对象components属性实现注册，只能在当前实例中使用该组件varTodoItem={pro
汤初景·2018-06-09 20:56

一个Java后端的Vue自学笔记

本人最近自学了一些Vue的皮毛，写下这篇博客不是为了哗众取宠，权当是为自己做一个Vue学习笔记。这篇博客主要记录了我学习Vue基础知识，完成一个TodoList小功能的开发过程。
Haozz_1994·2018-06-02 02:01

mpvue学习笔记-之微信小程序数据请求封装

20180531152773555924152.png简介美团出品的mpvue已经开源出来很久了，一直说要进行一次实践，这不最近一次个人小程序开发就用上了它。看了微信官方的数据请求模块--request，对比了下get和post请求的代码，发现如果在每一个地方都用request的话，那会有很多代码是冗余的，于是就准备自己封装一个，下面就记录一下封装过程。注释也写在下面的代码里了。实现的结果代码要简
kung_·2018-05-31 11:00

vue学习笔记（一）

1.vue是一种渐进式JavaScript框架。2.引用vue第一种方法：第二种方法：指令样式绑定1.v-bind：class设置一个对象，动态切换class如果需切换多个class，代码如下数组语法Vue测试实例-菜鸟教程(runoob.com).active{width:100px;height:100px;background:green;}.text-danger{background:r
??or??·2018-05-29 18:43

vue 学习笔记-数据双向绑定

vue学习笔记-数据双向绑定这是我学习vue的笔记，有错误欢迎指出。1MVVM双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。
agyyl0·2018-05-13 15:01

Vue学习笔记 利用Vue 实现树形视图

这是学习代码以来的第一篇文章利用简单的树形视图实现，熟悉了组件的递归使用这是模拟的树形图数据letall={name:'all',children:{A:{name:'A',children:{a1:{name:'a1',children:{a11:{name:'a11',children:null},a12:{name:'a12',children:null}}},a2:{name:'a2',c
倪晓磊·2018-05-07 11:03

vue学习笔记四：在vue项目里面使用mock数据

首先需要在自己的项目下面npminstallmockjs--save-dev由于我的项目使用的是axios在本地模拟，所以需要npminstallaxios--save-dev上面两部分都完成，那就开始搭建了下面是我的项目结构为了进行本地的数据模拟，我在src下面建立了一个文件夹，命名为api,从图上可以看到有三个文件分别为config.jsgetdata.jsmock.jsconfig.js对应
半夏ing·2018-04-24 17:14

webpack从零开始构建项目之启动配置（一）

webpack学习：构建工具详解慕课京东金融VUE学习笔记建议结合官方文档查看此系列亮点：本系列学习笔记教程不跳过BUG调试，干货满满手动搭建一个项目项目准备创建配置文件启动的代码配置webpack学习
非黑非白-·2018-04-11 00:30

vue学习笔记一：vue项目中设置背景图片

这几天在用vue开发一个项目，真的是到处都是坑啊，就连设置图片背景，也和前面用的不一样了，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，background:url("../static/img/icon.png")no-repeat;background-size:cover;width:10rem;height:5rem;用了这个就报了一堆错,后来在网上找到了正
半夏ing·2018-04-09 21:36

vue学习笔记（一）

1.vue-cli脚手架构建vue项目前提安装node、npm，nodejs中文网，安装了node之后npm也就以前安装了，分别可以使用node-v 和npm-v 来查看安装的版本。然后全局安装vue-cli，安装一次就可以了。npminstall-gvue-cli可以使用vue-V来查看是否安装成功，及版本信息。接下来使用vue-cli构建一个vue项目，进入项目所要构建的文件目录vueinit
十三画13·2018-03-30 00:36

vue学习笔记之：为何data是一个方法

vue学习笔记之：为何data是一个方法在vue开发中，我们可以发现，data中的属性值是在function中return出来的。可为何data必须是一个函数呢？
_林冲·2018-03-15 11:00

vue学习笔记（v-text v-html v-on v-model）-panda

1.v-bindv-bindvarapp=newVue({el:'#app',data:{imgSrc:"https://cn.vuejs.org/images/logo.png"}})
Vivianluolita·2018-01-29 13:39

vue学习笔记---vue实例

每一个Vue应用都是通过Vue函数创建一个Vue实例开始的：varvm=newVue({});虽然没有完全遵循MVVM模型,但是vue的设计也受到了它的启发。因此在文档中会经常使用vm(ViewModel的缩写)变量名表示vue的实例；当创建一个vue实例时,你可以传入vue一个选项对象，那么我们如何用这些选项对象来创建你想要的行为呢！一个vue应用由一个通过newview创建的根vue实例，以及
GXing007·2018-01-24 14:31

vue学习笔记

vue学习笔记安装Vue提供一个官方命令行工具，可用于快速搭建大型单页应用。
EL_PSY_CONGROO·2018-01-13 17:07

vue学习笔记：vue-router参数

在vue-router里，参数分两种，1、动态路径参数；2、查询参数动态路径参数，这需要按路由文档里配置，例如：/user/:username获取动态路径参数时，用this.$router.params来获取动态参数值。查询参数路径里的查询参数，不需要在路由里设置，可以直接放在路由里。例如http://localhost:8000/index.htm#/hello?test=1232获取查询参数，
peade·2017-12-31 17:06

Vue学习笔记之vue-cli项目搭建及解析

Vue（一）安装node.js首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。只是这样安装的node是固定版本的，如果需要多版本的node，可以使用nvm安装http://blog.csdn.net/s8460049/article/details/52396399安装完成后，可以命令行工具中输入node-v和npm-v，如果能显示出版本号，就说明安装成功
逆袭的小菜鸟·2017-12-28 15:22

vue学习笔记（一）this.$http.get()

Vue与后端数据交互：需要引入库：vue-resource使用this.$http.get('请求地址')来发送请求我在做购物车功能页面时，使用this.$http.get('data/cartData.json')获取json中的数据，后面可加参数。then()方法异步执行，就是当then()前面的方法执行完之后在执行then()里面的方法，这样就不会发生获取不到数据的问题。右键运行html文件
qq_21069473·2017-12-07 13:12

VUE学习笔记

计算属性计算属性只有在它的相关依赖发生改变时才会重新求值，计算属性是基于它们的依赖进行缓存的//对比计算属性和watchcomputed:{a:function(){//计算属性的getter和setterget:function(){returnb+c;//当b或者c改变的时候，就会重新计算a的值},set:function(){returnb+c;//当a的值被改变的时候，会执行里面的函数}}
Liberty寒风·2017-12-06 05:50

vue学习笔记

1.vue-router配合ElementUI实现导航加:default-active="$route.path"如此设置之后就可以实现导航和页面同时变化了。图片发自App2.关于vue如何实现时间戳的转换2.1.先引用importVuefrom'vue'2.2.自定义一个实现函数functiongoodTime(value){vardate=newDate(value);varY=date.ge
柠夏z·2017-11-15 09:52
上一页 16 17 18 19 20 21 22 23 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他