#vue学习

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学习笔记----事件处理

事件处理事件处理常用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学习笔记----列表渲染

列表渲染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-router如何在router-link标签绑定click点击事件

这几天给自己的一个移动端的项目，增加一个底部的导航栏，然后可以点击的时候，进行切换代码如下：首页精选专区我的刚开始的时候，没有给点击事件添加native,然后就没有生效原因：router-link会阻止click事件添加native后，就可以代码如上
半夏ing·2020-08-23 00:38

vue学习篇--01vue各种指令及MVVM

文章目录vue指令：MVVM模型组件vue是MVVMjs框架，是由国人尤雨溪开发，与reactangular对比：中文文档比较完善代码轻量上手简单容易使用vue:vue是一套英语构建用户界面的渐进式框架，与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心只关注视图层，不仅易于上手，还便于与第三方库和既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue页
CCC1115·2020-08-23 00:53

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学习笔记：属性绑定 v-bind

注意：v-bind:class指令可以与普通的class特性共存HTML代码：pejeco学习Vue学习Node学习ReactCSS代码：.box{border:1pxdashed#f0f;}.textColor
面条请不要欺负汉堡·2020-08-23 00:07

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学习06--v-bind:class和v-bind:style

所有代码如下：v-bind-绑定页面中的元素属性/*v-bind:class*/.class0{color:greenyellow;}.red{color:red;}.yellow{color:yellow;}.bold{font-size:24px;}.class0{font-size:24px;}.class1{color:#008000;}.arr1{font-size:24px;}.arr
静候茶茶大人·2020-08-23 00:26

Vue学习日记（二）v-bind v-model computed watch

知识点一：v-bind动态绑定特性，缩写为：可以使用：来绑定标题，标题的具体内容写在data中。知识点二：v-model表单控件的双向绑定。表单控件中是什么内容，那么它的内容会相应的显示到下边的那个div中。helloworld{{content}}newVue({el:"#root",data:{title:"这里标题",content:"thisisthecontent"}})知识点三计算监听
SUN_FLOWER__·2020-08-23 00:22

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学习笔记总结（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学习---生命周期钩子activated，deactivated

之前学习了基础的生命周期钩子（beforeCreate,created,beforeMonted,mounted.beforUpdate,update,beforDestroy,destroyed）该钩子用在什么情况下当在这些组件之间切换的时候都会请求一些请求过的数据，每次请求都会导致重复渲染影响性能。这些数据可以存到缓存。此时使用keep-alive将组建包裹起来。但这样以上八种生命周期钩子将失
weixin_30797027·2020-08-22 14:33

Vue学习之mint-ui引入，使用注意。

安装mint-ui：npminstallmint-ui-S按需求引入，在main.js：//按需求引入ui组件import{Tabbar}from'mint-ui'//全局注册Vue.component(Tabbar.name,Tabbar)好要在.babelrc里还要设置：{"presets":[["es2015",{"modules":false}],//新添加的配置["env",{"modu
RookieGz·2020-08-22 13:48

Vue学习总结

Vue学习总结1、Vue单页应用理解一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现HTML内容的变换。
Ga_Galin·2020-08-22 10:40

Vue学习之路之登录注册实例代码

Vue学习之路之登录注册实例代码：https://www.jb51.net/article/118003.htmvue项目中路由验证和相应拦截的使用：https://blog.csdn.net/wang1006008051
weixin_30527423·2020-08-22 03:04

VUE学习（三）基于webpack使用 require.context 全局注册通用的基础组件

一、全部代码///全局组件自动配置STARTconstrequireComponent=require.context(//其组件目录的相对路径"./views/components",//是否查询其子目录true,//匹配基础组件文件名的正则表达式/\w.(vue|js)/);//Foreachmatchingfilename...对应每个匹配的文件名requireComponent.keys(
忠诚待人·2020-08-22 03:05

vue学习（12）—模块化webpack加载less、vue、图片等资源文件

webpack：静态模块化打包工具--save命令是将依赖配置保存到package.json文件中-dev是指在package.json文件中将此依赖配置到devdependencies中，只有开发时依赖，打包上线运行后不再依赖使用-g是global全局的缩写，是全局安装，安装之后，在任意的命令窗口都可以使用，相当于在path环境中配置了路径当在package.json中配置了script脚本，运
Vincent_sv·2020-08-22 02:22

Vue学习7-MinUI组件与项目托管到码云上

上一篇Vue学习6-(webpack发布策略)下一篇Vue学习8-项目实战一：完成header、tabbar区域、路由组件切换与轮播图功能MinUI组件与码云一、使用render函数渲染组件二、在webpack
x-dragon8899·2020-08-22 02:40

Vue 学习笔记 vue-router路由和前端状态管理

Vue学习笔记十一、vue-router路由和前端状态管理什么是路由：网址11.1vue-router路由基本加载/Users/mac/Desktop/日记本1.安装npminstall--savevue-router
hzl的学习小记·2020-08-22 01:59

Vue学习之vue-cli脚手架下载安装及配置

参考https://www.cnblogs.com/clschao/articles/10650862.html
zehuawong·2020-08-22 01:53

Vue学习8-项目实战一：完成header、tabbar区域、路由组件切换与轮播图功能

上一篇Vue学习7-MinUI组件的介绍与把项目托管到码云上下一篇Vue学习9-项目实战二：完成九宫格、组件切换、新闻列表、时间过滤器、评论功能目录一、安装MintUI二、项目header区域1、导入MinUI2
x-dragon8899·2020-08-22 00:57

VM虚拟机安装使用及部署项目

推荐文章：Vue学习8-项目实战一：完成header、tabbar区域、路由组件切换与轮播图功能Vue学习9-项目实战二：完成九宫格、组件切换、新闻列表、时间过滤器、评论功能目录一、下载软件二、安装VM
x-dragon8899·2020-08-22 00:25

二、vue学习--父元素如何获取子元素的值，子元素如何获取父元素的值

下图是父元素：下图是子元素，获取父元素的值，使用props定义属性，这样就可以获取到父元素上传过来的set、place、type，拿到值就可以做一些自己的逻辑处理二、子元素给父元素传值？下图为子元素将值传递出去的方式，使用emit将值公布给父元素，见下图：父元素需要接受子元素给的值，在父元素中相应的要有propMethods属性，这个属性可以使用v-on的方式绑定，也可以使用@propMethod
weixin_30300225·2020-08-21 17:24

vue学习知识总结

1.扩展Vue构造器*可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器：varMyComponent=Vue.extend({//扩展选项})//所有的`MyComponent`实例都将以预定义的扩展选项被创建varmyComponentInstance=newMyComponent()尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在
nicexibeidage·2020-08-21 15:13

Vue学习(9)————————Vue路由，设置请求头，动态路由(路由传值，get传值)

简述之前都是手动的网跟组件中引入其他组件（import），路由的作用就是让他自动挂载组件组成界面1.安装npminstallvue-router--save/cnpminstallvue-router--save2、引入并Vue.use(VueRouter)(main.js)importVueRouterfrom'vue-router'Vue.use(VueRouter)//相当于引入一个工具库并
抽风同学·2020-08-21 14:20

Vue学习日记2——组件注册的三种方式

本文使用直接在html中引用vue.js的方式测试组件注册方法。新建test.html文件，作为测试代码源文件。将vue.js放入test.html相同的目录，然后编写如下代码。vuelearn&test#第一种方式调用全局注册组件函数（参数1：组件名，参数2：扩展的组件构造器）Vue.component("bc",Vue.extend({data:function(){return{count:
junior_programmer·2020-08-21 14:29

VUE学习之路（二）----全局API之Template 制作模版

TemplateTemplate三种写法{{message}}我是Template标签模板我是Script标签模板varapp=newVue({el:'#app',data:{message:'helloworld'},//第一种写法：适用于很小的模板//template:`//我是选项模板//`//第二种写法：需要在html中增加template标签//template:"#dd2"//第三种写
lxhguard·2020-08-21 14:40

vue学习总结一：keep-alive用法及（activated,deactivated生命周期）

activated(){console.log('activated页面打开时触发');},deactivated(){console.log('deactivated页面关闭时触发');}axios获取本地文件配置步骤一、修改config文件夹下面index.js文件配置proxyTable:{'/api':{target:'http://localhost:8081',pathRewrite:
baidu_41921865·2020-08-21 13:52

Vue源码学习笔记

最近偷懒好久没有写博客了，一直想继续Vue学习系列，想深入Vue源码来写。结果发现自己层次不够，对js的理解差好多。所以一直想写一直搁置着。
VioletJack·2020-08-21 11:30

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学习笔记（一）

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学习笔记（二）

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学习：路由配置

00vue项目中的路由配置01什么是前端路由若web服务器的安置为10.0.0.1，该web服务器提供了3个供用户访问的页面，页面URI分别为https://10.0.0.1/https://10.0.0.1/abouthttps://10.0.0.1/contract当用户使用https://10.0.0.1/about访问页面时，web服务器会受到请求，解析URL中的路径/about，程序会将
咕咚咚·2020-08-20 23:16

Vue学习——4、可复用性 & 组合

一、混入：不常用，略二、自定义指令2.1简介：https://cn.vuejs.org/v2/guide/custom-directive.html#简介除了核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例
Mr_XiMu·2020-08-20 22:43

Vue学习——3、过渡&动画

一、进入/离开&列表过渡1.1概述：Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下方式：在CSS过渡和动画中自动应用class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库，如Velocity.js暂时只涉及进入、离开和列表的过渡。1.2单元素/组件的过渡：ht
Mr_XiMu·2020-08-20 22:12

vue学习笔记

一，两种情况下vue更改数据不会响应1.v-for渲染数据时，为数组中某一项直接赋值，数据不会响应。list数组中改变第二项数据无响应解决办法：调用Vue.set方法：（需在当前组件中引用vue）可实现数据响应2，改变数组的长度，数据不会响应。二，组件中props,$emit用法实例：1.props子组件子组件中需要用到父组件中的参数，就需要用props属性来申明一些变量，去获取父组件中要传的值。
lucky_yy·2020-08-20 15:54

2020 零基础 Vue综合应用 教开发音乐播放器—悦听（激发编程乐趣）【整理+源码】

文章目录1、引言2、音乐播放器完整版效果图如下：3、接口引用4、示例代码5、结束语点击进入Vue❤学习专栏~1、引言这是Vue学习的综合应用篇，教你开发一个音乐播放器，能听歌，能看热门留言，能看mv，开发主要是以下环节
一百个Chocolate·2020-08-20 08:24

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学习之mounted与methods

title:vue学习之mounted与methodsdate:2019-11-22原本在个人博客上写了一些博文，现转移到CSDN上vue学习之mounted与methods在项目中，会用到vue的数据传输以及函数调用
myl0808·2020-08-20 06:02

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学习第二天v-on的参数传递问题。1在v-on中，如果我们不需要传递参数，那么绑定的方法就可以不需要()2在v-on中，如果我们需要传递的参数不是我们定义好的变量。
是楷不是凯·2020-08-19 22:40

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学习笔记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

vue学习第7天，组件

1，具名插槽，插槽可以有名字name，在父容器的元素中可以指定元素的slot属性为子组件模板中的slot的name属性的值通过这种方法可以为父容器的元素指定插槽2，子组件中插槽可以不设置name属性这样的话这个插槽就是一个默认插槽当父容器中有元素没有设置具名插槽的时候这一部分元素就会放到默认插槽里面如果没有默认插槽的话这一部分元素就会被舍弃3，作用域插槽是一个特殊类型的插槽可以用来传递数据可以重用
Sukla·2020-08-19 16:56

Vue-第七天 学习与相关问题总结

Vue学习第七天1.。MintUI学习,提供了各种各样的组件。
不正经的前端程序员·2020-08-19 15:34

Vue 学习 之 7.01 学习笔记

Vue学习之7.01学习笔记1.还是复习前面的那个“品牌案例管理”，但是数据不是静态写死哦，而是动态的管理，向数据库发送相关请求实现，因此，小节和昨天所学就是掌握Vue的Ajax技术一。导包二。
不正经的前端程序员·2020-08-19 15:34

在没有DOM操作的日子里，我是怎么熬过来的（终结篇）

接下来，正文从这开始~好多童鞋学习Vue都有灯下黑的误区，比如，观看各种Vue入门的视频教程，翻阅各种Vue学习笔记的技术博客，闲逛各种号称Vue技术交流的大群。。。殊不知你们都在骑驴找马绕远路。
闰土大叔·2020-08-19 09:15
上一页 25 26 27 28 29 30 31 32 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他