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

最新推荐文章于 2024-07-24 12:54:56 发布

政晓橙

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量830

点赞数 3

分类专栏：前端文章标签： vue vue基础 vue快速入门 vue.js vue.js入门

本文链接：https://blog.csdn.net/Alex_Fish/article/details/103509668

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

计数器
图片切换
记事本

第一个Demo：计数器。

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

思路：

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

我自己的实现代码如下：

<html>
<head>
<title>Vue 入门</title>
</head>
<body id="body">
<!-- 1.引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--2.创建HTML结构-->
<div id="app">
    <!-- 减号按钮，绑定了sub方法 -->
    <input type="button" value="-" @click="sub">
    
    <span v-text="count"></span>

    <!-- 加号按钮，绑定了add方法 -->
    <input type="button" value="+" @click="add">
</div>
<script>
    //3.创建Vue实例
    var app = new new Vue({
        el:"#app",
        data:{
            count:0
        },
        methods: {
            //sub函数，使得count减一
            sub:function(){
                if(this.count<=0){
                    alert('别点了，已经到头了！');
                    return;
                }
                this.count--;
            },
            //add函数，使得count加一
            add:function(){
                if(this.count>=10){
                    alert('别点了，已经到头了！');
                    return;
                }
                this.count++;
            },
            info:function(){
                alert('别点了，已经到头了！');
            }
        }
    })
</script>
</body>
</html>

第二个Demo：图片切换

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

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

个人实现代码如下：

<html>
<head>
<title>Vue 入门</title>
</head>
<body>
<!-- 1.引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--2.创建HTML结构-->
<div id="app">
    <div id="img">
        <img :src="imgArray[index]"><br>
    </div>
    <div id="button">
        <input type="button" value="上一张" @click="prev" v-show="index>0?'isDisplay':''">
        <input type="button" value="下一张" @click="next" v-show="index<3?'isDisplay':''">
    </div>
</div>
<script>
    //3.创建Vue实例
    var app = new new Vue({
        el:"#app",
        data:{
            //创建一个数组，用来存放图片路径
            imgArray:[
                "./imgs/1.jpg",
                "./imgs/2.jpg",
                "./imgs/3.jpg",
                "./imgs/4.jpg"
            ],
            index:0,
            isDisplay:true
        },
        methods: {
            prev:function(){
                this.index--;
            },
            next:function(){
                this.index++;
            }
        }
    })
</script>
</body>
</html>

第三个Demo：记事本。

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

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

个人实现代码如下：

<html>
<head>
<title>Vue 入门</title>
</head>
<body>

<!-- 1.引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--1.创建HTML结构-->
<div id="app">
    <div id="notebook">
        请输入所要记录的内容：
        <input type="text" v-model="textMsg" @keyup.enter="addMsg(textMsg)">
        <ul>
            <!-- 当textArr[]中有数据时，使用v-for指令进行循环输出 -->
            <li v-for="(item,index) in textArr">
                {{ index+1 }}. {{ item }}
                <input type="button" value="×" @click="del(index)" >
            </li>
            <label v-show="isShow">总条数：{{ count }}</label>
            <input type="button" value="清空所有" v-show="isShow" @click="delAll">
        </ul>
    </div>
</div>
<script>
    //3.创建Vue实例
    var app = new Vue({
        el:"#app",
        data:{
            //定义一个数组，添加三个数据
           textArr:[
               
           ],
           textMsg:"",
           count:"0",
           isShow:false, 
           content:""
        },
        methods: {
            //当触发键盘回车键时，将输入框中的内容添加进textArr[]，同时清空输入框
            addMsg:function(textMsg){
                //确保textMsg有值且去掉头尾空格
                if(textMsg!=null&&textMsg.trim()){
                    if(this.isShow==false){
                        this.isShow = !this.isShow;
                    }
                    this.count = this.textArr.push(textMsg);
                    this.textMsg="";
                }else{
                    alert("请输入内容");
                }
                
            },
            //用于删除数组中的内容
            del:function(index){
                console.log(index);
                if(this.count==1){
                    this.isShow = false;
                }
                this.textArr.splice(index,1);
                this.count--;
            },
            //清空数组中所有元素
            delAll:function(){
                this.textArr = [];
                this.isShow =!this.isShow;
            }
        },
        
    })
</script>
</body>
</html>

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