vue知识点之组件，插槽，数据劫持，事件发射，模块化

1.MVM:

​ m:model:数据模型，data[数据state]

​ v:view 视图，模板，template

​ 数据绑定？事件绑定

​ v-bind v-on {{}} 这些都是vm进行数据解析

​ vm viewModal(封装dom)

2.vue实例

​ 模块化，一切皆模块，一个模块是一个html/css/js的一个完整功能的单元，自定义标签，（vue能够识别自定义标签）

​ vue.状态

​ vue.方法

3.渲染

​ 将状态显示到视图中 model–>view

​ 绑定（渲染）

​ 1.双打括号

​ 可以存在任意变量或者表达式

​ {{msg}}

​ {{foo()}}

​ {{JSON.stringify(obj)}}

​ 2.指令

​ v-on:eventType.事件修饰符 = “事件处理函数” 简写为@

​ eventType:

​ dom类型，submit，hover

​ 自定义类型：事件的名字自己决定，常用于组件通信中

​ v-bind:属性名 = “属性值” 简写为：

​

​

​ v-for="" 用来遍历

​ v-if 存放布尔值

​ v-else-if

​ v-else

​ v-bind:model

​ v-model

​ 双向数据绑定

​ 1.将msg值作为input的默认值

​ 2.用户操作表单，v-moel会将表单元素中的值映射到msg中

​

​ v-html:将html代码输出并解析

4.生命周期

beforeCreated

Created

beforeMounted

mounted

beforeUpdate

Updated

beforeDestroy

destroyed

5.双向数据绑定

v-model,表单

6.事件

7.计算属性

计算属性不能传参

1.定义

像函数一样定义，但是无法接收参数

1）定义在computed中

data: {
                students: [{
                    id: 1,
                    name: "zs",
                    gender: "male"
                }, {
                    id: 2,
                    name: ls,
                    gender: "female"

                }, {
                    id: 3,
                    name: "ww",
                    gender: "female"
                }, {
                    id: 4,
                    name: "zq",
                    gender: "male"
                }, ]
            },
            computed: {
                students_male: function() {
                    // 计算属性来源于data中的变量
                    // 对data中数据进行计算后输出
                    return this.students.filters(item => {
                        return item.gender === 'female';
                    })
                }
            },

2.特性

1）多次调用同一个个计算属性，计算属性函数会执行一次

2）当被计算的属性发生变化，计算属性会重新执行

3.调用

就像属性一样被调用,不加括号

8.监听器

对data中的属性进行监听

1）定义

 data: {
                msg: "hello",
                params: {
                    name: "",
                    type: ""

                }
            },
            watch: {
                msg(newVal, oldValue) {
                    alert(newVal + '-' + oldValue);
                },
                // 对于对象的监测，进行深度监测
                // 'params.name': function(newVal, oldVal) {
                //     alert("JSON.stringify(newVal)+'-'+JSON.stringify(oldVal)");
                // },
                params: {
                    deep: true,
                    hansler: function(newVal, oldVal) {
                        alert(Json.stringify(newVal) + '-' + JSON.stringify(oldVal));
                    }
                }

            }

9.模块化

vue中模块时最小的组成单元

1.组件创建

vue参数的定义过程

组件的跟有且只有一个

 let boxContainer = {
            template: `
        <div class="box">
          <div class="header">
            <div class="title">
              {{title}}
            </div>  
            <div class="right">tab</div>  
          </div>  
          <div class="container">
            <slot></slot>
          </div>
        </div>
      `,
            // data中为主键内部的局部变量，只有该组件能用
            data() {
                return {

                }
            },
            // 接收别人传给你的数据
            props: {
                title: {
                    type: String,
                    required: true
                }
            }
        }

2.组件的注册

1）全局注册

Vue.component('briup-list',briuplist)

2）局部注册

将组件注册到某个组件的内部，只有该组件才能使用这个组件

let ArtclePage = {
	template:``,
	data(){
	return {
	
	}
	}
},
components:{
	'briup-list':briupList
}

3.参数传递

组件内部如何传递参数？

形参
let briupList = {
props:['data']
}
形参、类型限制
let briupList = {
props:{
data:Array
}
}
形参、类型限制、校验
let briupList = {
props:{
data:{
type:Array,
default:[],
validator:function(val){

}
}
}
}

如何传递参数？

参数传递实际上是属性的绑定

10.插槽

10.1简单插槽

不对该插槽进行赋值等操作，默认的

<article-Page>
	<div slot-scope="scope"></div>
</article-Page>
============
let articlePage = {
        template: `
            <div>
                <div class="header">
                    <slot></slot>  
                </div>
                
                    
            </div>
        
        `
    }


components:{
"article-Page":articlePage

}

10.2具名插槽

 component: article-page
          <div>
            <slot name="header"></slot>
            <slot></slot>
            <slot name="footer"></slot>
          </div>
          调用
          <article-page>
            <div slot="header"></div>
            <div></div>
            <div slot="footer"></div>
          </article-page>

10.3作用域插槽

​ 作用于插槽可以通过回调函数的思想来理解

<ul>
	 <li v-for="item in data">
         <slot v-bind:row="item">
         </slot>
	</li>

</ul>

component:article-page
<briup-list>//这个相当于回调函数的函数名

	<!--不一定为scope，可以自己写-->
	//相当于回调函数
	<div slot-scope="scope">
        <!--scope.row就相当于item-->
        {{scope.row.xxxx}}
     </div>
</briup-list>

​ 父组件调用子组件，子组件在执行过程中又返回调用父组件的内容【插槽】，在调用过程中通过v-bind为这个插槽传递参数。

​ 在父组件通过slot-scope="scope"中的scope来获取传递过来的参数，进行自定义渲染

11.事件发射

$emit 可以触发监控在当前组件上的指定事件

<!-- @close为自定义事件  每次操作子元素都能够通知父元素 -->
        <briup-info @close="close" msg="hello world"></briup-info>
        <briup-info @close="close" msg="你好"></briup-info>
<script>
 let briupInfo = {
                template: `
                <div :style="{
                    padding:'1em',
                    backgroundColor:'pink',
                    borderRadius:'5px',
                    marginBottom:'1em'
                }" ref="info">
                    {{msg}}
                    <div @click="closeHandler(msg)">关闭</div>
                </div>
            `,
                props: ['msg'],
                methods: {
                    closeHandler(msg) {
                        this.$refs.info.style.display = "none";
                        // 发射事件，把这个事件发送给父组件，子组件向父组件传递数据
                        this.$emit('close', msg);
                    }
                },
            }
            // 组件注册
        Vue.component("briup-info", briupInfo);

        new Vue({
            el: "#app",
            methods: {
                close(msg) {
                    alert("关闭了" + msg);
                }
            },
        })
</script>