Vue学习第一天

Sakura_YT

于 2020-01-11 15:17:12 发布

阅读量227

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Sakura_YT/article/details/103936959

版权

Vue学习第一天

1.总结一下v-text和v-html和插值表达式的差别

1。{{}}插值表示法获取data内容
	特点1是不覆盖以前的内容
	特点2是不能将内容解析为html格式
2.v-text:
	特点1是覆盖以前内容
	特点2是不能渲染html代码到标签中
3.v-html:
	特点1是覆盖以前内容
	特点2是能渲染html代码到标签中，即它会将msg2的值以html的形式写入到div内部

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">
    <!--插值表达式-->
    <h3>==={{msg}}===</h3>
    <h3>==={{msg2}}===</h3>
    <!--v-text-->
    <div v-text="msg2"></div>
    <!--v-html-->
    <div v-html="msg2">====</div>
</div>
<!--创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!',
            msg2: '<h1>Hello World2</h1>'
        }
    })
</script>
</body>
</html>

3.什么是MVVM模式，这样设计有什么优点

M是model，表示数据存储者V是
view，视图，表示显示给用户看的html代码
VM：是一个M和V的中间者，承担着监视器的职责，它能够将M或者V中的数据变化同步到另一方。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--插值表达式-->
    <h3>姓名：{{name}}</h3>
    <h3>年龄：{{age}}</h3>
    <h3>描述：{{desc}}</h3>
</div>
<!--创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            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>
    <!--@click调用无参方法可以不写括号，有参数再写-->
    <button @click="swim">动起来</button>
    <button @click="stop">停下来</button>
</div>
<script src=" js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            face: '→_→ →_→ →_→ →_→ →_→ →_→ →_→ →_→ ',
            timeend: null,
            x:100
        },
        methods: {
            swim() {
                if (this.timeend != null) {
                    clearInterval(this.timeend);
                    this.timeend=null;
                    if(this.x>=10){
                        this.x=this.x-10;
                    }
                }
                /*让face中内容周期性改变，改变规则是将最后一个提取到最前面*/
                this.timeend = setInterval(() => {
                    /*将face中最后一位提取到第一位*/
                    var s = this.face;
                    var endStr = s[s.length - 1];
                    var startStr = s.substring(0, s.length - 1);
                    s = endStr + startStr;
                    this.face = s;
                },this.x)
            },
            stop() {
                clearInterval(this.timeend);
                this.x = 200;
                this.timeend = null;
            }
        }
    })
</script>
</body>
</html>