
Vue技术栈
关于Vue的一些学习
Katle
这个作者很懒,什么都没留下…
展开
-
Vue之关于ajax
使用ajva发送请求可以有效和后台进行数据交互处理,对于Vue来说,常用的有两个ajax库,分别是:vue-resource,axios一、vue-resourcevue-resource是一个vue插件,非官方库,在vue1.x中使用广泛,目前使用较少,在使用这个方式进行ajax编码:1、首先用命令下载vue-resource资源,打开命令窗口,输入:npm install vue-resource --save2、在vue的js入口文件中引入模块,并使用这个插件,在引入模块后,默认会带有属性原创 2020-11-11 17:45:36 · 778 阅读 · 0 评论 -
Vue关于过渡&动画
Vue动画的理解在vue中对于动画,可操作css的transition和animation来实现动画的效果。vue会给目标元素添加/移除特定的class,相关的类名有:xxx-enter-active:指定显示的transitionxxx-leave-active:指定隐藏的transitionxxx-enter/xxx-leave-to:指定隐藏时的样式原理如下图所示:例子在vue中使用标签‘<transition name=“xxx”’>’来包裹要实现动画效果的目标元素,此时原创 2020-11-06 21:40:22 · 316 阅读 · 0 评论 -
Vue关于表单输入自动收集数据
Vue可使用v-model双向数据绑定实现对表单数据自动收集,具体见一下例子:<!--使用v-modle可以实现对表单数据的自动收集--><div id="app" style="width: 233px;height: 320px;border: 1px solid lightgray;padding:20px;margin: auto"> <form @submit="handleSubmit"> <span>姓名:</s原创 2020-11-05 21:46:59 · 488 阅读 · 0 评论 -
Vue关于事件处理
事件处理关于Vue的事件处理机制,介绍一下三点,分别是:绑定监听,事件修饰符,按键修饰符。1.绑定监听最常见的事件绑定监听即v-on指令,写法为:v-on:xxx = ‘fun’,可简写为:@xxx = ‘fun’,其中fun中可以传递参数,写法为:@xxx = ‘fun(参数)’。对于每一个监听函数,都默认带有事件形参:event,即若定义的监听函数即使没有带参数,但是会默认有一个形参event,其隐含的属性对象为$event。具体为:v-on:xxx=“fun”@xxx=“fun”@xxx原创 2020-11-05 21:43:14 · 342 阅读 · 0 评论 -
Vue:关于列表循环
列表渲染v-forv-for用于列表显示的指令,可遍历数组和对象。遍历数组:v-for/index遍历对象:v-for/key<div id="app"> <h2>v-for遍历数组</h2> <!--v-for/index--> <ul> <li v-for="(item,index) in persons" :key="index">原创 2020-11-03 21:52:31 · 1203 阅读 · 0 评论 -
vue基础之关于强制绑定
描述及特点描述:渐进式JavaScript框架,用于动态构建用户界面。特点:遵循MVVM模式,编码简介,体积小,运行效率高,适合移动/pc端开发,它本身只关注UI,可以轻松引入vue插件或其他第三方库开发项目。引入vue的基本使用1.引入vue.js库2.创建Vue对象:其中el指定根element(选择器),data进行初始化数据即页面可以访问的数据操作。3.v-model实现双向数据绑定4.使用{{xxx}}实现数据的显示 <!--模板--> <div原创 2020-11-02 18:27:44 · 901 阅读 · 0 评论 -
Vue路由篇之router-view内容无法渲染出来的问题,神坑!!
最近在学习vue路由知识,在写到关于 <router-view></router-view>时,内容无法渲染出来,找了许久之后,才发现是一个神坑!!!配置路由时注意,名字定义为routes 而不是routers 否则你的也内容渲染不出来。...原创 2020-03-31 21:11:06 · 4102 阅读 · 4 评论 -
Vue之vuex篇:一个计数器带你全面了解什么是vuex
最近在学习Vux框架中关于vuex方面的知识,首先,我们得弄懂什么是vuex,简单来说,vuex是vue的一个插件,功能是能够对vue应用中多个组件的共享状态进行集中式的管理(读/写),由此可见,vuex功能通俗来理解就是对组件中相同的并多次使用的代码块进行集中管理,即解决多组件共享状态的问题,以达到管理或者说优化的效果,至此,你是不是对vuex有了大体的认识呢,接下来实现编码就容易的多。准备...原创 2020-04-09 13:00:30 · 435 阅读 · 0 评论 -
Vue之路由篇
最近在学习vue框架,对于vue-router进行了一下总结。路由,通俗来说功能相当于就是实现页面的跳转。1.想要使用路由,首先得下载:npm install vue-router --save2.编写路由三步骤:定义路由组件注册路由使用路由下面,便来仔细说说怎么走这三步骤。3定义路由组件路由,相当于组件,即首先要建立路由文件夹,views是我建立路由组件文件夹的名称。...原创 2020-04-02 20:28:14 · 168 阅读 · 0 评论 -
Vue几种组件间的通信
组件间的通信,我的理解就是个组件间的数据传递或方法传递。通信的原则为:不能再子组件中直接修改父组件的状态数据,而是数据在哪,更新数据的行为或函数就定义再哪,记住这一点,掌握组件间通信就变得简单易懂。????,此外,vue组件间的通信方式可归纳为一下几种:1)props2)vue的自定义事件3)消息的订阅和发布4)slot5)vuex方法一:Props在component定义声明在组件内...原创 2020-03-25 13:28:28 · 150 阅读 · 0 评论 -
Vue组件化认识
想更好的学习vue,首先就要清楚什么是组件,组件是局部功能界面,是一个界面的局部功能模块,而vue就是典型的由组件组成的框架布局。vue文件的组成1.模板页面<template> 页面模板</template>2.JS 模块对象 <script> export default { data() { return {...原创 2020-03-12 17:53:42 · 155 阅读 · 0 评论 -
Vue框架下的表单提交案列
最近在熟悉vue,发现了许多好玩的东西,下面是在vue框架下实现简单表单提交:HTML部分:```clike<div id="app"> <form action="/xxx" @submit.prevent="handleSubmit"></form> <span>Name:</span> <input t...原创 2020-01-10 21:25:00 · 565 阅读 · 0 评论 -
Vue todo list——简单实现
Vue todo list 案例废话不多说,整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>This is a vue todo list</title></head><body>...原创 2019-12-31 22:54:51 · 188 阅读 · 0 评论