Vue笔记

Vue笔记--Router路由--VueRouter--六、嵌套路由

六、嵌套路由路由由多层嵌套的组件组合而成，这时就需要使用嵌套路由配置路由使用children属性进行嵌套路由中的子路由设置示例首页首页2constroutes=[{path:'/',component:{template:`页面1页面2`},//设置子路由children:[{path:'index_page1',component:{template:`内容1`},//子路由children:[
德芙小雨更配·2021-03-17 17:42

vue笔记-vue的生命周期和生命周期函数（待补充）

vue实例生命周期1、创建beforeCreate：刚从内存中创建实例、此时data和methods还没被创建。created：此时实例创建ok、data和methods已经创建ok，还没又开始编译。beforeMount：完成编译，但是没有挂载到mounted2、运行beforeUpdateupdated3、销毁beforeDestroydestroyed挂载到页面容器
Hush____·2021-03-16 09:12

vue笔记总结

VUEvue框架的两大核心：数据驱动和组件化。第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM）第二周：大家需要转变编程思维的习惯：组件化一、前端开发历史1994年可以看做前端历史的起点（但是没有前端的叫法）1995年网景推出了JavaScript1996年微软推出了iframe标签，实现了异步的局部加载1999年W3C发布第四代HTML标准，微软推出用于
·港岛妹妹·2021-02-01 16:02

vue笔记记录四之vuex

vuex1.vuex理解在线文档:https://vuex.vuejs.org/zh/guide/简单来说:对vue应用中多个组件的共享状态进行集中式的管理(读/写)1.状态自管理应用1)state:驱动应用的数据源2)view:以声明方式将state映射到视图3)actions:响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)2.多组件共享状态的问题1)多个视图依赖于同一状态2
麦当-咕咚-迪亚·2021-01-25 22:10

VUE 笔记1基础部分

VUE笔记1基础部分v-text=‘app’不解析标签v-html=‘app’解析标签v-cloak指令设置样可以解决屏幕闪动的问题属性解析v-bind:src=‘imgs.jpg’简写:src=‘img
Hope°·2021-01-23 19:28

vue笔记

一：vue介绍1：为什么要学习vue饭碗级别技术应用非常广泛github生态好（插件，ui库）2：vue是什么https://cn.vuejs.org/框架提供了一整套东西从一个框架切换成另一个框架不容易库jquery提供了一些api从一个库切换到另一个库很方便渐进式JavaScript框架作者：尤雨溪angular谷歌2013指令系统reactfacebook2014diff算法vue尤雨溪4：
Hassanh·2021-01-20 10:43

Vue笔记十二——了解vue-router点进来！！！

文章目录vue-router详解认识路由什么是路由？后端路由阶段前后端分离阶段单页面富应(SPA页面)用阶段：前端路由的核心是什么呢？url的hash和HTML5的historyvue-router基本使用演示路由的默认路径HTML5的history模式router-link标签补充通过代码修改路由动态路由路由懒加载（官方）把组件按组分块把组件按组分块打包文件解析懒加载使用vue-router嵌套
阿牛大牛中·2021-01-12 00:44

Vue笔记十——webpack敲重点！！！（详解）

文章目录Webpack详解认识webpackwebpack的安装webpack的起步与配置准备工作局部安装webpack建立webpack.config.js文件package.json中定义启动loader的使用（核心）什么是loader？css文件处理less文件处理图片文件的处理ES6语法处理webpack中配置Vueel和template区别plugin（插件）的使用添加版权的plugin
阿牛大牛中·2021-01-07 15:38

Vue笔记三——计算属性(computed)

文章目录计算属性什么是计算属性？计算属性的复杂操作计算属性的setter和getter计算属性的缓存计算属性什么是计算属性？我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示比如我们又firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们
阿牛大牛中·2021-01-01 21:26

2020-12-28

title:Vue学习date:2020-12-0620:23:50tags:[随笔,Vue学习,入门]top:4Vue笔记以下是我最近学习Vue的总结,现在分享给大家，望给大家带来收获！
_一陈不染·2020-12-28 12:21

[Vue笔记] 仿照`Teambition`手写`task-panel` ---- 组装篇

Introduction构成task-panel的组件都已经写好了，这是如何处理各组件dropdown接口active向上传递toggletoggle-menu,参数actioncreator接口active向上传递toggleeditor接口active向上传递submit,参数inputTextcancelcard接口donecontent向上传递toggle组件实现自身接口1.title表示
nesteiner·2020-12-26 16:52

[Vue笔记] 仿照`Teambition`手写`task-panel` ---- 组件篇

Introduction今天小试牛刀，试着写一个task-panel，不过涉及的组件有点多，先写好组件部分，再把他们拼装成task-panel设计需求结构说明组件由三个div模块组成，分别为head,operator和card-gridhead由标题，任务个数，和一个dropdown组件构成operator由一个长条按钮creator和编辑框editor组成，这两个部分不能同时存在card-gri
nesteiner·2020-12-26 16:52

vue笔记第一部分

vue笔记记录11.1vue的基本认识官方学习文档:link官网：https://cn.vuejs.org/介绍描述:1.渐进式JavaScript框架2.作者-尤雨溪3.作用:动态构建用户界面特点:1
麦当-咕咚-迪亚·2020-12-24 22:03

[Vue笔记] 简单写一个`dropdown`组件

项目介绍闲得没事，顺便把Teambition的dropdown用自己的技术实现一下，顺带把笔记也做好设计需求结构组成一个三点的图标作为激活dropdown的菜单栏打开的入口entrydropdown的菜单栏menumenu中由更小的menu-item组件构成，这是我自己的想法，为了能够复用布局要求menu需要以entry为参照，定位在下方一定位置menu在dropdown未被激活时，不能显示men
nesteiner·2020-12-18 11:56

[Vue笔记] transition属性以及应用

1.什么是transition属性，为什么需要用到他一个标签的属性变化难免过于生硬，我们想通过放缓这个过程来达到美化的效果，幸运的是，CSS为我们提供了transition(过渡)属性，只需简单的提供需要变化的属性和动画时间即可2.Playground菜鸟教程在线编辑器3.个人的一些理解为状态A变换到状态B提供过渡时，只需在原来的状态A上添加transition属性，就能得到过渡的效果，当状态恢复
nesteiner·2020-12-17 12:31

狂神说Vue笔记整理

狂神说Vue笔记想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。
one peice·2020-12-11 09:04

Vue笔记（插槽 slot 和渲染函数 render）

1插槽slot《插槽官方文档》插槽是什么？初看官方文档看得一脸懵逼。后来看了《大白话vue——slot的作用与使用》才明白原来是这么一个简单的东西。插槽可写入到内，顾名思义使用了它，相应它的内容就可以插换各种各样的组件。这是父组件显示的东西想要显示的东西举例子说，上面的代码为一个vue组件的部分，它导入了一个sonComponent子组件，同时导入的子组件中又内嵌了标签，正常来件这个标签的内容并不
缩缩北行鸟·2020-12-09 17:04

vue笔记-19（vue路由参数和嵌套路由）

路由规则中定义参数使用查询参数则不需要修改path,调用方式，在组件模板中使用this.$route.query.id获取使用路径变量传参，需要修改path,如”/login/:id“。调用方式，使用this.$route.params.id代码demo02vue-router路由参数.router-link-active{color:red;background-color:green;font
7ColorLotus·2020-10-14 11:18

vue笔记-6 vue中router路由 路由参数的传递

Vue中的路由VueRouter路由:根据请求的路径按照一定的路由规则进行的请求转发从而帮助我们实现请求的管理作用:在vue中实现组件的动态切换在线引入路由的cdn:``Title点我登录点我注册//创建登录的组件constlogin={template:"登录"};//创建注册的组件constregister={template:"注册"};//创建路由对象constroute=newVueRo
m0_47734729·2020-10-09 17:38

vue笔记-17（vue路由基础）

什么是路由后端路由：对于普通的网站，所有的超链接倒是URL地址，所有的URL地址都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过URL中的HASH(#号)来实现不同页面之间的切换，同事hash有一个特定：HTTP请求不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）vu
7ColorLotus·2020-09-28 11:36

vue笔记背景和基础day01

文章目录1背景1vue.js是目前最火的的前端框架2react是最流行的一个前端框架3前端三大框架2学前了解1vue2mvc:后端框架3mvvm:前端框架4学习vue原因5库和框架入门使用1vue基本使用代码2vue基本指令学习1渲染指令拓展2v-cloak指令拓展3v-bind指令4v-bind之class绑定5v-bind之style绑定(使用比较少)6v-on绑定事件7阻止默认行为8数据绑定
laker Zhang·2020-09-27 21:31

vue笔记-16（组件-父子组件数据和方法传递）

父组件向子组件传值子组件中，默认无法访问到父组件中的data上的数据和methods中的方法父组件可以在引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部供子组件使用把父组件传递过来的parentmsg属性，先在props数组中，定义一下，这样才能在子组件中使用这个数据组件中的所有Props中的数据，都是通过父组件传递给子组件的子组
7ColorLotus·2020-09-27 10:45

Vue笔记： MVVM模式和MVC模式、第一个Vue程序

文章目录MVVM模式和第一个Vue程序1.什么是MVC2.什么是MVVM3.为什么要使用MVVM4.MVVM的组成部分ViewModelViewModel5.Vue6.MVVM模式的实现者7.为什么要使用Vue.js8.第一个Vue程序测试MVVM模式和第一个Vue程序1.什么是MVCMVC模式代表Model-View-Controller（模型-视图-控制器）模式。这种模式用于应用程序的分层开发
_七七·2020-09-26 14:15

Vue笔记整理-总结梳理篇：快速入门系列、专题系列、企业项目实战系列

声明：本教程不收取任何费用，欢迎转载请注明出处，尊重作者劳动成果，不得用于商业用途，侵权必究！！！目录一、前言二、Vue快速入门系列1、Vue基础2、本地应用：常见指令3、网络应用：axios三、Vue专题系列1、路由的使用四、企业项目实战系列五、其他系列一、前言最近花一些时间，把以前自学前端Vue框架的印象笔记内容，发布到我的csdn博客上与大家分享，为了方便查看做一个梳理小结，之后会继续更新。
鲁迷那·2020-09-17 06:18

Vue笔记整理，让你快速入门Vue.js：02_1.Vue基础：Vue简介、Live Server的安装使用、第一个Vue程序

目录一、前言二、Vue简介1、JavaScript框架2、简化DOM操作3、响应式数据驱动三、第一个Vue程序1、浏览官网2、开发环境版本和生产环境版本3、LiveServer的安装4、LiveServer的使用5、Vue编码第一步：导入开发版本的Vue.js第二步：创建Vue实例对象，设置el属性和data属性（JS）第三步：使用简洁的模板语法把数据渲染到页面上（HTML）实现三步以后的完整代码
鲁迷那·2020-09-17 06:44

vue笔记---表单修饰符

#lazy在默认情况下，v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy,从而转变为在change事件中同步。在change而不是input事件中更新#number如果像自动将用户的输入值转为Number类型（如果原值的转换结果为NAN则返回原值）可以添加一个修饰符number给v-model来处理输入值：这通常很有用，因为在type="number"时HTML
qq_34530330·2020-09-16 23:43

vue笔记

--------------setTimeout---------setTimeout(()=>{this.actAdd();},1000);let_this=this;setTimeout(function(){_this.actAdd()//娃娃消失},1000);vue-pdf流转urlhttps://blog.csdn.net/m0_37852904/article/details/959
ozhy111·2020-09-16 15:34

vue笔记 —— 第一个vue程序（狂神）

1、MVVM1.1、什么是MVVMMVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于JavaApplet，简单点说就是在浏览器上运行WPF）的架构师KenCooper和TedPeters开发，是一种简化用户界面的事件驱动编程方式。由JohnGossman（同样也是WPF
lzh~·2020-09-11 11:52

【Vue笔记四】 vue+elementUI

element官网：https://element.eleme.cn/#/zh-CN具体的初始化步骤在上一篇：https://blog.csdn.net/Deeeelete/article/details/106198633这里同样以管理员身份开命令提示符，npminitwebpack[项目]来初始化以一个项目，然后进入其目录npminstall，并且下载vue-routernpminstallv
Deeeelete·2020-09-11 07:05

vue笔记 day1 nodejs vue安装

Node.jsNode.js是一个基于ChromeV8引擎的JavaScript运行时。在Node上运行的JavaScript。安装Node.js官网：http://nodejs.cn/download/1）msi下一步、下一步安装2）解压，配置环境变量安装注意：浏览器、官网下载时，出现下载失败的情况：1）改用迅雷等其他下载工具2）国内淘宝镜像http://npm.taobao.org/mirro
jinangailiuzi·2020-09-10 21:40

Vue笔记（七）—— Vue 引入自定义JS步骤详解

1.创建自定义JS：/my-project/static/xxx.js2.xxx.js增加export供外部调用：letOPT_TITLE={"create":"新建","update":"编辑","delete":"删除","detail":"详情","select":"查询",};export{OPT_TITLE,}3.在需要的模块引入：import{OPT_TITLE}from"../../
是是非非iiee·2020-09-10 18:08

vue笔记整理2:表单操作、表单修饰符(number、trim、lazy)、自定义指令、计算属性、侦听、过滤器(日期格式化)、生命周期、数组(变异数组、替换数组、响应式数组、响应式对象)

一、表单操作【将表单里的数据进行双向绑定】输入框:姓名:单选框:性别:男女复选框:爱好:游泳看书敲代码下拉框(单选):
小黄呀呀呀·2020-09-10 16:15

Vue笔记——在Vue项目中引入外部js文件

在普通的项目中，我们可以通过来引入外部的js文件，但是在Vue项目中，就不可以使用这种方式了，需要使用ES6语法来引入，同时还要对已有的js文件做相应的修改。一般情况下，我们引入外部js文件，是要调用js文件中的函数。在Vue项目中，我们首先要使用export命令将这个函数抛出，然后才能在其他的Vue组件中使用import命令引入。同时还要注意外部js脚本的存放位置，不能放在components文
fengzhen8023·2020-09-10 13:15

Vue笔记：JavaScript高阶函数

一些好用的循环方式1、forinfor(letiinarray){}这里i是数组每一项的index2、foroffor(letitemofarray){}这里的item取到的是数组中每一项3、js中的数组高阶函数filterarrayObject.filter(function(n){//process})每从数组中取得一个元素，就会执行这个filter的回调函数这个回调函数的要求的返回值必须是b
乔木木木木·2020-08-26 08:59

vue笔记（二）：vue的核心思想之数据驱动

vue.js的核心思想包括：数据驱动和组件化思想。什么是数据驱动？什么是事件驱动？1.事件驱动所谓的事件驱动简单来说就是用户通过点击，修改，删除，输入等等，来操作DOM，并触发对应的事件，然后通过后台响应处理，随之更新UI。2.数据驱动，更直白来说就是不操作DOM，用数据来渲染，通过虚拟的抽象数据层来直接更新页面。当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。那你要
learning_H·2020-08-25 17:00

Vue入门基础笔记

VUE笔记(MVVM数据驱动视图)1.绑定元素varapp=newVue({//el就是element不能使用htmlbody只能使用普通元素el:'#app',data:{message:'HelloVue
是吗乔治·2020-08-25 11:26

Vue笔记（八）—— Vue 子组件利用父组件数据/props初始化data及问题详解

接上篇：Vue自定义父组件向自定义子组件传值详解props:['initialCounter'],data:function(){return{counter:this.initialCounter}}这是官网给出的示例，对子组件改写，部分代码如下：用户名登录名密码data(){return{//利用父组件数据初始化显示userDetailOfParent:this.userDetailOfSon
是是非非iiee·2020-08-24 20:55

vue笔记[class与style绑定、条件渲染、列表渲染]

1.class与style绑定理解在应用界面中,某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术class绑定:class=‘xxx’表达式是字符串：‘classA’表达式是对象：{classA:isA,classB:isB}表达式是数组：[‘classA’,‘classB’]style绑定:style="{color:activeColor,fontSiz
蒲月霖·2020-08-23 03:22

Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解

缺乏耐心的读者请主要关注标红部分！因部分内容自动转为代码格式，所以代码部分请主要关注注释部分！1.Table表格组件内容自定义：官网Table表格组件部分示例代码：columns12:[{title:'Name',slot:'name'},{title:'Age',key:'age'},{title:'Address',key:'address'},{title:'Action',slot:'ac
是是非非iiee·2020-08-23 03:49

Vue笔记——v-on用于绑定事件

//事件名称：方法v-on:事件=“方法”点我提交表单JSvarapp=newVue({el:'#app',methods:{onClick:function(){console.log('clicked');},onEnter:function(){console.log('mouseenter');},onOut:function(){console.log('mouseleave');},o
shiki0083·2020-08-23 02:27

Vue笔记——v-bind用于绑定数据或元素属性

HTML.active{background:#a10;}YO.//v-bind简写为：JSvarapp=newVue({el:'#app',data:{url:'http://www.baidu.com',isActive:true,}});
shiki0083·2020-08-23 02:27

Vue笔记 (三) 绑定属性v-bind和计算属性computed

v-bind基本用法v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(后期介绍链接)。前面学习的指令主要作用是将值插入到我们模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定，比如：动态绑定a元素的href属性、动态绑定img元素的src属性。这时可以使用v-bind指令来动态绑定属性百度一下简写方式如下:百度一下class绑定很多时候，我们希望动态
楠丶·2020-08-23 00:35

vue笔记 (十) vue-cli2和vue-cli3的使用与对比

CLI是Command-LineInterface,翻译为命令行界面,俗称脚手架。VueCLI是一个官方发布的vue.js项目脚手架，使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。vue-cli的使用前提，已安装node和webpack。vue-cli2安装$npminstall-g@vue/cli注意:上面安装的是vue-cli3（现在是4）的版本，如果需要想按照vu
楠丶·2020-08-22 19:37

Vue笔记（十六）—— Vue PageHelper（SpringBoot）实现后台分页

前端开发请直接跳到第4歩1.pom引入依赖：com.github.pagehelperpagehelper5.1.2com.github.pagehelperpagehelper-spring-boot-autoconfigure1.2.3com.github.pagehelperpagehelper-spring-boot-starter1.2.32.增加pagehelper配置：方法一：在ap
是是非非iiee·2020-08-22 14:55

Vue笔记（六）——Vue组件通信&Vuex

组件通信vue本身的组件通信父==>子：父组件向子组件传参或者调用子组件的方法子==>父：子组件向父组件传参或者调用父组件的方法兄弟之间：兄弟组件之间传参或者调用方法父子通信传参-props思路：定义子组件的属性（自定义），父组件赋值给子组件调用方法（1）-$refs思路：定义子组件的属性-ref="a",父组件通过：this.$refs.a.子组件方法();调用方法（2）-children思路：
FangHanJia·2020-08-22 10:50

饿了么Vue笔记 2018-09-03

1.功能技术：vue-resource:后端Vue-router：前端第三方库：better-scroll最大程度组件化收藏功能利用localstorage接口图标字体应用移动端1px边框cssstickyfooter布局flex弹性布局2.使用工具Vue-cli:脚手架搭建基本代码框架Vue-router：官方插件管理路由Vue-resource:ajax通信webpack构建工具es6+esl
TTTXTTT·2020-08-21 10:36

Vue笔记

1、Vue的数据渲染与使用（涉及到的直接下载的文件在文末有链接）Vue.js的第一次使用Document{{msg}}//2.创建vue的实例varvm=newVue({el:'#app',//表示当前我们new的这个vue实例，要控制页面上哪个区域data:{//存放的el中用到的数据msg:'欢迎学习Vue'}})v-cloak、v-text、v-html、v-bindDocument[v-c
断剑白发·2020-08-21 06:28

vue笔记

vue笔记vue-cli3正式环境去掉console.logvue-cli3vuex数据持久化vue-cli3正式环境去掉console.lognpminstallterser-webpack-plugin
净土学修·2020-08-21 04:35

Vue笔记-vueRouter路由与Vuex

目录Vue-router路由基础简单路由实例Vuex基础基础数据流实例多模块数据流实例Vue-router路由基础简单路由实例安装：根文件夹下终端输入：npmivue-router在src下创建一个文件夹pages,其中创建两个vue文件a、b;在src下创建router.js,importVuefrom'vue';importVueRouterfrom'vue-router'importpage
_Zou·2020-08-20 22:13

Vue笔记（六）——Vue组件通信&Vuex

组件通信vue本身的组件通信父==>子：父组件向子组件传参或者调用子组件的方法子==>父：子组件向父组件传参或者调用父组件的方法兄弟之间：兄弟组件之间传参或者调用方法父子通信传参-props思路：定义子组件的属性（自定义），父组件赋值给子组件调用方法（1）-$refs思路：定义子组件的属性-ref="a",父组件通过：this.$refs.a.子组件方法();调用方法（2）-children思路：
FangHanJia·2020-08-20 21:42
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他