VUE之组件

昨日回顾

"""
1、v-model完成表单指令,简单的控制value,单选框中的使用,单独复选框的使用以及复选框中的使用
	<input type="password" v-model="控制value的变量" />

2、了解:斗篷指令解决页面闪烁
	v-cloak =>  [v-cloak] {display:none} => 加载vue就会清除v-cloak属性

3、条件指令v-if与v-show区别,v-if家族成员以及上分支会成立会屏蔽下分支的工作机制
	v-if不渲染隐藏 | v-show以display:none渲染隐藏
	v-if | v-else-if | v-else

4、循环指令v-for如何循环渲染字符串、数组、字典,以及需要嵌套循环渲染赋值结构
	v-for="v in str"  v-for="(v,i) in str"
	v-for="v in arr"  v-for="(v,i) in arr"
	v-for="v in dic"  v-for="(v,k) in dic"  v-for="(v,k,i) in dic"
	[{},{}] {a:[]} [str1,str2]

5、了解:delimiters实例成员解决插值表达式符号冲突
	delimiters: ['{{', '}}']

6、计算属性(方法属性)在computed中声明,方法内部变量会被监听,值来源于方法返回值
	computed: {
		methodAttr() {
			// 内部出现的变量都会被监听,发生值更新会回调该方法
			return '方法属性的值'
		}
	}
	
7、监听watch可以设置数据的监听方法,在监听属性更新时,完成特定逻辑
	watch: {
		attr() {
			// attr属性被监听,发生值更新会回调该方法
		}
	}
	
8、重点:组件的概念,组件就是vue实例(对象)
	<div id="app">
		<tag />
		<tag />
	</div>
	
	let tag = {
		template: '<p>子组件</p>'
	}
	
	new Vue({
		el: '#app',
		components: {
			tag,
		}
	})

"""

重点

子组件
let tag = {
    template: `...`,
    data() {
        return {
           	// 数据...
        }
    }
}
// 在哪个组件模板中出现的属性变量和方法变量,都由当前所属组件自己提供
父传子
<div id="app">
	<tag :sub_msg="msg" />
</div>
    
<script>
let tag = {
    props: ['sub_msg']   //属性的反射机制
    template: `<div>{{ sub_msg }}</div>`,
}

new Vue({
    el: '#app',
    components: {
        tag,
    },
    data: {
        msg: '父级数据'
    }
})
</script>  

子传父(了解)
<div id="app">
    <h1> {{ title }} </h1>
    <!-- 组件标签不能添加系统事件,只能添加自定义事件,自定义事件在组件内部通过$emit主动触发 -->
    <tag @self_action="changeTitle"/>
</div>
    
<script>
	let tag = {
        template: `
        <div>
            <input v-model="sub_title" />
        </div>
        `,
        data() {
            return {
                sub_title: ''
            }
        },
        watch: {
            // 监听sub_title属性,值一改变就会触发
            sub_title() {
                // 将sub_title与父级的title建立关联
                // 激活(触发)self_action自定义事件
                this.$emit('self_action', this.sub_title)
            }
        }
    };

    new Vue({
        el: '#app',
        components: {
            tag,
        },
        data: {
            title: '父级初始标题'
        },
        methods: {
            changeTitle(sub_title) {
                this.title = sub_title ? sub_title : '父级初始标题';
            }
        }
    })
</script>  

知识点总结

"""
1、可以用来复用的子组件,数据data需要做局部化处理,当组件被复用时,数据会相互独立
2、将父组件的数据传递给子组件,在渲染子组件标签时,给自定义属性设置父级数据,在子级内部用自定义属性拿父级数据
3、将子组件的数据传递给父组件,子组件需要主动触发$emit自定义事件携带出数据,父级实现自定义事件方法,就可以接收到子级数据
4、搭建vue环境需要依赖node环境,以及用npm包管理器安装vue脚手架cli(npm可以换源为cnpm)
5、通过 vue create 项目 来创建前台项目,选择配置好项目所需的依赖
6、用pycharm来配置vue项目启动
7、属性vue项目目录结构,以及基本的各种原理:项目入口从main.js开始
"""

作业

"""
1、按照上方 知识点总结 模块,总结今天所学知识点;
2、有以下广告数据(实际数据命名可以略做调整)
ad_data = {
	tv: [
		{img: 'img/tv/001.png', title: 'tv1'},
		{img: 'img/tv/002.png', title: 'tv2'},
		{img: 'img/tv/003.png', title: 'tv3'},
		{img: 'img/tv/004.png', title: 'tv4'},
	],
	phone: [
		{img: 'img/phone/001.png', title: 'phone1'},
		{img: 'img/phone/002.png', title: 'phone2'},
		{img: 'img/phone/003.png', title: 'phone3'},
		{img: 'img/phone/004.png', title: 'phone4'},
	]
}

i) 有两个大标题,电视和手机,点击对应的标题,渲染对应的数据
ii) 一个字典作为一个显示单位,定义一个子组件进行渲染(涉及父子组件传参)

3、在第2题基础上,页面最下方有一个 h2 标签,用来渲染用户当前选择的广告(点击哪个广告就是选中哪个广告)
i)当没有点击任何广告,h2 标签显示:未选中任何广告
ii)当点击其中一个广告,如tv1,h2 标签显示:tv1被选中
"""
posted @ 2019-11-14 08:31  JIAYIYAN  阅读(173)  评论(0编辑  收藏  举报