2019.11.6vue框架实训作业作业内容

62 阅读 0 评论 41 点赞

我是靠谱客的博主顺心耳机，最近开发中收集的这篇文章主要介绍2019.11.6vue框架实训作业作业内容，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2019.11.6vue框架实训作业

作业内容
- 作业1：js获取数组的奇数并加入到一个新数组
- 作业2：vue代码改错
- 作业3：vue代码执行结果及原因
- 作业4：创建组件的流程以代码
- 作业5：组件的data与vm的data的差别及原因

作业内容

1、目前我们有一个数组[1,2,3,4,5,6,7]，请使用js获取出所有的奇数并加入到一个新数组中，然后将新数组打印到控制台。
2、【改错】请指出下列代码有几处错误：

 var conponentTemp = {
template: '<h2>{{msg}}</h2>',
}
Vue.component('ZUJIAN', conpomentTemp);
var vm = new Vue([
el: '#app'
data: [
msg: 'vm中的msg'
]
methods() {
m1: function() {
alert('m1被调用了');
}
}
]);

3、下列代码的执行结果是什么，并说明为什么是这个执行结果。
var ay = [‘asdf’, ‘qwsds’, ‘sdsd’, ‘diss’];
ay.filter(data => {
return data.includes(‘sd’) && data.length == 5;
});

4、创建组件的流程是什么，请写个每个流程的代码。
5、组件的data和vm的data有什么差别，为什么会有这种差别。

作业1：js获取数组的奇数并加入到一个新数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<p>{{find()}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var num1= [];
var vm=new Vue({
el:'#app',
data:{
num:[1,2,3,4,5,6,7],
},
methods:{
find(){
return this.num.filter(item=>{
if(item%2!=0){
num1.push(item)
console.log(num1)
return true;
}
else
return null;
})
}
}
})
</script>
</body>
</html>

作业2：vue代码改错

1.将[ ] 改为 { }
2.methods后的（）去掉，改为冒号
3.msg不能直接调用

作业3：vue代码执行结果及原因

结果：页面显示qwsds
原因：返回的对象要包含字符’sd’，且长度为5，符合条件的只有‘qwsds’

作业4：创建组件的流程以代码

流程：
1、定义组件模板
2、将组件注册到Vue中

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div
id="app">
<zujian1></zujian1>
</div>
<script src="js/vue.js"></script>
<script>
var commonData = {
count: 0
};
/*1、定义组件模板*/
var zujianTemp = {
template: '<h2>count:{{count}}<button @click="count++">点我将count+1</button></h2>',
data() {
return commonData;
}
}
/*2、将组件注册到Vue中*/
Vue.component('zujian1', zujianTemp);
var vm = new Vue({
el: '#app',
data: {
gushi: '锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。'
}
});
</script>
</body>
</html>

作业5：组件的data与vm的data的差别及原因

差别：1.vm的data可以为一个对象，组件的data必须是一个方法，并且该方法必须返回一个对象
原因：创建组件时首先需要创建一个组件构造器，然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以，注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式。这是js本身的特性带来的，跟vue本身设计无关。