2019.11.4vue框架实训作业

最新推荐文章于 2023-07-09 22:25:15 发布

Alex风印

最新推荐文章于 2023-07-09 22:25:15 发布

阅读量811

点赞数

文章标签： vue html5前端

本文链接：https://blog.csdn.net/weixin_45841960/article/details/102923727

版权

2019.11.4vue框架实训作业

作业内容

作业内容

1、总结一下v-text和v-html和插值表达式的差别
2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
3、什么是MVVM模式，这样设计有什么优点
4、使用vue将下列data中cat的几条属性插入到页面之中

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

效果如下：

5、使用vue，完成一个计算器功能。
要求如下：

符号通过下拉框选择
点击计算能根据输入值以及所选运算符算出结果显示在第三个文本框中。

提示：
下拉框是个表单元素，所以下拉框的值可以通过我们所学的v-model获取。

作业1：v-text和v-html和插值表达式的差别

插值表达式是插入、v-text和v-html都是覆盖写入

作业2：插值表达式、v-text、v-html的应用

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<!--使用Vue的基本步骤-->
<!--1、创建一个标签容器-->
<div id="app">
    <!--将M中数据写入V的几种方式总结-->
    <!--1、插值表达式-->
    <p>消息：{{msg}}</p>
    <!--2、v-text，将M中内容以文本格式写入到V中-->
    <p v-text="msg">原来的内容</p>
    <!--3、v-html，将M中内容以HTML代码的形式渲染到V中-->
    <p v-html="msg">原来的内容</p>
</div>

<!--2、编写创建Vue对象的js代码-->
<script>
    // {}，表示一种js创建对象的方式。
    //所以我们这边是用一个对象做参数创建另一个对象
    //{属性名:属性值, 属性名:属性值, 属性名:属性值}
    //{属性名=属性值, 属性名:属性值, 属性名:属性值}
    // var msg = 'hello world';
    // var demop = document.getElementById('demop');
    // demop.innerText = msg;
    // msg = 'hello';
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "<h2>Hello World</h2>"
        }
    });
</script>
</body>
</html>

作业3：MVVM模式的定义和优点

Vue框架的几个关键角色：
* 1、视图，往往是一个div，View
* 2、数据，数据被用于展示在视图div之中， Model
* 3、监视者，即由Vue创建出来的vm对象，它的作用是，监视数据和视图的变化，并将变化反应到另一方VM
* 这三者组合起来，叫做mv vm设计模式

优点：
1.双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化。很好做到数据的一致性，不用担心，在模块的这一块数据是这个值，在另一块就是另一个值了。所以 MVVM模式有些时候又被称作：model-view-binder模式。
2.View的功能进一步的强化，具有控制的部分功能，若想无限增强它的功能，甚至控制器的全部功几乎都可以迁移到各个View上（不过这样不可取，那样View干了不属于它职责范围的事情）。View可以像控制器一样具有自己的View-Model.
3.由于控制器的功能大都移动到View上处理，大大的对控制器进行了瘦身。不用再为看到庞大的控制器逻辑而发愁了。
4.可以对View或ViewController的数据处理部分抽象出来一个函数处理model。这样它们专职页面布局和页面跳转，它们必然更一步的简化。

作业4：用vue将下列data中的几条属性插入到页面之中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>姓名：{{cat.name}}</p>
			<p>年龄：{{cat.age}}</p>
			<p>描述：{{cat.desc}}</p>
		</div>
		<script>
		   var vm=new Vue({
			el:"#app",
			data: {
				cat: {
					name: '罗小黑',
					age: 18,
					desc: '是一只黑猫'
					},
				}
		   });
		</script>
	</body>
</html>

作业5：vue计算器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--第一个操作数-->
    <input type="text" v-model="a">
    <select name="" id="" v-model="c">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="b">
    <input type="button" value="计算"
           @click="calculate">
    <input type="text" :value="result">
</div>
<script src="js/vue.js"></script>
<script>
    /*对象语法{属性名:属性值, 属性名:属性值}*/
    var vm = new Vue({ // VM
        el: '#app', // V
        data: { // M
            a: '', // 第一个操作数
            c: '', // 操作符
            b: '', // 第二个操作数
            result: '',
        },
        methods: {
            calculate() {
                if (this.c == '+') {
                    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
                    this.result = parseInt(this.a/1) + parseInt(this.b);
                }
                if (this.c == '-') {
                    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
                    this.result = parseInt(this.a) - parseInt(this.b);
                }
                if (this.c == '*') {
                    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
                    this.result = parseInt(this.a) * parseInt(this.b);
                }
                if (this.c == '/') {
                    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
                    this.result = parseInt(this.a) / parseInt(this.b);
                }

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

Alex风印

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019.11.4vue框架实训作业

2019.11.4vue框架实训作业作业内容作业1：v-text和v-html和插值表达式的差别作业2：插值表达式、v-text、v-html的应用作业3：MVVM模式的定义和优点作业4：用vue将下列data中的几条属性插入到页面之中作业5：vue计算器案例作业内容1、总结一下v-text和v-html和插值表达式的差别2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达...
复制链接

扫一扫