DAY01

最新推荐文章于 2022-03-25 21:20:44 发布

JacksonYee1

最新推荐文章于 2022-03-25 21:20:44 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/JacksonYee1/article/details/102924070

版权

v-text和v-html和插值表达式的差别：
v-text：将M中的内容以文本格式写入V中
v-html:将M中内容以HTML的代码写入V中
插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起

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

<script src="js/vue.js"></script>
	<div id="app">
		<p>{{msg}}</p> 插值表达式
		<p v-text="msg">将M中的内容以文本格式写入V中
		<p v-html="msg">将M中内容以HTML的代码写入V中
	</div>
var vm=new Vue({
				el:"#app",
				data:{
					msg:  "<h2> hey,bro </h2>"
				}	
			});
		</script>

什么是MVVM模式，这样设计有什么优点？
1.视图标签往往是一个div,就是view即V
2.数据,数据是被用于展示在视图div之中,就是model即M
3.监视者,即由Vue创建出来的VM对象,他的作用是,监视数据和视图的变化,并将变化反应到另一方,即VM
4.这三者组合起来,叫做mvvm设计模式
优点：
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

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

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

可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

4.使用vue将下列data中cat的几条属性插入到页面之中

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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" v-bind:value="result">
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		
		data:{
			a:'',//第一个操作数
			b:'',//操作符
			c:'',//第二个操作数
			result:'',
		},
		methods:{
			//弱变量类型和强变量类型语言的差异在于,能否进行隐式类型装换
			calculate(){
				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);
				}
				if(this.c=="/"){
					this.result= parseInt(this.a)/parseInt(this.b);
				}
		
		}
}
		
		});
</script>
	</body>
</html

JacksonYee1

关注

0
点赞
踩
0

收藏

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

v-text和v-html和插值表达式的差别：v-text：将M中的内容以文本格式写入V中v-html:将M中内容以HTML的代码写入V中插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值<script src="js/vue.js"...
复制链接

扫一扫

DAY01

“相关推荐”对你有帮助么？