vue学习第一天

最新推荐文章于 2024-07-11 20:55:36 发布

SHEERLOHAS

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量109

点赞数 1

分类专栏： vue学习文章标签： vue javascript js

本文链接：https://blog.csdn.net/qq_42853588/article/details/103928762

版权

vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue学习第一天

1、总结v-text和v-html和插值表达式的差别
(1)v-text属性,语法是：<标签名 v-text=“data中属性名”></标签名>
特点1是覆盖以前内容
特点2是不能渲染html代码到标签中
(2)v-html属性,语法是：<标签名 v-html=“data中属性名”></标签名>
特点1是覆盖以前内容
特点2是能渲染html代码到标签中

2.创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--1.{{}}插值表达式获取data内容-->
    <h3>The msg:{{msg}}</h3>
    <!--2.v-html属性获取data内容-->
    <div v-html="msg">======</div>
    <!--2.v-text属性获取data内容-->
    <div v-text="msg">=====</div>

</div>

<!--导入vue.js-->
<script src="js/vue.js"></script>
<script>

    var vm = new Vue({
        el: '#app',//el:element
        data: {
            msg: 'Hello,vue'
        }
    })
</script>
</body>
</html>

3.什么是MVVM模式，这样设计有什么优点
vue中有三个角色:V,M,VM，这就是MVVM模式，他们之间的区别在于：
M:model,表示数据存储者。
V:view,视图，表示显示给用户看的html代码。
VM:是一个中间者，承担着监视器的职责，它能够将M或V中的变化同步到另一方。
这样设计的优点在于View可以基于Model进行独立修改和变化，可以把一些视图逻辑放在一个ViewModel里面进行重用，而且在界面测试比较方便。

4、使用vue将下列data中cat的几条属性插入到页面之中

// 代码
var vm = {
	el: '#app',
	data: {
		cat: {
			name: '罗小黑',
			age: 8,
			desc: '是一只黑色的猫'
		}
	}
}

效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>姓名：{{cat.name}}</h1>
    <h1>年龄：{{cat.age}}</h1>
    <h1>描述：{{cat.desc}}</h1>
</div>

<!--导入vue.js-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            cat: {
                name: '罗小黑',
                age: 8,
                desc: '是一只黑色的猫'
            }
        }
    })
</script>
</body>
</html>

5、表情包无限加速，一键关闭功能改造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{face}}</p>
    <button @click="Swim">启动（加速）</button>
    <button @click="stop">停止</button>
</div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',//el:element
            data: {
                face: '→_→ →_→ →_→ →_→ →_→ →_→ →_→ →_→ ',
                interval: null,
                speed:200
            },
            methods: {
                /*通过每次控制全局变量speed来实现单个定时器的控制，每次加速时需要清除上一个定时器*/
                Swim() {
                    if (this.interval != null) {
                        clearInterval(this.interval);
                        this.interval=null;
                        if(this.speed>=50){
                            this.speed=this.speed-10;
                        }
                    }
                    /*让face中的内容周期性改变，改变规则是将最后一个提取到最前面*/
                    this.interval = setInterval(() => {
                        /*将face中最后一位提取到第一位*/
                        var s = this.face;
                        var endstr = s[s.length - 1];
                        var startStr = s.substring(0, s.length - 1); //end的下标是减1
                        s = endstr + startStr;
                        this.face = s;
                    }, this.speed)
                    //alert('switch on')
                },
                stop() {
                    clearInterval(this.interval);
                    this.speed=200;
                    this.interval = null;
                    // alert('switch off')
                }
            }
        })
    </script>
</body>
</html>

SHEERLOHAS

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习第一天

vue学习第一天1、总结v-text和v-html和插值表达式的差别(1)v-text属性,语法是：<标签名 v-text=“data中属性名”></标签名>特点1是覆盖以前内容特点2是不能渲染html代码到标签中(2)v-html属性,语法是：<标签名 v-html=“data中属性名”></标签名>特点1是覆盖以前内容特点2是能渲染...
复制链接

扫一扫