第四章 Vue全局指令

Vue全局指令vm.$refVue全局指令ref主要有两种用法：1、ref加在普通的元素上，获取页面中所有含有ref属性的DOM元素。使用的时候用this.$refs.（ref值）获取到的是dom元素。<!--`vm.$refs.p`将会是DOM结点--><pref="p">hello</p>注意：如vm.$refs.hello，获取页面中含有属性ref=“hello”的DOM元素，如果有多个元素，那么只返回最后一个。2、ref加在子组件上，用this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（）就可以使用了。<!--`vm.$refs.child`将会是子组件实例--><child-componentref="child"></child-component>注意：ref需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用，或者在this.$nextTick(()=>{})中调用。Vue.useVue全局指令通过全局方法Vue.use()使用插件。它需要在你调用newVue()启动应用之前完成。//调用`MyPlugin.install(Vue)`Vue.use(MyPlugin)newVue({//...组件选项})Vue.use会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。Vue.js官方提供的一些插件(例如vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()。然而在像CommonJS这样的模块环境中，你应该始终显式地调用Vue.use()vm.$optionsVue全局指令vm.$options是用来获取data属性之外属性的方法。通过这种方式我们可以定义一些变量属性，避免污染全局。请视情况使用。 newVue({customOption:'foo',created:function(){console.log(this.$options.customOption)//=>'foo'}})Vue全局指令vm.$el获取Vue实例使用的根DOM元素。ABrender简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定它的简写叫h。createElementVue全局指令Vue.js利用createElement方法创建VNode。createElement方法实际上是对_createElement方法的封装，它允许传入的参数更加灵活，在处理这些参数后，调用真正创建VNode的函数_createElement。_createElement方法有5个参数，context表示VNode的上下文环境，它是Component类型；tag表示标签，它可以是一个字符串，也可以是一个Component；data表示VNode的数据，它是一个VNodeData类型，可以在flow/vnode.js中找到它的定义，这里先不展开说；children表示当前VNode的子节点，它是任意类型的，它接下来需要被规范为标准createElementVue全局指令

的VNode数组；normalizationType表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考render函数是编译生成的还是用户手写的。那么至此，我们大致了解了createElement创建VNode的过程，每个VNode有children，children每个元素也是一个VNode，这样就形成了一个VNodeTree，它很好的描述了我们的DOMTree。回到mountComponent函数的过程，我们已经知道