E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
Vue学习笔记
入门 vue 学习笔记
Vue学习笔记
学习资料来源:网易云Vue视频:ES6语法Vue语法Vue组件使用Vue组件间通讯VuerouterVueresource目录用[TOC]来生成目录:
Vue学习笔记
目录ES6语法Vue语法
Hover_Z_快跑
·
2020-08-23 19:15
vue学习笔记
(一)入门
前言随着前端不断的壮大,许多公司对于前端开发者的需求也越来越多了,作为一名优秀的前端工程师,如果连vue和react都不会的话,那真是out了,为什么那么说呢?这是我在招聘网站上截的一张图,十家公司有九家都是需要对vue或者react熟悉,当然仅仅熟悉肯定是不够的,毕竟掌握住了才能保住自己的铁饭碗,否则的话可能会被炒鱿鱼,精通vue或者react话就可能就需要很长时间了,反正我是不敢说精通,只能说
二郎神杨戬
·
2020-08-23 18:40
vue系列
vue学习笔记
(六)表单输入绑定
前言在上一章
vue学习笔记
(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的,例如登陆
二郎神杨戬
·
2020-08-23 18:40
vue系列
Vue学习笔记
-day1
1.导入vue.js,具体代码和教程在https://learning.dcloud.io/,可以直接在HBuilder中导入代码,非常方便,适合学习。2.如下图,先导入vue.js,再创建了一个Vue实例,实例中有两个,一个是el,用于定位元素,如果是类选择器,那用".类选择器名称";如果是id选择器,那就用“#id选择器”。另外一个是data,用于保存数据和变量,一般是变量名:值,即key:v
卑微的老王
·
2020-08-23 17:40
Vue学习
vue学习笔记
1:v-for渲染的“就地复用”策略
今天开始学习前端最流行的框架之一:vue.js,之前大概看过一些AngularJS的文章,但没有仔细学习过一个框架,所以这应该是我学习的第一个前端框架。好记性不如烂笔头,在此写一些学习笔记,以记录学习过程。对我来说,学习一个东西的方式是在使用过程中慢慢了解熟悉它,在看了vue官方文档的安装和起步两个章节后,我打算先写一个小demo熟悉一下学习到的简单语法,就是一个todolist.这个todoli
April_Le
·
2020-08-23 09:57
Vue学习笔记
三:使用vuex与localstorage管理登录权限
使用vuex与localstorage管理登录权限此次采用vuex+localstorage配合使用来管理用户的登录状态,只使用vuex的话在用户进行刷新时将会自动删除,所以配合localstorage,这样可以让SPA应用中既可以同步用到数据,又不受刷新影响,实现步骤如下:下载并安装vuex(具体可参见笔记一)npminstallvuex-S在公用base.js中,设置localstorage方
dong-v
·
2020-08-23 03:59
vue学习笔记
总结(vue-router的基本使用)
vue-router的基本使用vue-router的安装配置使用npminstallvue-router--save来安装vue-router插件模块在模块化工程中使用他(因为是一个插件,所以可以通过Vue.user来安装路由功能)在src下创建一个router文件夹(一般安装vue-router时候会自动创建)用来存放vue-router的路由信息导入路由对象,并且调用Vue.use(VueRo
summer_zhh
·
2020-08-23 02:27
vue
html
javascript
Vue学习笔记
3.1 子-父组件传递数据 v-bind、v-on、$emit()
子向父传递组件:示例:在通过点击列表元素后自动删除所点击的列表。先放完整的代码先:TodoList提交varTodoItem={props:['content','index'],template:"{{content}}",methods:{handleDeleteClick:function(){this.$emit('delete',this.index)}}}varapp=newVue({
@凌晨三点半
·
2020-08-23 02:50
Vue.js
vue学习笔记
-动态绑定(v-bind)
v-bind的基本使用例如可以动态绑定img标签中的src或者是a标签中的href属性中的值如下:分别动态绑定了img标签中的src或者是a标签中的href属性中的值百度一下//常用的简便写法varapp=newVue({el:'#app',data:{content:'人的本质悬置在人的自由当中',imgsrc:'1.jpg',ahref:'http://www.baidu.com'}})v-b
gyypwrs
·
2020-08-23 01:13
Vue
Vue学习笔记
九:列表案例
目录前言Bootstrap插件下载Bootstrap表格和面板增加数据,v-model和v-on删除数据,事件修饰符和找索引的两种方法查询数据,foreach和filter全部的HTML前言Vue也学了好几章了,这次我们要自己来做一个demo,一个列表,能增删改查的东西,首先,我们得使用Bootstrap,这样好看,我到现在才终于明白了,所谓的好看就是Bootstrap的css,Bootstrap
dengtangda9444
·
2020-08-23 01:58
vue学习笔记
(v-text v-html v-on v-model)-panda
1v-textv-htmlv-textv-html{{message}}varapp=newVue({el:'#app',data:{message:"helloworld",todo:'helloworld'}})我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们
Vivianluolita
·
2020-08-23 01:45
vue.js
Vue学习笔记
----组件事件
组件绑定v-model实现数据的更新Vue.component('base-checkbox',{model:{prop:'checked',event:'change'},props:{checked:Boolean},template:``})loginVue即为data中的属性,它将传入组件的prop的checked即loginVue=checked,组件中使用v-bind绑定checked
Model_Vincent
·
2020-08-23 00:38
Vue
Vue学习笔记
----事件处理
事件处理事件处理常用v-on简写@监听事件//一行js代码其中属性为data中的属性Add1Thebuttonabovehasbeenclicked{{counter}}times.监听事件可以是一行js代码,也可以是方法名//v-on:click="greet"methods:{greet:function(event){//`this`在方法里指向当前Vue实例alert('Hello'+th
Model_Vincent
·
2020-08-23 00:38
Vue
Vue学习笔记
----列表渲染
列表渲染v-for{{parentMessage}}-{{index}}-{{item.message}}varexample2=newVue({el:'#example-2',data:{parentMessage:'Parent',items:[{message:'Foo'},{message:'Bar'}]}})语法(item,index)initemsindex可选配置项v-for块中可访
Model_Vincent
·
2020-08-23 00:38
Vue
vue学习笔记
二:vue-router如何在router-link标签绑定click点击事件
这几天给自己的一个移动端的项目,增加一个底部的导航栏,然后可以点击的时候,进行切换代码如下:首页精选专区我的刚开始的时候,没有给点击事件添加native,然后就没有生效原因:router-link会阻止click事件添加native后,就可以代码如上
半夏ing
·
2020-08-23 00:38
vue
vue学习笔记
总结(组件化开发,组件注册,组件通信)
vue中的组件化开发Vue官网中描述:组件是可复用的Vue实例,且带有一个名字,我们可以在一个通过newVue创建的Vue根实例中,把这个组件作为自定义元素来使用。因为组件是可复用的Vue实例,所以它们与newVue接收相同的选项,例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。通常一个应用会以一棵嵌套的组件树的形式来组织:通过
summer_zhh
·
2020-08-23 00:20
vue学习笔记
总结(vue-router 动态路由)
vue-router动态路由我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User组件,对于ID各不相同的用户,都要使用这个组件来渲染。例如可能有/user/123或者/user/456,除了/user之外,后面还跟上了用户ID。这种path和component的匹配关系,叫动态路由。动态路由实现新建一个User组件这是用户界面这里是用户页面的内容。用户ID是:{{u
summer_zhh
·
2020-08-23 00:49
vue
js
Vue学习笔记
三:v-bind,v-on的使用
目录v-bind:绑定属性值,内容相当于js,缩写:v-on:绑定方法,缩写@总结v-bind:绑定属性值,内容相当于js,缩写:我添加了一个input标签,如下这样显示的title是固定的,我想使用Vue的data里面的值,就需要加v-bind指令Vue的data加一个titletitle:"这是一个v-bind指令的提示"可以很清楚的看到,v-bind指令使用了之后,内容相当于js,title
dengtangda9444
·
2020-08-23 00:32
Vue学习笔记
----v-bind:class和style绑定
1.动态绑定class1.1对象语法data:{isActive:true}active:class样式名isActive:data属性v-bind:class----类似于小程序的class嵌套wx:if通过data属性的值来动态的添加或删除样式1.2计算语法data:{isActive:true,error:null},computed:{classObject:function(){retu
Model_Vincent
·
2020-08-23 00:16
Vue
vue学习笔记
总结(v-bind动态绑定属性)
v-bind1.v-bind基本使用v-bind用于绑定数据和元素属性,可以使用:简写constapp=newVue({el:"#app",data:{message:"你好啊",imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",aHerf:"http://www.baidu.com"}})
summer_zhh
·
2020-08-23 00:32
vue
javascript
html
js
class
Vue 学习笔记 vue-router路由和前端状态管理
Vue学习笔记
十一、vue-router路由和前端状态管理什么是路由:网址11.1vue-router路由基本加载/Users/mac/Desktop/日记本1.安装npminstall--savevue-router
hzl的学习小记
·
2020-08-22 01:59
Vue学习笔记
(九)——sync修饰符
参考文档:https://cn.vuejs.org/v2/guide/sync修饰符用于简化子组件通知父元素更新传入参数这个动作的代码逻辑,可以参考如下示例:sync修饰符-->-->Vue.component('my-com-a',{template:'{{title}}',props:['title'],methods:{changeA:function(){this.$emit("updat
讨厌走开啦
·
2020-08-21 04:20
Vue
vue学习笔记
(一)
B站学习资料:https://www.bilibili.com/video/BV11s411A7h6?p=7工程文件代码:1.MVC和MVVM关系MVC(后端概念):M是数据层,V是视图层,C是业务逻辑层MVVM(前端概念):M是数据层,VM是数据层与视图层的调度者,V是视图层2.vue框架简述支持网页和手机APP的开发减少不必要的DOM操作,提高渲染效率,数据双向绑定框架:有自己基本的语法,对代
qq_36752532
·
2020-08-21 01:18
vue
vue学习笔记
(二)
1.bootstrapBootstrap是一个用于快速开发Web应用程序和网站的前端框架。2.品牌列表信息管理界面目录:code02/01.品牌信息列表管理界面.html实现界面代码Document新增品牌id:name:查找的关键字:IdNameCtimeOperation{{item.id}}{{item.name}}{{item.ctime|timeFormat('yyyy-mm-dd')}
qq_36752532
·
2020-08-21 01:18
vue
vue学习笔记
一,两种情况下vue更改数据不会响应1.v-for渲染数据时,为数组中某一项直接赋值,数据不会响应。list数组中改变第二项数据无响应解决办法:调用Vue.set方法:(需在当前组件中引用vue)可实现数据响应2,改变数组的长度,数据不会响应。二,组件中props,$emit用法实例:1.props子组件子组件中需要用到父组件中的参数,就需要用props属性来申明一些变量,去获取父组件中要传的值。
lucky_yy
·
2020-08-20 15:54
vue学习笔记
——使用vue-router进行页面跳转
第一步:配置跳转页面的组件第二步:配置路由创建router目录并创建index.js文件importVuefrom'vue'importVueRouterfrom"vue-router";importContextfrom"../components/Context";importMainfrom"../components/Main";//安装路由Vue.use(VueRouter);//配置导
ChienAAAy
·
2020-08-20 07:31
vue学习笔记
——组件、Axios异步通信、计算属性
组件组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。Title/*定义一个Vue组件component*/Vue.component("chien",{props:['qc'],/*prop是子组件用来接受父组件传递过来的数据的一个自定义属性。
ChienAAAy
·
2020-08-20 07:31
vue学习笔记
——插槽、自定义事件
插槽slotVue实现了一套内容分发的API,这套API的设计灵感源自WebComponents规范草案,将元素作为承载分发内容的出口。TitleVue.component("todo",{template:'\\\\\'})Vue.component("todo-title",{props:['title'],template:'{{title}}'})Vue.component("todo-i
ChienAAAy
·
2020-08-20 06:50
vue
vue学习笔记
---接口数据传递
1.向后发起请求的插件vue-resource第三方包axios向vue对象中挂载一个this.$httpthis.$http.get(‘url’,[‘parmars’]).then(suncessCallback,errorCallback);this.$http.post(‘url’,{[body]},{[‘headers’]}).then(suncessCallback,errorCallb
刘双武
·
2020-08-19 21:04
vue
请求
Vue学习笔记
day03总结
目录1.使用Vue-resource实现品牌的增删查功能2.动画2.1使用过度类名实现动画2.2自定义v-前缀2.3使用第三方animate.css类实现动画2.4钩子函数实现半场动画2.5使用transition-group元素实现列表动画3.组件3.1组件的创建方式(推荐使用第3种)3.1.1创建方式13.1.2创建方式23.1.3创建方式3(推荐)3.2组件中的data3.3组件切换3.3.
Gavid-jh
·
2020-08-19 21:31
vuejs
在没有DOM操作的日子里,我是怎么熬过来的(终结篇)
接下来,正文从这开始~好多童鞋学习Vue都有灯下黑的误区,比如,观看各种Vue入门的视频教程,翻阅各种
Vue学习笔记
的技术博客,闲逛各种号称Vue技术交流的大群。。。殊不知你们都在骑驴找马绕远路。
闰土大叔
·
2020-08-19 09:15
Vue学习笔记
进阶篇——vue-router安装及使用
本文是基于上一篇文章(
Vue学习笔记
进阶篇——vue-cli安装及介绍)vue-
bysjlwdx
·
2020-08-19 01:55
Vue
vue学习笔记
记录-慕课网《vue2.5入门》黑马程序员《VUE开发小程序》
vue学习笔记
记录-慕课网《vue2.5入门》看慕课网上的课程《vue2.5入门》黑马程序员《VUE开发小程序》写在前面:已经有一定的html,css,JavaScript的基础,学习vue为了更好地开发
yezhengjie
·
2020-08-18 23:45
笔记
vue学习笔记
---vue实现ToDoList
ToDoList初级功能描述:增加任务:通过在文本框中输入任务内容,点击添加按钮,任务会自动添加到任务列表之中.实现思路:vue的思想是根据MVVM设计思想,也就是说,当程序中的数据被改变的时候,则视图上的对应内容也会自动发生变化.主要使用到vue的一下几个几个指令:v-model:创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景
{[("青椒盖饭")]}
·
2020-08-18 21:50
vue学习笔记
---vue的Helloworld
如果使用传统的js进行对一个div元素中添加内容,则会进行以下操作获取对应元素对象修改元素对象内容helloworldvarappObj=document.getElementById("app");appObj.innerHTML="HellWorld"而当使用vue框架之后,只需要关注数据修改即可,不需要关注对象的获取细节要在网页中使用vue可以直接通过标签引入vue.js文件具体的操作为,创
{[("青椒盖饭")]}
·
2020-08-18 21:50
vue学习笔记
,自用
包含很多东西。form表单提交基本信息账号:密码:性别:男女兴趣信息爱好:ABC生日:现在日期:邮箱:年龄:省份:请选择北京上海广州图片:隐藏域:取色器:{{message}}学校:{{school.name}}电话:{{school.mobile}}{{campus[0]}}{{campus[1]}}hshashud您好,{{message+"!"}}{{info+"!!!!"}}{{messa
牧 码人
·
2020-08-18 21:11
前端
vue
Vue学习笔记
——Vue个人小结
1、Vue.directive('自定义标签名称,如v-stephen',function(el,binding){el.style='color:'+binding.value;})2、Vue.extend():定义的是静态标签,没有传递任何参数写法两种:(1).定义标签法://不带任何属性(2).挂载在普通标签中://普通标签中上述两种方法定义静态标签必须使用newauthorExtend()
Stephen-James
·
2020-08-18 20:21
Vue学习笔记
Vue学习笔记
二:v-cloak,v-text,v-html的使用
目录v-cloak:解决插值表达式闪烁问题安装插件LiveServer右键以HTTP形式运行HTMLv-text:以属性方式使用插值表达式v-cloak和v-text的区别v-html:解决html展示问题越来越感觉,Vue学起来很有意思v-cloak:解决插值表达式闪烁问题先来写一个HTML,如下Vae{{msg}}//这个vm就是MVVM中的VM,ViewModelvarvm=newVue({
dengtangda9444
·
2020-08-18 20:35
Vue学习笔记
- 2019
目录一、安装Node二、Vue-cli2.1初识vue-cli32.2搭建项目2.3目录结构三、Vue的ajax3.1axios使用方式四、Vue父子组件4.1父组件向子组件传递数据4.2子组件向父组件传递数据五、Vue拦截器一、安装Node首先安装Node环境配置环境变量:path指引Node目录,比如:path:D:/Nodecmd黑窗口查看环境是否配置正确:node-v出现版本号就没问题二、
czboy_
·
2020-08-18 19:57
vue
前端
web
vue学习笔记
(慎入,内容仅供学习时查询某些函数具体起到什么作用)
getAndRemoveAttr从ast模板对象中取出相应的属性。检测属性是否存在,通过对象attrsMap来检测,提升效率如果存在,则从attrsList中中移除如果第三个传参为true,删除attrsMap中对应的属性返回取到的结果,或者undefined//note:thisonlyremovestheattrfromtheArray(attrsList)sothatit//doesn'tg
weixin_33698823
·
2020-08-18 04:27
Vue学习笔记
3-高级知识
注意:撰写本文目的主要是为了给自己做一个备忘录,如果你学过vue并且希望从本文中找到一些忘记的知识点,那么你可以阅读本文章。由于文章内讲解并不是很多,因此此文章并不适合小白入门使用。8.生命周期每个Vue实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。常用的钩子:create:实例创建完成后调用,此阶段完成了数据的观测等
北国猫蜜嗨
·
2020-08-17 08:32
Vue学习笔记完整版
vue学习笔记
之:单选框、复选框、下拉列表框的数据绑定操作
vue的一个很重要的特性就是数据绑定,而核心的指令就是:v-model使用的话分为如下步骤:第一步:data属性中定义好绑定的值的变量第二步:标签上通过v-model绑定好该变量第三步:无论上通过插值表达式{{}}的方式还是在代码里通过this.的方式,都是可以获取到变化后的值的简单的实例如下:vue多行文本的数据绑定多行文本输入内容:{{message}}letvm=newVue({el:'#a
枫林血舞
·
2020-08-16 19:35
前端
vue
vue学习笔记
(一)
1.插值表达式(也可以是简单的表达式或者三元表达式)message:{{msg}}2.插入原始HTML3.插入html属性4.指令:带有v-前缀(1)v-if:条件渲染,这块内容只会在指令的表达式返回truthy值的时候被渲染。Vueisawesome!Ohno//v-else元素必须紧跟在带v-if或者v-else-if的元素的后面,否则它将不会被识别。当v-if与v-for一起使用时,v-fo
the_lower
·
2020-08-16 08:37
vue
Vue学习笔记
(十八)——Vue数据双向绑定原理解析
参考文档:https://www.cnblogs.com/zhenfei-jiang/p/7542900.htmlVue的数据双向绑定的基础是通过Object.defineProperty()劫持作用域中变量的get和set方法实现的,示例如下:示例中数据双向绑定的实现:js对象变更触发dom更新:当执行virtualData.data=“default”;时输入框的信息同步更新为default字
讨厌走开啦
·
2020-08-16 07:49
Vue
vue学习笔记
(二)
哈哈哈,来一起回顾一下
vue学习笔记
(一)后,继续向下看嘛。
Mobro
·
2020-08-15 20:09
tech
vue学习笔记
(四)- cmd无法识别vue命令解决方法
解决控制台无法识别vue命令问题作者:狐狸家的鱼本文链接:cmd无法识别vue命令解决方法GitHub:sueRimn在控制台输入vue会报以下错误:vue:无法将“vue”项识别为cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。所在位置行:1字符:1+vue+~~~~+CategoryInfo:ObjectNotFound:(vue:
diaoyanbian8143
·
2020-08-15 18:33
Vue学习笔记
一(数据绑定、指令)
Vue学习笔记
(一)1.基础知识vue.js不是框架,它只聚焦视图层,是一个构建数据驱动的web界面的库2.数据绑定插值Text:{{text}}Text:{{*text}}//只需渲染一次,后续变化不再关心
sxzhustar
·
2020-08-15 15:34
vue
菜鸟
Vue学习笔记
(一)
菜鸟
Vue学习笔记
(一)我今年刚参加工作,作为一个后台Java开发人员,公司让我开发前端,并且使用Vue框架,我边学习边记录。
qfchenjunbo
·
2020-08-15 02:51
vue学习笔记
学习过程中整理,参考网址https://segmentfault.com/a/1190000008879966官网地址:https://cn.vuejs.org/1.vue生命周期所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created:()=>this.fetchTodos())。这是因为箭头
qilanbei
·
2020-08-14 23:44
vue学习笔记
-todolist的实现
使用vue来实现一个todolist是一个相对来说简单的事情首先应该是前端页面,这里是前端页面新的事项添加后台操作代码Vue.component('todo-item',{template:'\\{{title}}\移除\\',props:['title']})vartodoexample=newVue({el:'#todolistexample',data:{newTodoText:'',tod
进击的Oreo
·
2020-08-14 21:29
上一页
8
9
10
11
12
13
14
15
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他