成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular directive&&Vue component

wh469012917 / 3229人閱讀

摘要：小小的分享，加一下經(jīng)驗(yàn)，大神請(qǐng)無視。也是組件，里面的用來傳遞數(shù)據(jù)綁定關(guān)系，實(shí)質(zhì)其實(shí)就是用來進(jìn)行父子組件之間的通信。

小小的分享，加一下經(jīng)驗(yàn)，大神請(qǐng)無視。
directive 也是組件，里面的scope用來傳遞數(shù)據(jù)綁定關(guān)系，實(shí)質(zhì)其實(shí)就是用來進(jìn)行父子組件之間的通信。同樣的Vue的component也是一樣的，也是用來組件的，里面的通訊方式用了另一個(gè)名詞 props:實(shí)質(zhì)都是一樣的，這里我貼代碼大家看一下哦，
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()")

這里我們看到了 直接用自定義標(biāo)簽 在其屬性上面 進(jìn)行數(shù)據(jù)傳遞，首先html整個(gè)作用域?qū)儆赼ngularapp，所以傳遞時(shí)從本作用域到一個(gè)小的組件里去，自定義標(biāo)簽瀏覽器不識(shí)別，Angular 就會(huì)查詢本身的directive這個(gè)估計(jì)是個(gè)數(shù)組形式的一個(gè)空間看看哪個(gè)dierective的名字跟這個(gè)匹配 然后執(zhí)行directive就這樣，我們的自定義標(biāo)簽被識(shí)別出來了，然后把內(nèi)容注入到這個(gè)標(biāo)簽里面。

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"這里綁定了通訊 這里的組件是注冊(cè)在全局中，vue根作用域作為他的掛載點(diǎn)，這樣就相當(dāng)于他這個(gè)組件變得是最開放的公共組件，誰都可以調(diào)用這個(gè)組件，同樣的這個(gè)也是 瀏覽器識(shí)別不了這個(gè)標(biāo)簽，于是就遍歷整個(gè)vue的這個(gè)組件空間，看看誰的名字對(duì) 就執(zhí)行誰 然后呢 我們就看到了這dom結(jié)構(gòu)以及他背后的通訊所帶來的數(shù)據(jù)了

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82855.html

    相關(guān)文章

    • vue2模擬vue-element-admin手寫角色權(quán)限的實(shí)現(xiàn)

      　　權(quán)限　　路由權(quán)限　　靜態(tài)路由：固定的路由，沒有權(quán)限。如login頁面　　動(dòng)態(tài)路由：根據(jù)不同的角色，后端返回不同的路由接口。通過meta中的roles去做篩選　　store存儲(chǔ)路由　　3　　//地址：store/modules/permission　　import{routesasconstantRoutes}from'@/router' 　　 　　//根據(jù)meta.roles去...

      3403771864 評(píng)論0 收藏0

    • 匯總在vue中寫jsx的方式

      　　學(xué)習(xí)就是在不斷的總結(jié)，我們今天說的就是匯總在vue中寫jsx的方式。　　版本　　本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18；本文代碼github倉庫地址　　render函數(shù)　　render函數(shù)和vue中的template是互斥的，template最終是要編譯成virtual Dom的，但我們要知道render函數(shù)可以更直接構(gòu)建virtual Dom； virtual ...

      3403771864 評(píng)論0 收藏0

    • 從零開始構(gòu)建 Wijmo & Angular 2 小應(yīng)用

      摘要：中秋之際，團(tuán)隊(duì)發(fā)布正式版，當(dāng)天宣布支持。其實(shí)從開始，到之后版本和版本，一直緊隨其后?，F(xiàn)在就開始在中使用的第一個(gè)應(yīng)用吧。這些警告表示包里沒有，這些僅僅用于一些包信息。好了，現(xiàn)在的準(zhǔn)備工作已經(jīng)完成了，您可以開始創(chuàng)建的應(yīng)用了。 中秋之際，Angular 團(tuán)隊(duì)發(fā)布 Angular 2 正式版，Wijmo 當(dāng)天宣布支持 。其實(shí)從Angular Alpha開始，到之后 Beta版本 和 RC 版本...

      glumes 評(píng)論0 收藏0

    • vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片

      　　運(yùn)用vue可以實(shí)現(xiàn)圖片自動(dòng)循環(huán)滾動(dòng)，下面是效果展示（循環(huán)滾動(dòng)且可切換方向）：　　輪播組件BaseSwiper.vue：　　<template> 　　<divclass="swiperBox"> 　　<imgclass="imgLeft"@click="clickLeft"src="../../....

      3403771864 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    wh469012917

    男|高級(jí)講師

    TA的文章

    閱讀更多
    最新活動(dòng)
    閱讀需要支付1元查看
    <