VUE day1

最新推荐文章于 2024-07-27 21:58:02 发布

weixin_44295719

最新推荐文章于 2024-07-27 21:58:02 发布

阅读量77

点赞数

分类专栏：个人文章标签： vue

本文链接：https://blog.csdn.net/weixin_44295719/article/details/103940204

版权

个人专栏收录该内容

7 篇文章 0 订阅

订阅专栏

VUE day1

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

v-text：会覆盖标签中其他内容，且只能将数据以文本方式显示
v-html：会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。
插值表达式：不会覆盖标签中其他内容，而只是将其引用的数据显示在插值表达式占据的区域。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-text="msg">这是v-text</h2>
    <h2 v-html="html1">这是v-html，无法显示</h2>
    <h2 v-text="html2">这是v-text,但是无法显示</h2>
    <h2>{{msg}}</h2>
</div>
<script>
    var vm=new Vue({
        el:'#app',
       data:{
           msg:'hello',
           html1: '<span style="color: red;">使用v-text无法解析显示html代码</span>',
           html2: '<span style="color: red;">使用v-html可以解析显示html代码</span>'

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

结果：
在这里插入图片描述
3、什么是MVVM模式，这样设计有什么优点
M表示存储数据的对象，VM表示一个中间者，V就是我们的html代码，我们要将M中的数据呈现在V中，引入了一个VM对象，V要显示数据，会找VM要，VM会从M中取到数据给V，如果V要改数据，也是通过调用VM，VM去真正改变M中的数据。我们初始化V的时候就会去取数据，所以最终的效果就是，V中数据和M中数据始终保持一致。

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>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>姓名：{{cat.name}}</p>
    <p>年龄：{{cat.age}}</p>
    <p>描述：{{cat.desc}}</p>
</div>
<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>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-text="faceInfo"></p>
    <button @click="startSwim">动起来</button>
    <button @click="stopSwim">别动了</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            faceInfo: '→_→ →_→ →_→ →_→ →_→ →_→ →_→ →_→',
            interval: null,
        },
        methods: {
            startSwim() {
                while(this.timeout==null)
                 this.timeout=setTimeout(() => {
                    var preStr = this.faceInfo.substring(0, this.faceInfo.length - 1);
                    var endStr = this.faceInfo.substring(this.faceInfo.length - 1);
                    this.faceInfo = endStr + preStr;
                }, 1000)
            }},
            stopSwim() {
                clearTimeout(this.timeout)
            }
        }
    })
</script>
</body>
</html>