vue自学手册
学习vue的特性,特点
liukai6
这个作者很懒,什么都没留下…
展开
-
vue中element-ui中的加载中状态
需要添加加载状态,调用下面方法即可 //开启loading const load = _this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', ...原创 2018-06-20 16:59:35 · 7989 阅读 · 1 评论 -
Mint-UI中定义input最多输入的字符数(设置原生属性的方法)
设置input的长度设置原生属性,例如 :attr=”{ maxlength: 10 }”原创 2018-06-22 20:24:55 · 5042 阅读 · 0 评论 -
vue的侦听器
首先要了解侦听器的作用 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。具体的写法如下: var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: '...原创 2018-06-15 00:12:09 · 2119 阅读 · 1 评论 -
vue中数据更新检测
在vue中数据变化,会触发视图进行更新 下面列出这几个数组 - push() - pop() - shift() - unshift() - splice() - sort() - reverse()需要注意的是当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm...原创 2018-06-15 00:23:31 · 1200 阅读 · 0 评论 -
vue绑定事件的修饰符-转换输入类型number
.lazy在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:<input v-model.lazy="msg" >.number如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:<...原创 2018-06-15 00:25:36 · 12813 阅读 · 2 评论 -
Vue实例生命周期
首先要明白什么是生命周期每一个Vue实例化都要经过一系列的初始化的过程,需要设置数据的监听,编译模板,将实例挂载到dom上,更新dom等等.created钩子这个钩子就是实例被创建之后的代码,常见的还有其他钩子,像mounted,updated,destroyed.下图vue的声明周期...原创 2018-06-13 00:13:08 · 222 阅读 · 0 评论 -
Vue中v-if和v-show的区别
v-if vs v-show v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 ...原创 2018-06-13 00:36:44 · 330 阅读 · 0 评论 -
vue的生命周期
vue的生命周期,和微信的小程序很像它可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后)然后用一个实例的demo 来演示一下具体的效果:...原创 2018-05-24 23:12:47 · 169 阅读 · 2 评论 -
vue的条件渲染v-if和v-show
v-if和v-else他们决定是否要渲染出来dom元素,和其子元素 需要注意的是v-else一定要跟着v-else否则没有作用,也可以和v-show搭配使用v-show和v-if区别在于v-if引起dom的变化,而v-show只是发生了样式的改变,v-show的消耗要比v-if小...原创 2018-05-24 23:33:29 · 404 阅读 · 0 评论 -
Vue手机mintui提供的icon字体
提供的icon的class标签 <i class="mint-toast-icon mintui mintui-more"></i> <i class="mint-toast-icon mintui mintui-back"></i> <i class="mint-toast-icon mintui min原创 2018-06-11 14:18:04 · 4505 阅读 · 0 评论 -
vue文件夹的意义
build保存一些webpack的初始化配置config保存项目初始化的配置node_modules是npm加载的项目依赖的模块src是我们需要的开发的模块assets用来放置图片等资源的components用来放置组件文件app.vue是项目的入口,相当于一个组件main.js是项目的核心文件static用来放置静态资源...原创 2018-06-11 21:19:13 · 1115 阅读 · 0 评论 -
Vue表格数据实例
下面是使用vue来处理的表格数据实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <table> <tr> <td>原创 2018-03-22 10:29:56 · 3688 阅读 · 0 评论 -
element-UI中input独自占一行
在使用element-UI中input独占一行我们可以给input表单添加宽度来解决,例如: style=”width:100px”这样来指定宽度来解决原创 2018-04-26 10:53:55 · 22717 阅读 · 1 评论 -
使用vue-cli来初始话vue项目
我们使用vue-cli来初始化项目首先要保证node安装正确我们使用 npm install -g vue-cli 全局安装vue-cli初始化项目 vue init webpack project_name进入项目目录执行安装扩展命令npm install然后运行npm run dev 完成这个时候回出现一个地址,现在去访问以下,看看是否已经安装成功...原创 2018-05-14 20:54:22 · 219 阅读 · 0 评论 -
在VUE渲染前不允许页面是显示内容
在vue变量未渲染前,会有一瞬间显示代码,影响代码美观。vue有现成的指令来解决这个问题:v-cloak在css中加入:[v-cloak]{ display: none; } 在需要元素加上:<div v-cloak> {{demo}} </div>这样,v-cloak所在元素下的变量在未渲染前不会显示。...原创 2018-05-15 10:19:17 · 3780 阅读 · 1 评论 -
vue的ui框架element-UI的弹出框范例
提示消息this.$message(‘这是一条消息提示’);成功的消息this.$message({ message: ‘恭喜你,这是一条成功消息’, type: ‘success’ });警告消息this.$message({ message: ‘警告哦,这是一条警告消息’, type: ‘warning’ });错误消息this.$mes...原创 2018-05-23 14:30:19 · 17613 阅读 · 0 评论