1、总结一下v-text和v-html和插值表达式的差别
v-text写在标签属性中，会覆盖标签中其他内容，和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>
</head>
<body>
<div id="app">
<!--1、插值表达式-->
<p>{{msg}}</p>
<!--2、v-text-->
<p v-text="msg"></p>
<!--3、v-html-->
<span v-html="html"></span>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '心里美滋滋啊',
html:'<h2>哈哈哈哈</h2>'
}
})
</script>
</body>
</html>
3、什么是MVVM模式，这样设计有什么优点
M表示存储数据的对象，VM表示一个中间者，V就是我们的html代码，我们要将M中的数据呈现在V中，引入了一个VM对象，V要显示数据，会找VM要，VM会从M中取到数据给V，如果V要改数据，也是通过调用VM，VM去真正改变M中的数据。我们初始化V的时候就会去取数据，所以最终的效果就是，V中数据和M中数据始终保持一致。
4、使用vue将下列data中cat记录显示插入到页面之中
<script src="js/vue.js"></script>
<script>
var vm =new Vue ({
el: '#app',
data: {
cat: {
name: '罗小黑',
age: 18,
desc: '是一只黑色的猫'
}
}
})
</script>
5、使用vue，完成一个登陆校验功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>用户名:</div>
<input type="text" v-model="name">
<div>密码:</div>
<input type="password" v-model="password">
<div>
<button type="button" @click="login()">登录</button>
<button type="button" @click="reg()">注册</button>
</div>
</div>
<script src="js/vue.js"></script>
<script>
export default {
name: "login",
data() {
return {
isReg: false,
name: "沸烊烊",
password: "123",
repeat: ""
};
},
methods: {
login() {
//验证姓名和密码是否与locastorage一致
if (
localStorage.getItem("name") === this.name &&
localStorage.getItem("password") === this.password
) {
//清空输入框
this.name = "";
this.password = "";
// this.$router.push("/home/list");
alert("登陆成功")
}else{
alert('用户名或密码不正确');
}
},
reg() {
this.isReg = true;
},
cancel() {
this.isReg = false;
},
}
};
</script>
</body>
</html>
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
