w3day04

最新推荐文章于 2021-12-21 16:00:39 发布

WILD__

最新推荐文章于 2021-12-21 16:00:39 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/WILD__/article/details/101039254

版权

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

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

完成创建一个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>
</head>
<body>
<!--2.创建一个div,并设一个div-->
<div id="app">
    <p>{{msg1}}</p>
    <p v-text="msg2"></p>
    <p v-html="html"></p>
<!--4.使用vm对象中的data-->
</div>
<!--1.导入vue-->
<script src="js/vue.js"></script>
<script>
    //3.创建一个vue对象，并赋值给一个变量vm

    //这里vm是有道理的。
    var  vm=new Vue({
        el:'#app',//使用#app选择上面的一个div
        data:{
            msg1:'我是msg中的内容a',
            msg2:'我是msg中的内容',
            html:'<h2>我是文本</h2>',
         
        }
    });

</script>
</body>
</html>

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

M表示存储数据的对象，VM表示一个中间者，V就是我们的html代码，我们要将M中的数据呈现在V中，引入了一个VM对象，V要显示数据，会找VM要，VM会从M中取到数据给V，如果V要改数据，也是通过调用VM，VM去真正改变M中的数据。优点：V中数据和M中数据始终保持一致。

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>v-bind</title>
</head>
<body>
<!--2.创建一个div,并设一个div-->
<div id="app">
    姓名<input type="text" v-bind:value="name"><br>
    年龄<input type="text" v-bind:value="age"><br>
    类型<input type="text" v-bind:value="desc"><br>
    <!--4.使用vm对象中的data-->
</div>
<!--1.导入vue-->
<script src="js/vue.js"></script>
<!--3.创建一个vue对象-->
<script>

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

                m1(){
                    alert(this.name);
                    alert(this.age);
                    alert(this.desc);
                }
            }


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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录校验</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    用户名：<input type="text" v-model="name"><br>
    密  码：<input type="text" v-model="password"><br>
    <button @click="lo">登录</button>
</div>


<script>
    var vm =new Vue({
        el:'#app',
        data:{
            name:"",
            password:"",
        },
        methods:{
            lo() {
                if(this.name == "" || this.password == ""){
                    alert('请输入用户名或者密码');
                }else{
                    alert('登录成功');
                }
            }
        }
    })
</script>
</body>
</html>

WILD__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
w3day04

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

扫一扫