Vue.js 文章列表

Vue表单控件数据绑定方法详解
Vue.js

Vue表单控件数据绑定方法详解

2020-02-16 标签:vue,表单,控件,数据,绑定,方法,详解,基础,用法,v,model,指令,元素,创建,双向,它会,根据,类型,自动,选取

基础用法可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据[注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vu

Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Vue.js

Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

2020-02-24 标签:vue,过渡,效果,css,详解,结合,transition,animation,animate,toggle,按钮,控制,p,元素,为例,不使,用过

以一个toggle按钮控制p元素显隐为例,如果不使用过渡效果,则如下所示Toggle蓝色理想new Vue({el: '#demo',data: {show: true}})如果要为此加入过渡效果,则需要使用过渡组件transition 过渡组件Vue提供了transition的封装组件,下面代码中

vue 翻页组件vue-flip-page效果
Vue.js

vue 翻页组件vue-flip-page效果

2020-02-16 标签:vue,翻页,组件,flip,page,效果,方法,change,改变,页面,tap,点击,turning,正在,prev,一页,n,ext,翻到,指定

方法change (改变页面)tap(点击)turning(正在翻页)prev(前一页)next(后一页)翻到指定页面:handleSwitchManual(index) {if (index === this.currentIndex) return;this.$refs["turn"].toPa

Vue中多元素过渡特效的解决方案
Vue.js

Vue中多元素过渡特效的解决方案

2020-02-27 标签:vue,多元,过渡,特效,解决方案,常见,示例,最常,标签,列表,描述,消息,元素,transition,table,v,items

常见示例最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: 0">Sorry, no items found.下面是一个例子.fade-enter,.fade-leave-to{opacity:0;}.fade-enter-active,.fade-leave-active{trans

Vue路由管理器Vue-router的使用方法详解
Vue.js

Vue路由管理器Vue-router的使用方法详解

2020-02-27 标签:vue,路由,管理器,router,使用方法,详解,link,组件,支持,用户,具有,功能,应用,中点,导航,通过,属性,指定,目标

router-link 组件支持用户在具有路由功能的应用中点击导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 标签,可以通过配置 tag 属性生成别的标签。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名 比起写死的 会好一些。无论是 HTML5 hist

Vue的状态管理vuex使用方法详解
Vue.js

Vue的状态管理vuex使用方法详解

2020-02-27 标签:vue,状态,管理,vuex,使用方法,详解,引入,访问,数据,对象,实例,简单,代理,如果有,一处,需要,多个,共享,通过

引入vuex当访问数据对象时,一个 Vue 实例只是简单的代理访问。所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享const sourceOfTruth = {}const vmA = new Vue({data: sourceOfTruth})const vmB

浅谈Vue组件单元测试究竟测试什么
Vue.js

浅谈Vue组件单元测试究竟测试什么

2020-02-27 标签:浅谈,vue,组件,单元测试,究竟,测试,关于,最常,问题,过多,过少,但我,观察,开发人员,通常会,过头,毕竟,没有人,愿意

关于 Vue 组件单元测试最常见的问题就是“我究竟应该测试什么?”虽然测试过多或过少都是可能的,但我的观察是,开发人员通常会测试过头。毕竟,没有人愿意自己的组件未经测试从而导致应用程序在生产中崩溃。在本文中,我将分享一些用于组件单元测试的指导原则,这些指导原则可以确保在编写测试上不会花费大量时间,但

VUE中使用HTTP库Axios方法详解
Vue.js

VUE中使用HTTP库Axios方法详解

2020-02-27 标签:vue,中使,http,axios,方法,详解,基于,promise,用在,浏览器,n,ode,js,安装,模块,最好,pm,install,save

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中安装Axios模块在Vue中使用,最好安装两个模块axios 和vue-axios$npm install axios vue-axios --save然后引用并使用模块import Axios from

Vue获取页面元素的相对位置的方法示例
Vue.js

Vue获取页面元素的相对位置的方法示例

2020-02-27 标签:vue,获取,页面,元素,相对,位置,方法,示例,今天在,开发,源码,一处,发现,需要,高度,有一个,问题,它是,用于

今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题发现问题当我滚动到元素的位置时

vue.js使用v-model实现父子组件间的双向通信示例
Vue.js

vue.js使用v-model实现父子组件间的双向通信示例

2020-03-10 标签:vue,js,使用,v,model,实现,父子,组件,间的,双向通信,示例,本文,实例,讲述,分享,大家,参考,具体,如下

本文实例讲述了vue.js使用v-model实现父子组件间的双向通信。分享给大家供大家参考,具体如下:这是主页面 {{num}}-1import son from './test1'var com={template:'{{msg}}+1{{currentNum}}',data(){return{m