1.总结一下v-text和v-html和插值表达式的差别
v-text只能将数据以文本方式显示,而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 src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'Hello World.',
}
});
</script>
3.什么是MVVM模式,这样设计有什么优点
M表示存储数据的对象,VM表示一个中间者,V就是我们的html代码。
优点有方便测试、便于代码的移植、兼容MVC。
4.使用vue将下列data中cat记录显示插入到页面之中
<div id="app">
<p v-text="cat.name"></p >
<p v-text="cat.age"></p >
<p v-text="cat.desc"></p >
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name1:123,
cat: {
name: '罗小黑',
age: 18,
desc: '是一只黑色的猫',
}
}
})
</script>
5、使用vue,完成一个登陆校验功能
<div id="app">
<button @click="dengru">点击</button>
<input type="text" id="zhanghao">
<input type="text" id="mima">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
dengru() {
var id = document.getElementById("zhanghao").value
var password = document.getElementById("mima").value
if (id == 123 & password == 123) {
alert("正确")
} else {
alert("帐号或密码错误")
}
}
}
})
</script>