vue-js
EffIdong
计划!效率!
展开
-
vue--完成购物车demo
跟着视频做了两天的购物车demo,总算告一段落,写下博客总结下步骤 如图 学到了很多东西,写出效果时,也感受了其相比一些框架的简洁 整个页面js代码不到一百行,通过在vue函数中定义属性以及方法,然后在回到html标签中通过 v-for渲染表单, v-bind改变标签的class、style、src v-on绑定用户点击事件,在其中绑定vue定义的函数 v-module双向绑定整个js原创 2017-06-05 19:35:45 · 1077 阅读 · 1 评论 -
vue--computed
-类型: { [key: string]: Function | { get: Function, set: Function } }详细:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。注意,不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上原创 2017-06-07 17:00:22 · 2329 阅读 · 0 评论 -
vue开发中在页面代码中一律不能使用this
<div @click='this.limitNum=this.address.length'></div>以上代码是错误的,因为当前代码的作用域就已经是this了 正确写法<div @click='limitNum=address.length'></div>原创 2017-06-07 17:09:59 · 4144 阅读 · 0 评论 -
初学Vue
成功跟着视频和官方文档写出了一小部分代码后,我深深感受到了vue框架对初级前端学习者的方便,正如官方文档所说:vuejs 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱原创 2017-06-03 18:00:09 · 419 阅读 · 0 评论 -
vue-- vue-bind:src
vue-bind:src=’图片路径’<div class="cart-item-pic"> <img v-bind:src="item.productImage" alt="烟"></div>代码中item.productImg是引用的我的json文件中的productImage属性{ "status":1, "result":{ "totalMoney":109,原创 2017-06-04 09:29:50 · 1624 阅读 · 1 评论 -
vue--mounted
1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。(百度百科)2.相对于前端来讲 对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行。3.vue中的mount原创 2017-06-04 10:29:02 · 68006 阅读 · 1 评论 -
vue--v-model指令
v-model是表单控件指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。负责坚挺用户的输入事件来更新数据以下是代码实践 html+vue <div class="quantity"> <a href="javascript:;" >-</a> <input type="text" value="0" v-model="item.productQ原创 2017-06-04 09:56:39 · 1413 阅读 · 0 评论 -
vue--过滤器
1.Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:2.目的:用于文本转换3.代码html+vue<!--产品单价--><div class="cart-tab-2"><!--引用局部过滤器--> <div class="item原创 2017-06-04 11:16:15 · 570 阅读 · 0 评论 -
vue--创建对象属性
如果我们遇到以下情况 当我们在页面中想完成一个动态效果,例如通过鼠标点击控制class的隐藏或者显示,然而我们的代码或者引用的数据中没有这个属性,这个时候我们可以通过vue中的set方法创建属性,并且为其赋值。2.例如以下代码 以下并不是完整代码,由于完整代码有点多,所以仅截取相关代码 HTML+Vue<div class="cart-item-check"><!--我们没有在标签中创建名原创 2017-06-04 15:31:26 · 6834 阅读 · 0 评论