web应用开发实战作业day11

最新推荐文章于 2024-04-05 20:15:27 发布

孤星谦仔

最新推荐文章于 2024-04-05 20:15:27 发布

阅读量121

点赞数

分类专栏： web应用开发实战作业文章标签： web前端

本文链接：https://blog.csdn.net/small_qianzai/article/details/101279282

版权

web应用开发实战作业专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、总结一下v-text和v-html和插值表达式的差别
v-text写在标签属性中，会覆盖标签中其他内容，且只能将数据以文本方式显示。
v-text写在标签属性中，会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。
2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
<div id="app">
    <p>{{mag}}</p>
    <p v-text="msg" style="color: red;"></p>

    <p v-html="msg"></p>
</div>
<p>{{name}}</p>
<script>
    var vm = new Vue({
    el:'#app',
    data:{
        msg:'看的到吗',
       
    }
});</script>
</body>
</html>

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

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
4.使用vue将下列data中cat记录显示插入到页面之中

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

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

</body>
</html>

5、使用vue，完成一个登陆校验功能。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #login {
            width: 400px;
            background-color: red;
            border: 1px solid blue;
            margin-top: 100px;
        }
        #login form {
            padding-top: 25px;
            padding-bottom: 25px;
        }
        .text-center h1 {
            color:white;
        }
    </style>




    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="vue.js"></script>
</head>

<body style="background:url('http://img3.imgtn.bdimg.com/it/u=2411341495,3097540968&fm=26&gp=0.jpg');">
<div id="login" class="center-block">
    <div class="text-center">
        <h1>登录界面</h1>
    </div>
    <form style="width: 250px" 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: 100px" 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:{
            user:'luqian',
            pas:'luqian1',
        },
        methods:{
            login(){
                if (this.username == this.user && this.password == this.pas) {
                    alert("恭喜登录！！");
                } else {
                    alert('登录失败，账号错误或密码错误！');
                }
            }
        }
    })
</script>

</body>
</html>

孤星谦仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web应用开发实战作业day11

1、总结一下v-text和v-html和插值表达式的差别v-text写在标签属性中，会覆盖标签中其他内容，且只能将数据以文本方式显示。v-text写在标签属性中，会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下dat...
复制链接

扫一扫