Vue2初步学习后的简单总结

 1.概念

        1.1 Vue是一个专注于视图层的前端开发框架 ，通过数据驱动和组件化的方式实现了高效的前端开发，vue是一个渐进式的框架，即可以通过文件引入的方式在普通页面中被引入使用，也可以基于webpack等构建系统，结合vue-router vuex 进行前后端分离的方式的项目开发，vue是当今企业当中使用比较多的开发框架，不仅是直接使用vue还衍生出了很多基于vue封装后的框架

        1.2 MVVM Model模型(后端会提供的数据接口) View视图(渲染到浏览器中的模板页面) ViewModel视图模型 (vue实现的模型和视图之间的双向绑定的功能) MVVM是一种设计思想 vue框架开发体现了MVVM思想的功能特点

        1.3 实双向数据绑定的实现

                1.3.1 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

                1.3.2 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更

                1.3.2 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

        1.4 组件(组件并不是vue的特色功能) 在代码开发过程中 将应用中的一些小型的、独立的 一般可复用的功能代码封装起来的一种方式

        1.5组件化开发 将整个应用 从应用的整体到应用的每个功能页面再到每个功能模块，全部都采用组件的方式进行开发

 2.基本语法

        2.1 模板语法

                2.1.1 文本绑定

                        1》{{表达式}}    {{msg}} {{baseurl+url}}  {{number>1}}   {{show?'1':'2'}}

                        2》v-html 可以将内容原生html的方式插入到标签当中  类似于innerHTML

                        3》v-text 将内容以文本的方式插入到标签当中

                        4》v-once 表示当前绑定的内容并不需要进行响应式的更新。

                        5》 v-pre 将模板语法双花括号{{}}识别为普通的html标签内容，不会被vue解析

                        6》 v-cloak 在模板内容被解析之前始终作为一个属性设置到标签上

                2.1.2 属性绑定

                        1》 v-bind:属性="表达式" /:属性="表达式" 就表示当前属性是需要按照js的语法进行解析的

                        2》 class绑定 :class="['a','b']" :class="{a:show}"  :class="['a',{b:show}]"

                        3》 style绑定  :style="{width:'100px',zIndex:1}"  :style="[{height:'100px'},{color:'red'}]"

                        4》 组件prop绑定 如果prop值是字符串类型并且要绑定的值就是字符串本身而不是变量 那么绑定这些prop的时候可以不加:   其他情况都需要通过:绑定

                        5》 在使用v-for、v-if/v-else... 可以绑定key属性以标识当前元素 key在一个列表或者一组判断中必须是独一无二的值

                        6》 在组件上绑定普通属性，会直接设置到组件的根元素身上，如果绑定的是类名或者行内样式会直接和根元素的类名和行内样式进行合并

        2.2列表和判断

                2.2.1 条件渲染

                        1》 v-show 根据绑定的值的真假来控制元素的显示与隐藏 通过设置行内样式display:none来控制元素隐藏的

                        2》 v-if 根据绑定的值的真假来控制元素的显示与隐藏  通过控制元素是否渲染来实现显示隐藏的效果。 可以配合v-else v-else-if实现双路、多路分支的效果

                        3》 如果有并列的一组元素要实现显示与隐藏的效果 可以通过template标签对这些并列元素进行包裹，最终生成的渲染结果当中是不会显示template，不会有多余的标签结构产生

                        4》 在使用条件渲染时可以通过key属性为多个元素设置唯一标识

                2.2.2 列表渲染

                        1》 v-for "item in arr" "(item,index) in arr" "key in obj" "(key,value,index) in obj"，第一个参数为值，第二个参数为下标，在遍历对象的时候有第三个参数，第一个参数为value值，第二个是key键，第三个为序号，类似下标

                        2》 在使用列表渲染时可以通过key属性为每个元素设置唯一标识， 提升dom更新时的效率

                        3》 如果有并列的一组元素要实现循环输出效果 可以通过template标签对这些并列元素进行包裹，最终生成的渲染结果当中是不会显示template，不会有多余的标签结构产生

                        4》 v-for 和v-if 同时出现一个标签上 ，v-for会优先执行

        2.3事件绑定

                2.3.1语法

                        1》 v-on:事件类型=""   @事件类型 this.$on

                        2》 methods名称  方法() 表达式| v-on:事件名称="方法名称"，v-on：事件名称="方法()"，v-on:事件名称="赋值表达式"

                        3》 事件处理程序中 this执向当前vue实例对象或者组件对象、

                        4》 方法名称的方式绑定 直接从函数的第一个参数接受事件对象，如果是以方法和表达式的方式接受 就在表达式内部通过 $event直接访问事件对象

                2.3.2修饰符

                        1》 .stop 阻止事件流的传播

                        2》 .prevent 阻止浏览器默认行为

                        3》 .self   让当前事件不会因为事件冒泡只能从自身触发

                        4》 .once    让某个事件只触发一次

                        5》 .capture 让当前事件触发捕获型事件流

                        6》 .passive  会告诉浏览器不想阻止事件的默认行为

        2.4 计算属性和侦听器

                2.4.1 computed 计算属性在页面中输出一些需要经过计算转换才能得到的数据以简化模板的编写 动态接受来自于组件外部的数据(父组件传递的prop、vuex中的state、getter)

                2.4.2 watch 侦听器就是vue提供给我们自己去监听某个值变化的一个窗口  我们可以在侦听函数中去执行自己想要执行的任意操作  如果要对于某个对象的属性进行监听 需要配置deep选项(深度监听)

        2.5 表单绑定

                1》 v-model 指令可以对于表单或者表单组件进行双向数据绑定 v-model 只是一个快速双向绑定的语法糖

                2》 普通的文本框和文本域 值就是要绑定的字符串

                3》 单个复选框  值就是一个布尔值

                4》 单选选项 值就是某个选项的value

                5》 多选的选项 值就是选中的选项的value组成的数组

                6》 修饰符  

                        6.1》 lazy 只在失去焦点时更新绑定值，

                        6.2》number 将绑定值转换为数值类型

                        6.3》trim 自动清除绑定值两端的空格

        2.6生命周期函数

                1》 beforeCreate 创建前 还未对data数据进行处理

                2》 created 创建后 完成对于data中数据的劫持 建立对于数据的监听

                3》 beforeMount 渲染前 读取了内容模板但是并没有对内容模板进行解析

                4》 mounted 渲染后 完成了内容的渲染 渲染后的内容已经进入到了网页当中

                5》 beforeUpdate 更新前 数据修改之后 页面更新之前

                6》 updated 更新后 数据修改之后 页面也完成更新渲染之后

                7》 beforeDestroy  销毁前 尝试去销毁某个实例前才会触发的函数 $destroy

                8》 destroyed 销毁后 调用方法将实例销毁后触发的函数

        2.7 重要补充

                1》 $refs 用于获取所有设置了ref属性的标签和组件

                2》 $nextTick vue数据变化引起的dom更新时异步执行 所以如果我们需要在dom更新之后去执行一些操作 就需要将操作放置到$nextTick的回调函数中

                3》 $set/$delete $set 向data中的属性值为对象的属性添加一个响应式的属性 $delete 删除data中属性值为对象的属性的属性并触发响应式的更新

                4》 Vue.directive  directive定义自定义指令

                5》 Vue.mixin   mixins定义混入对象

                6》 Vue.use  安装某个插件   Vue.use(ElementUI)

                7》 render函数 以编程的方式进行虚拟节点的插件 render(h){return h(标签名、组件配置对象、异步函数，属性对象，子节点)}

                8》 Vue.filter filters 定义过滤器  通过管道符运算符   |

 3.组件化

                3.1组件的创建

                        1》 Vue.component() 全局注册

                        2》 components 局部注册

                        3》 SFC 单文件组件的方式创建

                3.2 组件名

                        1》 连字符的方式 驼峰命名法都可以作为注册组件时的名称 在页面当中必须采用连字符的方式引入 单文件组件中是没有这个限制的

                        2》 组件名称用多个单词 组件如果是作为vue-router页面配置没有这个限制

                3.3组件的配置项和实例没有太大差别

                        1》组件没有挂载点 所以不需要el配置项

                        2》组件必须指定template或者render函数

                        3》 data选项必须是一个函数 需要保证组件被复用时data状态不会互相影响

                3.4 prop 组件的prop可以用来接受外部传入的属性

                        1》 props配置项可以是一个数组 ["a","b"]

                        2》 props配置项也可以是一个对象 {a:{type:String},b:{type:[String,Number],c:{required:true},d:{default:1}}}

                        3》 属性的名称可以是驼峰命名法或者连字符的方式定义 但是在模板当中传递的时候必须用连字符的方式

                        4》 单向数据流 props 是由父组件传递给子组件 父组件发生修改的时候子组件也会跟着修改 子组件不能直接修改父组件传递过来的属性

                3.5 $emit 子组件当中通过$emit 广播一个事件 在调用组件时可以进行监听 在监听函数就可以操作父组件的属性了

                        1》 在表单中组件通过props接受value 通过$emit 广播input事件 就可以在组件身上通过v-model来双向数据绑定

                        2》 在组件内部通过prop接受了某个属性 并且通过 $emit 广播了 update:属性名称  这样的事件，在组件身上就可以使用 .sync简化绑定语法

        3.6插槽

                3.6.1定义插槽

                        1》默认插槽   <slot></slot>

                        2》 具名插槽   <slot name="header"></slot>

                        3》 作用域插槽  <slot :attr=""></slot>

                        4》 后备内容 <slot>后备内容</slot>

                3.6.2 使用插槽

                        1》 默认插槽内容的传递 在组件标签中间写入 普通文本 标签 组件

                        2》 向指定的插槽传递内容 <template v-slot:插槽名称></template>   <template #插槽名称></template>

                        3》 使用插槽向外传递的数据   <template #插槽名称="自定义的变量名称"></template>   <template #插槽名称="{slot标签身上绑定的属性名}"></template>

        3.7动态组件

                1》 <component is="组件名"></component>

                2》 <keep-alive>动态组件</keep-alive> 在组件失活时保持自己内部的状态

        3.8组件间的通信

                1》 props 和$emit

                2》 $on $emit event hub实现兄弟组件间的通信

                3》 $root $parent $refs  上下级组件之间的访问

                4》 provide 和inject可以跨越多及组件进行通信

                5》 vuex