星期四
1.总结一下v-text和v-html和插值表达式的差别
v-text写在标签属性中,会覆盖标签中其他内容,且只能将数据以文本方式显示。
v-html可以将数据以html数据以代码形式显示。
插值表达式写在标签内容中,不会覆盖标签中其他内容,而只是将其引用的数据显示在插值表达式占据的区域。
完成创建一个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>
<!--2.创建一个div,并设一个div-->
<div id="app">
<p>{{msg1}}</p>
<p v-text="msg2"></p>
<p v-html="html"></p>
<!--4.使用vm对象中的data-->
</div>
<!--1.导入vue-->
<script src="js/vue.js"></script>
<script>
//3.创建一个vue对象,并赋值给一个变量vm
//这里vm是有道理的。
var vm=new Vue({
el:'#app',//使用#app选择上面的一个div
data:{
msg1:'我是msg中的内容a',
msg2:'我是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中数据和M中数据始终保持一致。
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>v-bind</title>
</head>
<body>
<!--2.创建一个div,并设一个div-->
<div id="app">
姓名<input type="text" v-bind:value="name"><br>
年龄<input type="text" v-bind:value="age"><br>
类型<input type="text" v-bind:value="desc"><br>
<!--4.使用vm对象中的data-->
</div>
<!--1.导入vue-->
<script src="js/vue.js"></script>
<!--3.创建一个vue对象-->
<script>
var vm=new Vue({
el:'#app',
data:{
name: '罗小黑',
age: 18,
desc: '是一只黑色的猫'
},
methods:{
m1(){
alert(this.name);
alert(this.age);
alert(this.desc);
}
}
});
</script>
</body>
</html>
5.使用vue,完成一个登陆校验功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录校验</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
用户名:<input type="text" v-model="name"><br>
密 码:<input type="text" v-model="password"><br>
<button @click="lo">登录</button>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
name:"",
password:"",
},
methods:{
lo() {
if(this.name == "" || this.password == ""){
alert('请输入用户名或者密码');
}else{
alert('登录成功');
}
}
}
})
</script>
</body>
</html>
星期五
1. 说说几个常用的字符操作函数filter、some的差别
filter:创建一个新的数组,新数组中的元素是通过检查制定数组中符合条件的所有元素需要注意的是filter() 不会对空数组进行检测,也不会改变原始数组。
some:some方法用于检测元素是否满足制定条件,会依次执行数组中的每个元素,如果有个元素满足条件则会返回true,剩余元素不会再检测。如果没用满足条件的元素则返回false。
2.indexOf和includes的差别
1.看函数的返回值:indexOf返回的是数值型的而includes返回的是布尔型的
2.数组中的indexOf不能判断数组中是否有NaN而includes可以
3. 谈谈你对v-on的理解
1.事件监听可以使用 v-on 指令
2.v-on 可以接收一个定义的方法来调用
3.除了直接绑定到一个方法,也可以用内联 JavaScript 语句
4.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
4.@click="del(index)"
和@click="del("index")"
的差别是什么
@click="del(index)"删掉的是当前选中列,@click="del(“index”)"是按下标顺序删除
5.下列代码六个函数的执行顺序是什么
<div onclick="m11();" @click.capture="m12()">
<div onclick="m21();" @click.capture="m22()">
<button onclick="m31();" @click="m32()">一个按钮</button>
</div>
</div>
1.@click.capture=“m12()”
2.@click.capture=“m22()”
3.οnclick=“m31();”
4.@click=“m32()”
5.οnclick=“m21();”
6.οnclick=“m11();”
6.定义一个私有指令,使加载该指令的标签都拥有红色字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令-红色</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>???</p>
<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>