Vue.js 快速入门 (三) —— Vue本地应用

记录自己学习Vue.js的过程，如果有什么地方写的不好或者写错的，欢迎探讨和指正。

Vue.js 快速入门 (一) —— Vue基础

Vue.js 快速入门 (二) —— Vue常用指令

Vue.js 快速入门 (四) —— Vue网络应用

通过前面两章的学习我们已经学习到了vue.js一些常用的语法。

这章我们就用之前所学的知识来实现三个小Demo，分别是：

• 计数器
• 图片切换
• 记事本

第一个Demo：计数器。

点击按钮，在一定的数字范围内进行数字的加减，效果如下：

思路：

用v-on指令分别绑定prev和add两个方法，对数字进行加减，当数字加/减到范围内最大/最小数字时，调用info方法，提示加减数字已达到最大/最小范围。

我自己的实现代码如下：

 

第二个Demo：图片切换

点击按钮，进行图片切换，当显示第一张图片时，“上一张”按钮将隐藏，当显示最后一张图片时，”下一张“按钮将隐藏起来，效果如下：

思路：使用v-on指令为input控件绑定方法，v-bind为img控件绑定图片，同时使用v-show进行判断，当图片到达第一张/最后一张的时候，隐藏”上一张"/"下一张"按钮。

个人实现代码如下：

 

第三个Demo：记事本。

每当在文本框添加一个事件并按回车键，该事件就会被保存到记事本中，同时，最底下还会实时显示当前记事本中的条数以及”清空所有“的按钮，且每个被添加的事件后面都会跟随一个”x“按钮，点击可删除该事件，当记事本内容为空时，”清空所有“按钮以及总条数不显示，效果如下：

思路：使用v-for指令绑定li控件对数组进行循环显示，使用v-on指令绑定输入框控件以及“x”按钮和“清空所有”按钮，使用v-show控件控制底部总条数以及“清空所有”按钮的显示与隐藏。

个人实现代码如下：

    

        请输入所要记录的内容：
        
        

            
            

                {{ index+1 }}. {{ item }}
                
            
            总条数：{{ count }}
            
        
    

以上就是三个关于Vue本地应用的简单小栗子，有点丑 ，莫介意。