Vue.js01之常用标签及跑马灯小案例

最新推荐文章于 2024-04-08 14:33:14 发布

autumn-leaf

最新推荐文章于 2024-04-08 14:33:14 发布

阅读量430

点赞数 1

分类专栏： Vue.js Vue.js 文章标签： Vue.js

本文链接：https://blog.csdn.net/chenpeixing361/article/details/88829007

版权

Vue.js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Vue.js

4 篇文章 0 订阅

订阅专栏

如今Vue.js越来越火了，主学后端的我也开始学习前端的热门框架了。首先简单介绍一下Vue.js,Vue.js是以数据驱动和组件化的思想构建的。相比于Angular.js，它提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

Vue.js主要采用MVVM模式，如下图所示，主要描述了该模式下ViewModel是如何和View以及Model进行交互的。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

好了，理论简单介绍了一下，接下来我们来撸代码了，我用的是vue-2.6.10.js,大家可以在官网或者Github上进行下载。接下来我会先亮出代码，然后挑里面重要的知识点进行讲解，第一个Demo如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js基础指令</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <!-- Vue实例控制的元素区域,就是MVVM中的V -->
    <div id="app">
        <!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
        <p v-cloak>{{ msg }}</p>
        <!-- 默认v-text没有闪烁问题 -->
        <h4 v-text="msg"></h4>
        <p v-html="msg2"></p>
        <!-- v-bind中,可以写合法的JS表达式,缩写是: -->
        <input type="button" value="按钮" :title="mytitle+'123'">
        <!-- v-on代表事件绑定机制,缩写是@ -->
        <input type="button" value="按钮" @click="show">
    </div>
    <script>
        //创建Vue的实例,vm对象相当于MVVM中的VM调度者
        var vm = new Vue({
            el: '#app',         //表示new的Vue实例要控制页面上哪个区域
            //data相当于MVVM中的M,用来保存每个页面中的数据
            data: {             //data属性存放的是el要用到的数据
                msg: '欢迎学习Vue',//通过Vue提供的指令,很方便就能把数据渲染到页面,
                                // 不再手动操作DOM元素了
                msg2: '<h1>大家好,我是autumn_leaf.</h1>',
                mytitle:'这是我自己定义的title'
            },
            methods: {
                show: function () {
                    alert('Hello!');
                }
            }
        })
    </script>
</body>
</html>

上述代码中，body中div中的id值为app，在新建的Vue实例中属性el标注为id的值，在前面加上'#'，便可以控制这一片的页面区域，我们可以看到主页面区域用到了五个指令，分别是v-cloak,v-text,v-html,v-bind,v-on,接下来我会逐一进行讲解。

（1）v-cloak: 该指令主要用于解决屏幕闪动的问题，当网络较慢时，网页还在加载Vue.js,而导致Vue来不及渲染,这时页面就会显示出 Vue 源代码。而我们可以使用 v-cloak 指令来解决这一问题；

（2）v-text: 该指令主要用于将数据解析为纯文本，但是却不能输出真正的html；

（3）v-html:该指令可以用来解析html的代码，并输出文本的信息；

（4）v-bind:该指令主要用于给html标签设置属性，在以上代码中，我们缩写成了:符号,我们绑定了input标签的title属性,里面的内容可以是合法的js表达式；

（5）v-on:该指令主要用于绑定html事件，在以上代码中，我们缩写成了@符号，我们通过调用methods对象里的show函数，从而显示出Hello；

在整个代码里面，我们没有操作DOM元素，通过Vue实例中的data属性就可以直接添加数据了。

以上代码运行结果如下图所示：

鼠标放在第一个按钮上，会出现"这是我自己定义的title123''的字样，点击第二个按钮，会跳出Hello的弹出框。

上述代码中,<div id="app">.......</div>相当于MVVM中的V，创建的vm实例相当于VM调度者,而data属性相当于MVVM中的M，用于保存页面的数据，确实逻辑清晰，容易学习。

好了，基础知识就介绍到这儿了，接下来我们写一个跑马灯的小案例来巩固刚刚所学的内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
        <h4>{{ msg }}</h4>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg: '猥琐发育,别浪!稳住,我们能赢!',
                intervalId: null //在data上定义计时器id
            },
            methods: {
                lang() {
                    //防止多次点击
                    if(this.intervalId != null) return ;
                    //console.log(this.msg);
                   this.intervalId = setInterval(() => {
                        //截取开头字符以及结尾字符
                        var start = this.msg.substring(0, 1);
                        var end = this.msg.substring(1);
                        //重新拼接,得到新的字符串
                        this.msg = end + start;
                    }, 400)
                },
                //停止计时器
                stop() {
                    clearInterval(this.intervalId);
                    //每当清除了计时器id,需要重新置为null
                    this.intervalId = null;
                }
            }
        })
        
    </script>
</body>
</html>

运行效果如下图所示：

我们点击浪起来的按钮，会不断出现"猥琐发育,别浪!稳住,我们能赢!"的倒体字样，当我们点击低调的按钮时，则当前字样静止不动。

在data属性中我们定义了两个参数，一个是msg用来显示信息，一个intervalId用来表示计时器的id,methods对象中定义了两个函数，分别是lang函数和stop函数，在lang函数中，我们为了防止多次点击的情况出现，先进行了if语句的判断，然后用到了setInterval函数，里面用于截取新的字符信息，传给msg，并设置了400ms的频率周期，在stop函数中，每当我们点击清空计时器的id时，必须要重新赋值为null,这样接下来再次点击浪起来才不会出现问题。

好了，本次的分享就到这里了，接下来我会继续更新Vue相关的知识，有疑惑的同学可以评论区下方进行留言哦！