资讯专栏INFORMATION COLUMN

Angular directive&&Vue component

wh469012917 / 3195人阅读

摘要:小小的分享,加一下经验,大神请无视。也是组件,里面的用来传递数据绑定关系,实质其实就是用来进行父子组件之间的通信。

小小的分享,加一下经验,大神请无视。
directive 也是组件,里面的scope用来传递数据绑定关系,实质其实就是用来进行父子组件之间的通信。同样的Vue的component也是一样的,也是用来组件的,里面的通讯方式用了另一个名词 props:实质都是一样的,这里我贴代码大家看一下哦,
Angular directive

js

 angular.module("angularapp")
 .directive("dateSelect", function() {
return {
                restrict: "E",
                templateUrl: "date-select.html",
                scope: {
                    times: "=",
                    query: "&"
                },

html

 date-select(times="time",query="query()")

这里我们看到了 直接用自定义标签 在其属性上面 进行数据传递,首先html整个作用域属于angularapp,所以传递时从本作用域到一个小的组件里去,自定义标签浏览器不识别,Angular 就会查询本身的directive这个估计是个数组形式的一个空间看看哪个dierective的名字跟这个匹配 然后执行directive就这样,我们的自定义标签被识别出来了,然后把内容注入到这个标签里面。

Vue
js

Vue.component("todo-item", {
  props: ["todo"],
  template: "
  • {{ todo.text }}
  • " }) var app7 = new Vue({ el: "#app-7", data: { groceryList: [ { text: "蔬菜" }, { text: "奶酪" }, { text: "随便其他什么人吃的东西" } ] } })

    html

    v-bind:todo="item"这里绑定了通讯 这里的组件是注册在全局中,vue根作用域作为他的挂载点,这样就相当于他这个组件变得是最开放的公共组件,谁都可以调用这个组件,同样的这个也是 浏览器识别不了这个标签,于是就遍历整个vue的这个组件空间,看看谁的名字对 就执行谁 然后呢 我们就看到了这dom结构以及他背后的通讯所带来的数据了

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/82855.html

    相关文章

    • vue2模拟vue-element-admin手写角色权限的实现

        权限  路由权限  静态路由:固定的路由,没有权限。如login页面  动态路由:根据不同的角色,后端返回不同的路由接口。通过meta中的roles去做筛选  store存储路由  3  //地址:store/modules/permission  import{routesasconstantRoutes}from'@/router'      //根据meta.roles去...

      3403771864 评论0 收藏0
    • 汇总在vue中写jsx的方式

        学习就是在不断的总结,我们今天说的就是汇总在vue中写jsx的方式。  版本  本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18;本文代码github仓库地址  render函数  render函数和vue中的template是互斥的,template最终是要编译成virtual Dom的,但我们要知道render函数可以更直接构建virtual Dom; virtual ...

      3403771864 评论0 收藏0
    • 从零开始构建 Wijmo & Angular 2 小应用

      摘要:中秋之际,团队发布正式版,当天宣布支持。其实从开始,到之后版本和版本,一直紧随其后。现在就开始在中使用的第一个应用吧。这些警告表示包里没有,这些仅仅用于一些包信息。好了,现在的准备工作已经完成了,您可以开始创建的应用了。 中秋之际,Angular 团队发布 Angular 2 正式版,Wijmo 当天宣布支持 。其实从Angular Alpha开始,到之后 Beta版本 和 RC 版本...

      glumes 评论0 收藏0
    • vue实现循环滚动图片

        运用vue可以实现图片自动循环滚动,下面是效果展示(循环滚动且可切换方向):  轮播组件BaseSwiper.vue:  <template>   <divclass="swiperBox">   <imgclass="imgLeft"@click="clickLeft"src="../../....

      3403771864 评论0 收藏0

    发表评论

    0条评论

    wh469012917

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <