脚本宝典收集整理的这篇文章主要介绍了Vue学习记录（二），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

Vue学习记录（二）

组件

1.组件介绍：

组件(component)可以扩展HTML元素，封装可重用的代码。所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象(除了一些根级特有的选项)并提供相同的生命周期钩子。

2.组件使用：

(1) 全局注册：

1) 创建一个vue实例：

new Vue({   el: '#example' })

2) 注册一个全局组件：

Vue.COMponent('my-component', {   template: '<div>Hello World!</div>' })

3) 注册后的组件，便可作为自定义元素在一个实例的模板中使用(注意确保在初始化根实例之前注册组件)：

<div id="example">   <;my-component></my-component> </div>

以上三步效果即相当于：

<div id="example">   <div>Hello World!</div> </div>

(2) 局部注册: 通过某个Vue实例/组件的实例选项components注册仅在其作用域中可用的组件，这种封装也适用于其它可注册的Vue功能，比如指令：

VAR Child = {   template: '<div>Hello World!</div>' } new Vue({   components: {     'my-component': Child   } })

(3) DOM 模板解析注意事项：
Vue只有在浏览器解析、规范化模板之后才能获取其内容。像<ul>、<ol>、<table>、<select>这样的元素里允许包含的元素有一定的限制，而另一些像<option>这样的元素只能出现在某些特定元素的内部，这样的情况下自定义组件会导致错误的渲染效果，一般的解决方法是使用is特性，比如：

<table>   <tr is="my-row"></tr> </table>

注意，如果使用来自以下来源之一的字符串模板，则没有此限制：

1) <script tyPE="text/x-template"> 2) JavaScript 内联模板字符串 3) .vue 组件 综上，应尽可能使用字符串模板。

(4) data 必须是函数：

<div id="example">   <my-component></my-component> </div> var data = { count: 0 } Vue.component('my-component', {   template: '<button v-on:click="count+= 1">{{ count}}</button>',   data: function () {     return data   } })

(5) 组件组合：
通过一个良好定义的接口来尽可能将父子组件解耦是很重要的，这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。在Vue中，父子组件的关系可以总结为PRop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。

3.过滤器：
Vue.js允许自定义过滤器，用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在JavaScript 表达式的尾部，由“管道”符号指示，例如：

<!-- 在双花括号中 --> {{ message | capITalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="divId | capitalize "></div> <!-- 在一个组件的选项中定义本地的过滤器 --> filters: {   capitalize: function (value) {     if (!value) return ''     value = value.toString()     return value.charAt(0).toUpperCase() + value.slice(1)   } }

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的Vue学习记录（二）全部内容，希望文章能够帮你解决Vue学习记录（二）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。