diao____si的博客

1、一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype。2、有这个关系的原因：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

2、我们只需要写<school></school>，Vue解析是会帮我们创建school组件的实例对象，即Vue帮我们执行的：new Vuecomponent(options)1、school组件本质是一个名为Vuecomponent的构造函数，且不是程序员定义的。是Vue.extend生成的。3、特别注意：每次调用Vue.extend返回的都是一个全新的VueComponent！

2、第二种写法（CamelCase命名）:MySchool(需要Vue脚手架支持)1、组件名尽可能回避HTML中已有元素的名称，例如：h2、H2都不行。1、第一种写法（kebab-case命名）:my-school。2、可以使用name配置项指定组件在开发者工具中呈现的名字。1、第一种写法（首字母小写）：school。2、第二种写法（首字母大写）：School。第一种写法：<school></school>第二种写法：<school/>

使用vue.extend（options）创建，其中options和new Vue(options)时传入的哪个options几乎一样，但是略有却别：1、el不能写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器2、data必须写成函数，因为可以避免组件被复用时，数据存在引用关系备注：使用template可以配置组件结构。

常见的生命周期钩子：mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 beforeDestroy：清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】关于销毁vue实例：销毁后借助vue开发者工具看不到任何信息 销毁后自定义事件会失效，但原生DOM事件依然有效 一般不会再beforeDestroy操作数据，因为即使操作数据也不会触发更新流程

实例：mouted：当vue完成模板解析并把真实的DOM元素放入页面后调用mounted。

定义语法：局部指令：new vue({ directives:{指令名：配置对象}}) 或 new vue({ directive(){} })全局指令：vue.directive(指令名：回调函数)或 vue.directive(指令名，回调函数)配置对象中常用的三个回调：bind：指令与元素成功绑定时调用inserted：指令所在元素被插入页面时调用update：指令所在模板结构被重新解析时调用备注：指令定义时不加v-，但使用时要加。

1、注册过滤器：Vue.filter(name ,function(){})（全局过滤器）或new vue{filters:{}}2、使用过滤器：{{ xxx | 过滤器名}或者v-bind：属性 = “xxx | 过滤器名”定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）2、并没有改变原本的数据，是产生新的对应数据。1、过滤器也可以接受额外参数，多个过滤器也可以串联。

若<input type = "text" />，则v-model收集的是value值，用户输入的就是value值。若<input type = "radio" />,则v-model收集的是value值，若<input type = "checkbox" />number：输入字符串转为有效数字。lazy：失去焦点再收集数据。trim：输入收尾空格过滤。

实例代码只是简单的模拟了一下vue中的监测数据，vue的功能更加的完善。例如图中代码无法对对象中的对象进行操作，但是vue通过递归无论多少层都可以操作。2、vue.set() 可以为除了vm实例或者data之外的对象添加实例，就是只能在为data中的某一个对象内部添加对象。

在使用计算属性和filter函数的基础知识再调用sort对内容进行排序，注意sort中前一个减后一个是升，后一个减前一个是降。

注意箭头函数的使用，因为filter不是属于vue的函数，所以需要用箭头函数的形式调用。若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。如果不存在对数据的逆序添加等破坏顺序的操作使用inde作为key没有问题。最好使用每条数据的唯一标识作为key，比如id、手机号。若虚拟DOM中内容没变，直接使用之前的真实DOM。旧虚拟DOM中找到了与新虚拟DOM相同的key。开发中如何选择key？

v-for指令：

v-else-if=“表达式”v-if=“表达式”

两个重要的小原则

简单的事件（单行为）可以直接写在标签里的事件定义处，多行为的事件触发最好还是卸载methonds中。2、使用watch时根据数据的具体结构，决定是否采用深度监视。备注：1、vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以。1、vue中的watch默认不监视对象内部值的改变（一层）1、当被监视的属性变化时，回调函数自动调用，进行相关操作。2、配置deep：true可以监测对象内部值变化（多层）（2）通过vm.&watch监视。2、监视的属性必须存在，才能进行监视。

引例：1、表达式尽量简单，所以使用函数调用完成拼接。2、需要注意的是，方法里的this指向的就是bue实例本身，所以可以直接调用姓名，就像java中的this一样。3、只要data中的值发生改变，vue就会重新解析模板。

键盘事件vue中常见的按键别名： 回车：enter 删除：delete 退出：esc 空格：space 换行：tab 上、下、左、右：up、down、left、right vue未提供别名的按键，可以使用按键原始的key值去绑定，但是注意要转为kebab-case（短横线命名） 系统修饰键（用法特殊）：ctr

通过Objectdefineproperty()把data对象中所有属性添加到vm上，然后为每一个添加的属性制定一个hetter和setter。在getter/setter内部操作（读/写）data中对应的属性。

对应data数据对应模板对应vue实例对象。

2、容器中双括号内{{xxx}}必须存放一个js表达式，里面的xxx可以自动读取到date中的所有属性，在此基础上你可以使用js的一些方法，比如xxx.toUpperCase()；1、容器与vue实例之间必须是一一对应的关系，当我们需要处理一个容器中的uoge对象时会需要用到组件。：它包含了js表达式，它的范围就不仅仅局限于可以生成值的语句，一个条件判断语句同样可以成为js代码。通俗来说，就是一个可以得到结果的语句。：v-model（全称：v-model:value），数据和页面值可以相互影响，