秤砣小组钟—3day04

最新推荐文章于 2019-09-22 20:42:46 发布

@白少爷

最新推荐文章于 2019-09-22 20:42:46 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/ZMY_King/article/details/101064031

版权

@工商web实战开发软件1722秤砣小组钟—3day04
1.
插值表达式相当于一个占位符，只会替换掉其中的占位置的内容，v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。
插值表达式和v-text不能够解析html标签，v-html能够解析html标签
如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。
如果要同时展示用户前台数据，那么就需要用插值表达式。
如果Vue对象传递过来的数据含有HTML标签，则使用v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3day04</title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
</div>
<script src="jquery/vue.js"></script>
<script>
    var vm=new Vue({
        el: '#app',
        data: {
            msg: '冲呀！',
        }
    })
</script>
</body>
</html>

效果图
在这里插入图片描述
3.
(1)、MVVM
MVVM是Model-View-ViewModel的简写
它本质上是MVC 的改进版
MVVM（Model-View-ViewModel）框架的由来是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架

(2)、MVVM优点
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑

独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3day04</title>
</head>
<body>
<div id="app">
    <p v-text="cat.name"></p>
    <p v-text="cat.age"></p>
    <p v-text="cat.desc"></p>
</div>
<script src="jquery/vue.js"></script>
<script>
    var vm=new Vue({
        el: '#app',
        data: {
            cat:{
                name:'罗小黑',
                age:'18',
                desc:'是一只黑色的猫'
            }
        }
    })
</script>
</body>
</html>

效果图
在这里插入图片描述
5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3day04</title>
</head>
<body>
<div id="app">
    <input type="text" id="ZMY">
    <input type="text" id="password">
    <button @click="dengru">登录</button>
</div>
<script src="jquery/vue.js"></script>
<script>
   var vm=new Vue({
        el: '#app',
        data: {},
        methods:{
            dengru(){
                var zhanghao = document.getElementById("ZMY").value
                var mima = document.getElementById("password").value
                if (ZMY ==123 && password ==456){
                    alert("正确")
                }else{
                    alert("帐号或密码错误")
                }
            }
        }
    })
</script>
</body>
</html>

效果图
在这里插入图片描述