Angular directive&&Vue component

wh469012917 发布于2019-08-20 16:18 / 3207人阅读

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

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

 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 2022-09-25 22:04 评论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 2022-10-10 22:08 评论0 收藏0
从零开始构建 Wijmo &amp; Angular 2 小应用

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

glumes 2019-08-20 12:08 评论0 收藏0
vue实现循环滚动图片

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

3403771864 2022-09-12 20:17 评论0 收藏0