#记录#Day11-Vue的基础入门

最新推荐文章于 2024-07-24 16:51:29 发布

陌然回忆

最新推荐文章于 2024-07-24 16:51:29 发布

阅读量170

点赞数

文章标签： HTML 学习 Vue

本文链接：https://blog.csdn.net/qq_43455505/article/details/101002785

版权

Day11-Vue的基础入门

Vue的基础入门

1.总结一下v-text和v-html和插值表达式的差别
- 插值表达式和v-text不能够解析html标签，v-html能够解析html标签

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

<div id="app">
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg: "Hello word",
        }
    })
</script>

3、什么是MVVM模式，这样设计有什么优点
- MVVM是Model-View-ViewModel的简写
  它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
  优点是：低耦合、可重用性、独立开发、可测试

4、使用vue将下列data中cat记录显示插入到页面之中

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

<div id="app">
    <p>{{cat}}</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            cat: {
                name: '罗小黑',
                age: 18,
                desc: '是一只黑色的猫'
            }
        }
    })
</script>

5、使用vue，完成一个登陆校验功能。

在这里插入图片描述

<style>
    body {
        font-family: "Microsoft YaHei";
    }
    #login {
        width: 30%;
        background: url(http://hbimg.b0.upaiyun.com/daac8789261feeee2590d3b31a259a1fbf17ed196a4dc-24Ih03_fw658);
        margin-top: 250px;
        background-position:-150px -70px;
        border: 1px solid #f5f5f5;
    }
    #login form {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .text-center h1 {
        color: #FFFFFF;
    }
</style>
<body>
<div id="login" class="center-block">
    <div class="text-center">
        <h1>VUE登录界面</h1>
    </div>
    <form style="width: 300px" action="#" class="center-block">
        <div class="form-group">
            <label rel="username">账号：</label><input type="text" class="form-control" v-model="username">
        </div>
        <div class="form-group">
            <label rel="password">密码：</label><input type="password" class="form-control" v-model="password">
        </div>
        <div class="row">
            <input style="width: 80px" type="submit" value="登录" class="btn btn-primary col-md-6 col-md-push-4" @click="login">
        </div>
    </form>
</div>
<script>
    var vm = new Vue({
        el:'#login',
        data:{
            user1:'vue123',
            pas1:'123456',
            username:'',
            password:''
        },
        methods:{
            login(){
                if (this.username == this.user1 && this.password == this.pas1) {
                    alert("欢迎你回来！");
                } else {
                    alert(this.user1+"  "+this.pas1);
                }

            }
        }
    })

</script>
</body>

陌然回忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
#记录#Day11-Vue的基础入门

Day11-Vue的基础入门Vue的基础入门1.总结一下v-text和v-html和插值表达式的差别插值表达式和v-text不能够解析html标签，v-html能够解析html标签2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值<div id="a...
复制链接

扫一扫