Vue
子月吾生
one day by one day
展开
-
用vant实现下拉刷新和上拉加载功能(vue项目)
我这次的详细做法是:1、首先在下面显示的文件下建立了一个list.js文件(要做分页加载的页面都可以引入使用)。2、list.js文件的内容如下:export default { data() { return { //三个判断 loading: false,//是否在加载中 finished: false,//是否加载完成 refreshLoading: false, pageSize: 20, // 列表请求数 p原创 2020-12-01 11:18:19 · 2527 阅读 · 3 评论 -
vue获取input值的方法总结
1、v-model:使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据 <template> <input placeholder="请输入你的手机号码" type="number" v-model="number" /> <input placeholder="请输入密码"原创 2020-09-07 16:57:17 · 4870 阅读 · 0 评论 -
前端验证码倒计时的实现(实战)
是用vue写的,但是逻辑基本上都是一样的。效果如下:验证码倒计时: codeTimer() { this.timer = 60; let _this = this;//setTimeout里面的this不一样,所以在这里先保存好 if (this.timer >= 1) { //this.$refs.eleCode是vue获取dom元素的一种方法 this.$refs.eleCode.setAttribut原创 2020-09-07 13:56:47 · 2496 阅读 · 0 评论 -
前端验证码登陆模块的实现(vue实现)
实现效果如下:用vue写的,但实现逻辑都是一样的。摘取出来的输入框的html部分: //号码输入框 <input class="login-input login-phone" placeholder="请输入你的手机号码" type="number" v-model="loginNumberVal" @input="lenControl"原创 2020-09-07 11:53:12 · 1905 阅读 · 0 评论 -
css实现固定区域的上下滑动(vue基础实践案例)
dsdwdwd原创 2020-08-25 17:33:54 · 3367 阅读 · 0 评论 -
Vue组件之$dispatch和$broadcast
$ dispatch 主要是事件流由当前组件往父组件流动,当满足一定条件的时候就会触发当前子组件的监听事件,$broadcast 的功能是事件流由当前组件向子组件流动,当满足一定条件的时候就会触发当前子组件的监听事件。也就是说 $dispatch 和 $broadcast 主要解决了父子组件、嵌套父子组件的通信,但是没有解决兄弟组件的通信问题。所以后面被遗弃了。如果要用这两个方法的话,就先在主j...原创 2019-06-11 15:56:21 · 2034 阅读 · 0 评论 -
vue组件之祖孙传后代provide和inject
首先祖先给子孙后代传递也是可以用props传递,一层层传递,爷爷给孙子还好,但是嵌了五六层还这么写,就显得非常麻烦了。所以就用到了provide(提供)和inject(注入)。这两个是配套使用的,以允许祖先向所有祖先后代注入一个依赖。provide: 是一个对象或者是一个返回对象的函数。里面就是所有要给后代的东西,也就是一对对属性和值inject: 一个字符串数组或者是一个对象,属性值也可...原创 2019-06-12 22:26:13 · 2129 阅读 · 0 评论 -
Vue组件之详细理解并使用props和$emit()
一、props的使用父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 “prop”。个人理解是:props是在子组件里面写的,其值为一个数组,即props:[keyName]。其中的keyName是要传递的参数,但它是如何绑定到父组件的数据呢?在父组件里面用到子组件的时候,就在父组件文件中的子组件标签里面进行绑定keyName,然后keyName...原创 2019-06-09 21:47:18 · 2881 阅读 · 0 评论 -
Element-UI的表单组件实现原理
可以去Element-UI官网引用里面的很多组件https://element.eleme.cn/#/zh-CN/component/form一个Element-Ui的小demo代码如下:<template> <div> <el-form :model = 'model' :rules = 'rules' :ref = 'loginForm'>...原创 2019-06-18 21:23:51 · 3893 阅读 · 1 评论 -
Vue-cli了解、安装与简单上手
在真实的vue项目中是要借助webpack打包工具的,以便于维护。但是每做一个项目都要安装webpack的话是很麻烦的,于是vue就提供了脚手架工具Vue-cli,通过这个脚手架就可以快速的搭建一个vue项目,并且这个脚手架还自带了webpack的各种配置。通过这个工具我们就可以迅速上手工程级别的vue项目开发。1、vue-cli的安装在Vue的管网的学习菜单栏下的教程部分,在里面可以找到v...原创 2019-06-01 02:28:50 · 302 阅读 · 0 评论 -
vue(三)—组件与组件的拆分
组件分为全局组件和局部组件,每个vue的组件都是vue实例,每个vue实例也都是组件, 组件定义后就可以多次的拿来当模板用每个组件里面都有一个模板属性template,data属性,methods属性,以及传参的属性props等,而最大的组件即Vue实例没有将template属性写出来时它默认的是template的值是它所绑定的挂载点下的所有内容1、全局组件用法如下: <div ...原创 2019-05-26 17:38:50 · 5123 阅读 · 0 评论 -
vue(二)—指令详细使用及其区别&实例属性
1、{{}}、v-text和v-html(绑定数据)、v-bind(绑定属性)、v-on(绑定方法)、v-model(数据双向绑定)v-text和v-html两者的区别是v-text会将标签语义化,v-html不会将标签语义化v-on:可以简写为@v-bind:可以简写为:数据双向绑定是指在当改变vue实例中的数据时对应的模板中的数据也会改变,同时模板中的数据被修改时,对应的vue示例中...原创 2019-05-26 16:30:12 · 491 阅读 · 0 评论 -
vue(一)—安装&实例创建&挂载点&模板
1、 安装首先去Vue官网菜单栏的学习选项中下载vue,可以下载开发板或者是生产版将下载好的vue.js文件放入要做项目的的目录下通过< script>标签引入文件,就可以使用了2、实例、模板、挂载点代码如下上面的方式就类似于下面的原声JS的写法3、template属性上面的模板可以在vue实例中的template属性中表示出来的,如下:...原创 2019-05-21 19:40:22 · 394 阅读 · 0 评论