组件化

1. 组件:把页面中的UI模块拆分出来(header,footer,nav),把DOM放在组件中,组件可以重复调用,渲染到页面中,减少代码量

(1) 全局组件:在每一个vue实例化中都可以取使用

声明全局组件 Vue.component(‘组件名字’,{template:模板(HTML的内容,必须有一个唯一的根元素)})可以使用v-if进行判断显示,但是没有必要这样去实现,组件的命名不能使用驼峰命名规则,可以是用 - ,或者开头首字母大写的方式,目的是为了和普通HTML标签进行区分

data必须是一个函数:组件下的数据仓库data和实例化中的不同,必须是一个函数,并且带返回值,因此每个实例可以维护一份被返回对象的独立的拷贝,每一个调用的组件的data数据相互独立的,不会相互干扰

(2) 局部组件:局部组件只在对应的Vue实例化下生效,只在对应的DOM根元素下生效

New Vue({

el:’#app’,

components:{

‘组件名’:{template:`DOM内容`}

}

})

(3) 组件的的注意事项:组件在使用有标签嵌套规则时,被嵌套的组件不能够直接加载或会影响结构需要使用is绑定方式来加载组件,但是不推荐这样去使用 (vue下is的作用)

2. 单页面应用的优缺点

vue使用组件化开发加上路由(router)可以生成单页面应用

单页面应用优缺点

​ 优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

​ 缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化;第一次加载首页耗时相对长一些

3. 组件的props传值

props作用:当多次调用组件时,组件中有一些内容可能不太相同,可以使用props传值的形式把每一个组件需要用的不同的值传递给组件进行使用,相当于函数传参一样,可以提高组件的复用率

类似函数传入实参

在组件中接收props传值 props:[‘n’,‘name’] 类似于函数的形参

Props取名注意事项:不推荐使用 - 传入实际内容的位置使用横杠方式,在props接收要使用驼峰命名规则,也不推荐使用开头字母大写的方式,一般使用不同的命名方式 msg1 msg2

4. props动态传值:props可以传入任意多个值 :key=val key绑定在组件中的props属性, val是从父级中传递给子级的数据

<Mycomponent v-bind:num="num1"></Mycomponent>

5. props验证:props这在开发一个会被别人用到的组件时尤其有帮助,当公司中协同开发时,开发过之后的组件,别人需要使用,props验证可以为后续的使用人员带来便利,也弥补了js没有类型校验的缺点,props验证,如果传入的类型不同,会在控制台中抛出警告.props验证会消耗性能,在开发的时候需要,线上版本不需要,建议在上线前删除所有的props验证

 props:{   //需要验证的情况下,把数组改成对象

       num:Number,   //验证单个类型

      str:[String,Number],   //可以验证多个类型

      n:{

         type:Number,

        default:100   //没有传入的值,默认值自动会生效

        },

        name:{

          type:String,    //required 必须验证成字符串

          required:true    //普通的校验null undefined会校验通过

          }

        }

6. vue中key值的作用

vue的渲染元素是高效的,Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处,如果需要让两个模块相互独立可以加上唯一的key值 key会DOM元素加上唯一的标识,让viewModel(虚拟DOM)更好去区分DOM元素, 加上key在有的情况下可以提高虚拟DOM的性能

7. v-if和show

v-show:切换css,初始化渲染开销大(全部节点渲染),切换开销小,适宜使用在频繁切换的内容中

v-if:切换时把节点摧毁重建,初始化渲染开销小(条件为假的不渲染),切换开销大,适宜用在不频繁切换的内容中

8.Vue中两大核心:虚拟DOM，ViewModel组件系统