标签：周四 text ViewModel cat html msg data
1、总结一下v-text和v-html和插值表达式的差别
插值表达式：不会覆盖标签中其他内容，而只是将其引用的数据显示在插值表达式占据的区域
v-text：会覆盖标签中其他内容，且只能将数据以文本方式显示
v-html：会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。
2.完成创建一个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>
<div id="app">
<p>{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script src="vue/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:'<h2>msg</h2>',
},
})
</script>
</body>
</html>
3.什么是MVVM模式，这样设计有什么优点
MVVM是一个软件架构设计模式，是一种简化用户界面的事件驱动编程方式
1.低耦合。视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4.可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
4.使用vue将下列data中cat记录显示插入到页面之中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{cat.name}}</p>
<p>{{cat.age}}</p>
<p>{{cat.desc}}</p>
</div>
<script src="vue/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data: {
cat: {
name: '罗小黑',
age: 18,
desc: '是一只黑色的猫'
},
}
});
</script>
</body>
</html>
5、使用vue，完成一个登陆校验功能
密码:
标签：周四,text,ViewModel,cat,html,msg,data 来源： https://blog.csdn.net/Mocha_ice/article/details/101174204
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。