Web 中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用,页面就是有一个个类似这样的部分组成,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完善的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。
vue 中的组件是一个自定义标签形式,Vue.js的编译器为它添加特殊功能;
vue也可以扩展原生的html元素,封装可重用的代码。
可以在任何模版中使用,使用之前必须先注册
<custom-select></custom-select>
Vue.component("custom-select", {
template: `<section>
<section>
<section>
<input type="text" />
<input type="button" value="Go" />
<span></span>
</section>
<ul>
<li>111111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
</section>
</section> `,
});
通过使用组件实例选项注册,可以使组件仅在另一个指定实例/组件的作用域中可用
new Vue({
el: '#app',
//组件队列
components: {
//组件名称
"custom-select": {
template: `<section>
<section>
<section>
<input type="text" />
<input type="button" value="查询" />
<span></span>
</section>
<ul>
<li>111111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
</section>
</section>`
},
"test-dom": {
template: `<p>测试文字</p>`
}
}
});
也可以将组件对象抽离用一变量缓存出来,如下:
var Temp = {
template: `<section>
<section>
<section>
<input type="text" />
<input type="button" value="查询" />
<span></span>
</section>
<ul>
<li>111111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
</section>
</section>`
};
new Vue({
el: "#app",
components: {
// <custom-select> 将只在父模板可用
'custom-select': Child,
}
});
父组件要给自组件传递数据,子组件需要将它内部发生的事情告知给父组件。
组件中的数据必须是函数, 如果它们共用一个对象,在更改其中一个组件数据时,也会影响到其它的组件。
换做函数形式,每个组件都能够有自己独立的数据,从而不会影响到其它的组件,有点像解耦的概念。
传递情况 | |
---|---|
父组件 =>子组件 | 1. 在父级组件上使用自定义属性绑定数据; 2.使用props声明自定义属性名 |
子组件 =>父组件 | 1. 在父级组件上绑定自定义事件v-on监听自定义事件;2. 使用$emit()触发父组件所关心的自定义事件。 |
组件实例的作用域是孤立的,不能在子组件直接用父组件的数据。
可以在组件上使用自定义属性绑定数据,在组件中需要显式的用选项参数props声明自定义属性名。
需要用到自定义事件,父组件用$on监听自定义事件,使用$emit()触发父组件所关心的自定义事件。
<custom-select btn-value="查询" :list="list1"></custom-select>
<custom-select btn-value="搜索" :list="list2"> </custom-select>
// 父组件
Vue.component("custom-select", {
/*
!此处数据类型必须是一个函数形式,不能直接写对象。
每个组件都是相互独立的,如果它们共用一个对象,在更改一个组件数据的时候,会影响到其它
组件,如果是函数的话,每个组件就都有自己的独立数据,相互之间不会影响。
*/
data: function() {
return {
selectShow: false,
val: ""
};
},
props: ["btnValue", "list"],
template: `<section>
<section>
<section>
<input type="text" :value="val" @click="selectShow=!selectShow"/>
<input type="button" :value="btnValue" />
<span></span>
</section>
<custom-list v-show="selectShow" :list="list" @receive="changeValueHandle"></custom-list>
</section>
</section>`,
methods: {
changeValueHandle(value) {
this.val = value; //将选中的值赋给指定的input
this.selectShow = false; //隐藏下拉框
}
}
});
// 子组件
Vue.component("custom-list", {
props: ["list"],
template: `
<ul>
<li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
</ul>`,
methods: {
selectValueHandle(item) {
//在子组件中触发,需要一个自定义事件
// Key值 是父级的自定义事件
this.$emit("receive", item);
}
}
});
new Vue({
el: '#app',
data: function() {
return {
list1: ["北京", "上海", "广州", "深圳"],
list2: ["2017-2-25", "2017-2-26", "2017-2-27", "2017-2-28"],
};
}
});
通过使用is来扩展HTML标签功能可以解决。
<tabel>
<tr is="custom-select"></tr>
</tabel>
作者:我是白夜
链接:https://www.jianshu.com/p/e805baa1574e
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用
单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新,双向绑定就很容易联想到了,在单向绑定的基础,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定
设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题。看下面的例子:
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。但有一些是没有相对应的指令进行操作。在这里以progress(h5的新标签进度条)为例,向大家介绍Vue的一个用于指令扩展的方法:directive(自定义指令)。
混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。
在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助
我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下
vue引用js文件的多种方式,这里以为引入jquery为例。js引入文件方式包括: vue-cli webpack全局引入jquery、vue组件引用外部js的方法、单vue页面引用内部js方法
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。
Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!