使用Vue创建计算器

学习Vue有一段时间了,但真正的实战并不是很多。师父告诉我,要学好就得多动手。为了能把动手写的案例有一个集中的地方放置,我在Github上创建了一个仓库VueStudy。这里将会不断的添加一些练习过的案例,如果你感兴趣的话,欢迎提交你写过的案例。

Vue的作用域插槽

作用域插槽(Scoped Slots)是Vue的一个很有用的特性。可以使组件更加通用和可复用。唯一的问题是他们很难理解!试图让你围绕着整明白父和子作用域的交织关系,就像是解决一个棘手的数学方式程一样。当你理解不了的时候,最好的一个方法就是试着用它来解决问题。在接下来的内容中,这篇文章将向大家演示如何使用作用域插槽来构建可重用的列表组件。

Vue 2.0学习笔记:Vue的模板

学习Vue 2.0也有一段时间了,从前面的学习过程中,也知道在Vue中使用模板的基础知识。我们知道如何使用字符串插值在Vue中输出数据。其实在Vue的模板中,我们还可以做一些扩展,比如可以在字符串插值语法中使用简单的JavaScript表达式。之所以说简单的JavaScript表达式,是因为只能包含一个表达式,因此,不能使用循环或任何复杂的逻辑。不管怎么说,这样的逻辑不属于我们的模板,在Vue实例中放置一个方法会比较好。这我们后面会深入学习到这方面的知识点。

Vue的计算属性

Vue中的计算属性是所有属性的计算,而这些计算都是变向的在过滤值,通过数据的不断变化计算出来不同的值和操作不同的方法. 而在Vue中,会使用到计算属性的场景常见的有:模板内的表达式、属性v-bind里可以进行的表达式和指令中可以进行的表达式。以上三者的主要优势是简洁。如果只是一个小操作,比如说一些简单的数值++,字符拼接,三元表达式,那么使用相当方便。当然,以上方式也有自己的劣势。一旦要处理的逻辑复杂,代码量就会变得大得多,而且难于维护。比如说用到if语句来控制流程。

Vue 2.0学习笔记: Vue中的computed属性

Vue中的computed属性称为计算属性。在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算。也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护。

Vue组件通讯:单个组件

单个组件相对而言简单一点。在我看来,有些事情你需要知道才能让你开始。关于Vue组件的模板和脚本部分如何协同工作的。模板和脚本组成一个单元,并共享相同的数据。最好的学习就是通过一些实例来阐述,这样更易于交流。

Vue.js 定义组件模板的七种方式

在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式):字符串、模板字面量、x-template、内联模板、render 函数、JSF和单文件组件。在这篇文章中,我将通过示例介绍每个选项,并探讨利弊。以便你知道在任何特定情况下最适合的是哪一种。

Vue 2.0学习笔记:v-bind

经过前面的学习,我们知道v-on可以实现事件绑定,v-model可以实现双向数据绑定。在Vue中除了这两个指令,还有一个v-bind指令。它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式。简单说,v-bind是用来绑定HTML属性

在Vue中有条件地使用CSS类

很多时候Web在运行时要更改元素的CSS类名。但是在改变类名时,有时最好是有条件地应用样式。例如你有一个翻页的效果。翻页效果通常有一个高亮的效果,用于向用户显示当前页,这对于用户而言是很有帮助的。该项目的样式是有条件设置的,基于当前正在查看的页面。

Vue 2.0学习笔记:自定义表单组件

上一节中,通过v-model的学习,我们可以实现双向数据绑定的的效果。在整个教程中,我们看到的示例都是表单控件方面的。实际上v-model还可以和组件结合在一起实现双向数据的绑定效果。在Web的表单控件中,我们经常为了一些特殊的视觉效果,做自定义的表单风格,比如单选按钮、复选框和下拉选择框之类的。那么我们通过Vue来做这些表单控件的组件,会让我们变得更为轻松,而且一劳永逸。接下来我们看看怎么实现单选按钮和复选框的组件。

页面

返回顶部