Angular directive&&Vue component

wh469012917 發布于2019-08-20 16:18 / 3220人閱讀

摘要：小小的分享，加一下經驗，大神請無視。也是組件，里面的用來傳遞數據綁定關系，實質其實就是用來進行父子組件之間的通信。

小小的分享，加一下經驗，大神請無視。
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結構以及他背后的通訊所帶來的數據了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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