day3作业

day3作业

<script type="text/javascript">
			var vm =new Vue({
				el: '#app',
				data:{
					array:[1,2,3,4,5,6,7],
					jishu:[],
				},
				methods:{
					jishu(){
						this.array.filter(item =>{
							return (item%2)!=0
						})
					},
				}
			})
				
		</script>

 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被调用了');
}
}
]);

var ay = ['asdf', 'qwsds', 'sdsd', 'diss'];
ay.filter(data => {
    return data.includes('sd') && data.length == 5;
});	

ay中为包含sd且长度大于5的数据

创建组件，激活组件，使用组件

var zujianTemp = {
				template: '#zujiantemp',
				props: ['zujianmsg', 'zujianmsg2'],
				data() {
					return {
						msg: '还行'
					};
				},
				methods: {
					zujianm() {
						alert(this.msg);
					}
					
				}
			}


激活

Vue.component('zujian1', zujianTemp);



组件中的data是作为方法存在的，需通过return方法进行单次读取
Vm中的data作为元素，以键值方式存储。

组件中的data和vm中的无法相互访问，若想访问需要再组件中加入props，并通过v-bind方法进行绑定才能访问vm中的data。