vue.js-学习之路day02

最新推荐文章于 2024-06-25 11:05:50 发布

骑单车的贝塔

最新推荐文章于 2024-06-25 11:05:50 发布

阅读量191

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_38949193/article/details/86624107

版权

今天学习内容:

插值表达式 {{ }}
v-cloak
v-text  
v-html  
v-bind  
v-on    
文字滚动效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        /* 拥有cloak属性的标签隐藏, 当vue加载完成, 就会把此属性取消, 就不会再隐藏了 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <!--插值表达式, 使用两组大括号把data的变量名放进去,前端页面就会渲染出来了-->
    <p>{{ msg }}</p>
    <!--当网上慢的时候,vue没完全加载出来,两组括号就好显示出来,等vue加载完才能渲染-->
    <!--这个时候有两种方法防止这种闪烁问题-->
    <!--方式一-->
    <p v-cloak>{{ msg }}</p><!--配合上面的样式使用-->
    <!--方式二-->
    <p v-text="msg"></p>
    <!--v-cloak和v-text的区别-->
    <p v-cloak>+++{{ msg }}---</p>
    <p v-text="msg">+++---</p>
    <!--v-text会把标签内的文本内容覆盖掉,而v-cloak不会覆盖-->
    <!--v-html的作用-->
    <p>{{ html_str }}</p>
    <p v-text="html_str"></p>
    <p v-html="html_str">++--</p>
    <!--对比发现插值表达式和v-text没有把字符串渲染成标签,而v-html则可以-->
    <!--v-bind,标签属性绑定变量-->
    <input type="button" value="按钮1" v-bind:title="btn">
    <!--v-bind可以简写为一个冒号-->
    <input type="button" value="按钮2" :title="btn">
    <!--v-on绑定事件-->
    <input type="button" value="触发事件" v-on:click="show">
    <!--v-on可以简写为@-->
    <input type="button" value="触发事件2" @click="show">
    <!--做一个文字滚动示例 , 深入理解上面命令的用法-->
    <br>
    <br>
    <input type="button" v-bind:value="start_btn" v-on:click="start">
    <input type="button" :value="stop_btn" @click="stop">
    <p v-text="msg2"></p>


</div>

<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",//el表示要控制的区域
        data: {//data就是model,用来存放数据
            msg: "Hello Vue",
            html_str: "<h1>Hello Vue</h1>",
            btn: "我是一个按钮",
            start_btn: "开始滚动",
            stop_btn: "暂停滚动",
            msg2: "昔人已乘黄鹤去,此地空余黄鹤楼",
            intervalId: null

        },
        methods: {
            show: function () {
                alert("已触发事件")
            },
            start: function () {
                if (this.intervalId != null) return;

                this.intervalId = setInterval(() => {
                    var start = this.msg2.substring(0, 1);
                    var end = this.msg2.substring(1);
                    this.msg2 = end + start;
                }, 400);
            },
            stop: function () {
                clearInterval(this.intervalId);
                this.intervalId = null;
            }

        }
    })
</script>
</body>
</html>

骑单车的贝塔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js-学习之路day02

今天学习内容:插值表达式 {{ }}v-cloakv-text v-html v-bind v-on 文字滚动效果&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&
复制链接

扫一扫