vue学习第一天

最新推荐文章于 2024-07-22 08:55:10 发布

blank_zio

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量179

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/blank_zio/article/details/103931392

版权

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

MVVM模式室友经典的软件构架MVC衍生出来的，当View(视层图)发生变化的时候，会自动更新到ViewModel(视图模型)，反之亦然，View和ViewModel之间通过双向绑定（data-bingding）建立联系。
在这里插入图片描述

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

<div id="app">
    <h3>===={{msg}}====</h3>
    <h3>{{msg2}}</h3>
    <div v-html="msg2">==============</div>
    <div v-text="msg2">==============</div>
</div>
<script src="js/vue.js"></script><!--导入vue.js-->
<script>
    var vm = new Vue({
        el: '#app',/*挂载id为app标签等同于document.querySelector("#app")*/
        data: {
            msg: 'hello world!',
            msg2: '<h1>nihao</h1>'
        }
    })

v-text和v-html和插值表达式的差别

   var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world!',
            msg2: '<B>nihao</B>'
        }
    })

插值表达式

使用双大括号"{{}}"的插值方法，将元素当成纯文本输出,并且不会覆盖原有的文档。
在执行该代码后所到的的结果为=hello world!=。

<div id="app">
    <h3>={{msg}}=</h3>
</div>

v-html表达式

v-html属性的语法是：<标签名 v-html=""data中的属性名><标签名>。会覆盖以前的内容，能渲染html的代码到标签中。
在执行该代码后所到的的结果为nihao。

<div id="app">
    <div v-html="msg2">==============</div>
</div>

v-text表达式

v-text属性的语法是：<标签名 v-text=""data中的属性名><标签名>与v-html一样是我是能覆盖以前的内容但是不能渲染html的代码到标签中。
在执行该代码后所到的的结果为nihao。

<div id="app">
    <div v-text="msg2">==============</div>
</div>

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

<div id="app">
    <b>姓名: {{name}}</b><br>
    <b>年龄: {{age}}</b><br>
    <b>描述: {{desc}}</b>
</div>
<script src="js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            name: '罗小黑',
            age: 8,
            desc: '是一只黑色的猫'
        }
    })
</script>

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

在这里插入图片描述
在点击“动起来”按钮的时候，会调用swim方法，同时创建一个新的定时器。多次点击后，因为多个定时器在同时工作会导致移速变快。要停止表情包的移动就要关闭所有的定时器。这时候需要创建一个arr数组来接收多个定时器的返回值，在stop方法中遍历arr数组，利用clearInterval()去一个个关闭。

<body>
<div id="app">
    <p>{{face}}</p>
    <!--@click调用方法可以不写括号，比如无参的时候可以不写，有参的时候再写-->
    <button v-on:click="swim">动起来</button>
    <button @click="stop">停起来</button>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            face: "→_→ →_→ →_→ →_→ →_→ →_→ →_→ →_→ ",
            /*arr数组用于获取定时器的返回值*/
            arr: []
        },
        methods: {
            swim() {
                /*让swin中的内容周期性改变，改变规则是将最后一个提取到最前面，同时用arr数组接收定时器的返回值*/
                this.arr.push(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;
                }, 300));
            },
            stop() {
                /*遍历arr数组，一个个关闭定时器*/
                this.arr.forEach((item) => {
                    clearInterval(item)
                })
            }
        }
    })
</script>
</body>

blank_zio

关注

1
点赞
踩
0

收藏

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

v-text和v-html和插值表达式的差别 var vm = new Vue({ el: '#app', data: { msg: 'hello world!', msg2: '<B>nihao</B>' } })插值表达式使用双大括号"{{}}"的插值方法...
复制链接

扫一扫