Vue.js
关注
分享
扫一扫
panzm_csdn
这个作者很懒，什么都没留下…
展开
-
Vue js 的生命周期
用Vue框架，熟悉它的生命周期可以让开发更好的进行。首先先看看官网的图，详细的给出了vue的生命周期:它可以总共分为8个阶段：beforeCreate（创建前）,created（创建后）,beforeMount(载入前),mounted（载入后）,beforeUpdate（更新前）,updated（更新后）,beforeDestroy（销毁前）,destroyed（销毁后）然后用一个实例的demo...转载 2018-06-29 15:19:01 · 730 阅读 · 1 评论 -
vue-resource全攻略
Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resou...转载 2018-06-29 15:10:40 · 207 阅读 · 0 评论 -
vue 自定义指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>directive</title> <script src="../vuejs/vue.min-1.0.28.js"&原创 2018-06-28 15:08:59 · 122 阅读 · 0 评论 -
vue-事件修饰符和按键修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。.prevent...转载 2018-06-28 13:43:23 · 492 阅读 · 0 评论 -
全局过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>private-filter</title> <script src="../vuejs/vue.min-1.0.28.js"原创 2018-06-28 11:04:10 · 494 阅读 · 0 评论 -
自定义私有过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>private-filter</title> <script src="../vuejs/vue.min-1.0.28.js"原创 2018-06-28 10:59:31 · 200 阅读 · 0 评论 -
Vue系统过滤器
vue本身提供了很多便利的过滤器，这里列举一下，具体的可以参考官方文档过滤器。例子中使用到的data和methodsdata:{ message: 'hello world', money: 12345, num: [1,2,3,4,5], obj: { name: 'Linda', a...转载 2018-06-28 10:35:00 · 281 阅读 · 0 评论 -
v-if&v-show
今天来说一下vue中 v-if 和 v-show 的区别！一、v-if 和 v-show 在页面都展示为显示隐藏，但是它两有这本质的区别。 例如：<div v-if=""></div> 不同点：1 . v-if 当值为 true时，显示div ，当值为false时，改元素消失，代码也会消失，相当于将代码删除了，当在为true时，页面会重新渲染div; 而v-show 控制的...原创 2018-06-22 11:51:05 · 269 阅读 · 0 评论 -
v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2018-06-22 11:19:23 · 129 阅读 · 0 评论 -
v-model
v-model：双向数据绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model</title> <script src="../vuejs/vue.min-1.0.28.原创 2018-06-22 10:48:30 · 297 阅读 · 0 评论 -
v-bind
作用 ： 绑定标签属性，：后面是标签属性名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-bind</title> <script src="../vuejs/vue.min-1原创 2018-06-21 16:45:05 · 209 阅读 · 0 评论 -
vue -- v-cloak解决刷新或者加载出现闪烁（显示变量）
在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如<div class="#app"> <p>{{value.name}}</p></div>在加载的时候会看到{{value.name}}在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak那么，v-cloak要放在什么位置呢，是不是每个需要渲染数...转载 2018-06-21 16:15:43 · 175 阅读 · 0 评论 -
v-text&v-html
指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能。v-指令名 = “表达式判断或者是业务模型中属性名或者事件名”。v-text：操作元素中的纯文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-te原创 2018-06-21 16:12:56 · 132 阅读 · 0 评论 -
v-on绑定事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-on</title> <script src="../vuejs/vue.min-1.0.28.js">&原创 2018-06-21 14:03:35 · 202 阅读 · 0 评论 -
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下：var vm = new Vue({ // 选项})可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：<div id = "vue_det"></div>这意味着我们接下来的改动全部在以上指定的 div 内，div 外...转载 2018-06-21 10:46:26 · 112 阅读 · 0 评论 -
MVVM模式
一个常规软件或者 APP 一般都是服务于某种商业或者非商业述求，我们平常称为“业务需求”。随着业务需求的扩张、一个软件会变得越来越庞大，越来越复杂。所以一般都会有一套完整的架构设计、研发流程以及质量管理体系来保证整个研发过程。关于“架构设计”，这是一个很大的话题，伴随着我们的业务需求，它会涉及到方方面面，我们今天来谈一谈其中的一个基础环节——MVVM模式。经典的 MVC 模式MVC 是最常见的客户...转载 2018-06-20 10:59:22 · 214 阅读 · 0 评论