Day11-Vue的基础入门
- 1.总结一下v-text和v-html和插值表达式的差别
- 插值表达式和v-text不能够解析html标签,v-html能够解析html标签
- 2、完成创建一个vue对象并和id是app的div进行绑定,然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
<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: "Hello word",
}
})
</script>
- 3、什么是MVVM模式,这样设计有什么优点
- MVVM是Model-View-ViewModel的简写
它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
优点是:低耦合、可重用性、独立开发、可测试
- 4、使用vue将下列data中cat记录显示插入到页面之中
var vm = {
el: '#app',
data: {
cat: {
name: '罗小黑',
age: 18,
desc: '是一只黑色的猫'
}
<div id="app">
<p>{{cat}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
cat: {
name: '罗小黑',
age: 18,
desc: '是一只黑色的猫'
}
}
})
</script>
<style>
body {
font-family: "Microsoft YaHei";
}
#login {
width: 30%;
background: url(http://hbimg.b0.upaiyun.com/daac8789261feeee2590d3b31a259a1fbf17ed196a4dc-24Ih03_fw658);
margin-top: 250px;
background-position:-150px -70px;
border: 1px solid #f5f5f5;
}
#login form {
padding-top: 25px;
padding-bottom: 25px;
}
.text-center h1 {
color: #FFFFFF;
}
</style>
<body>
<div id="login" class="center-block">
<div class="text-center">
<h1>VUE登录界面</h1>
</div>
<form style="width: 300px" action="#" class="center-block">
<div class="form-group">
<label rel="username">账号:</label><input type="text" class="form-control" v-model="username">
</div>
<div class="form-group">
<label rel="password">密码:</label><input type="password" class="form-control" v-model="password">
</div>
<div class="row">
<input style="width: 80px" type="submit" value="登录" class="btn btn-primary col-md-6 col-md-push-4" @click="login">
</div>
</form>
</div>
<script>
var vm = new Vue({
el:'#login',
data:{
user1:'vue123',
pas1:'123456',
username:'',
password:''
},
methods:{
login(){
if (this.username == this.user1 && this.password == this.pas1) {
alert("欢迎你回来!");
} else {
alert(this.user1+" "+this.pas1);
}
}
}
})
</script>
</body>