VUE学习第一天

最新推荐文章于 2020-01-10 19:29:47 发布

YiNanPrincess

最新推荐文章于 2020-01-10 19:29:47 发布

阅读量171

点赞数

分类专栏： vue 文章标签： Vue作业01

本文链接：https://blog.csdn.net/YiNanPrincess/article/details/102923842

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

总结一下v-text和v-html和插值表达式的差别
v-text和{{}}表达式渲染数据，不解析标签。
v-html不仅可以渲染数据，而且可以解析标签。
创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		script src="./js/vue.js"></script>
	</head>
	<body>
	<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:"<h2>Hello World!</h2>"
					}	
			});	
		</script>
	</body>
</html>

3.什么是MVVM模式，这样设计有什么优点
M：负责存储数据（模型层）
V：负责显示数据（视图层）
VM：Vue自带的层（内置）MVVM 不用关注ViewModel如何实现的，它是Vue内置的
最重的是M层，dom操作被极大简化，使用MVVM是面向数据进行编程
4.使用vue将下列data中cat的几条属性插入到页面之中

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

<!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: 8,
						desc: "是一只黑色的猫"
					},
					},
					});
		</script>
	</body>
</html>

5.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: '0', // 操作符
            b: '', // 第二个操作数
            result: '',
        },
        methods: {
            calculate() {
                if (this.c == '+') {
                    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
                    this.result = this.a / 1 + this.b / 1;
                }
				if (this.c == '-') {
				    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
				    this.result = this.a / 1 - this.b / 1;
				}
				if (this.c == '*') {
				    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
				    this.result = this.a / 1 * this.b / 1;
				}
				if (this.c == '/') {
				    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
				    this.result = this.a / 1 / this.b / 1;
				}

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

YiNanPrincess

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习第一天

总结一下v-text和v-html和插值表达式的差别v-text和{{}}表达式渲染数据，不解析标签。v-html不仅可以渲染数据，而且可以解析标签。创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值<!DOCTYPE html><html> <head> &lt...
复制链接

扫一扫