VUE之组件

Posted 2020-11-23 yanjiayi098-001

昨日回顾

"""
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被选中
"""