`1、总结一下v-text和v-html和插值表达式的差别
v-text和v-html都写在标签属性里
v-text只能以文本方式显示
插值表达式则写在标签内容里,不会覆盖标签内容,将引用的数据显示在他的区域内
2、完成创建一个vue对象并和id是app的div进行绑定,然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
3、什么是MVVM模式,这样设计有什么优点
4、使用vue将下列data中cat记录显示插入到页面之中
var vm = {
el: '#app',
data: {
cat: {
name: '罗小黑',
age: 18,
desc: '是一只黑色的猫'
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<!--<div id="app">-->
<!-- <p v-color="color">经济数据</p>-->
<!--</div>-->
<!--<script>-->
<!-- Vue.directive("color",(el,{modifiers,value})=>{-->
<!-- value = value || '#ff0000';-->
<!-- el.style.color = value;-->
<!-- })-->
<!-- var vm=new Vue({-->
<!-- el:'#app',-->
<!-- msg:'变红'-->
<!-- })-->
<!--</script>-->
<div id="app">
<p>{{cat.name}}</p>
<p>{{cat.age}}</p>
<p>{{cat.desc}}</p>
</div>
<script>
<!--要求插入内容-->
var vm =new Vue({
el:'#app',
data:{
cat:{
name:'罗小黑',
age:18,
desc:'是一只黑色的猫'
}
}
})
</script>
</body>
</html>
5、使用vue,完成一个登陆校验功能。``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
用户名:<input type="text" v-model="name"><br>
密 码:<input type="text" v-model="password"><br>
<button @click="deng">登录</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: "",
password: ""
},
methods: {
deng() {
if (this.name == "hongs" || this.password == "123456") {
alert('登录成功!');
} else {
alert('请输入用户名或者密码');
}
}
}
})
</script>
</body>
</html>
Vue作业2019-9-20
- 说说几个常用的字符操作函数filter、some的差别
some方法返回的是boolean值,可用于检查数组中是否有某对象
filter方法返回的是一个新数组,可用于过滤数组中的对象
- indexOf和includes的差别
indexOf返回的是数值型的而includes返回的是布尔型的
数组中的indexOf不能判断数组中是否有NaN而includes可以
- 谈谈你对v-on的理解
可以监听dom事件,接收一个方法来调用js代码
@click="del(index)"
和@click="del("index")"
的差别是什么
del(“index”)"按下标顺序删除
-
下列代码六个函数的执行顺序是什么
<div onclick="m11();" @click.capture="m12()"> <div onclick="m21();" @click.capture="m22()"> <button onclick="m31();" @click="m32()">一个按钮</button> </div> </div>
m12() m22() m31() m32() m21() m11()
- 定义一个私有指令,使加载该指令的标签都拥有红色字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-color="color">经济数据</p>
</div>
<script>
Vue.directive("color",(el,{modifiers,value})=>{
value = value || '#ff0000';
el.style.color = value;
})
var vm=new Vue({
el:'#app',
msg:'变红'
})
</script>
</body>
</html>