国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue快速入門

stdying / 2398人閱讀

摘要：的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。結(jié)果更改檢測(cè)現(xiàn)在是響應(yīng)式的不是響應(yīng)式的對(duì)于已經(jīng)創(chuàng)建的實(shí)例，不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。

Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
vue單文件組件
模板數(shù)據(jù)綁定 

Message: {{ msg }}

這個(gè)將不會(huì)改變: {{ msg }}










{{ number + 1 }}
{{ ok ? "YES" : "NO" }}
{{ message.split("").reverse().join("") }}





{{ message | capitalize }}




{{ message | capitalize }}
表單輸入綁定 


Message is: {{ message }}

更多參見：https://cn.vuejs.org/v2/guide...

computed 與 watch
樣式 class與style綁定

class

style
條件渲染 


 Yes 





  Now you see me




  Now you don"t


div v-if="type === "A"">
  A
B
C
Not A/B/C

Hello!

列表渲染 
    
  
  • 
    {{ item.message }}
  
    • 



var example1 = new Vue({  
   el: "#example-1",  
   data: {   
      items: [      
         { message: "Foo" },      
         { message: "Bar" }    
       ]  
  }})
在 v-for 塊中，我們擁有對(duì)父作用域?qū)傩缘耐耆L問(wèn)權(quán)限。v-for 還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。
    
  
  • 
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  
    • 



var example2 = new Vue({
  el: "#example-2",
  data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
})

結(jié)果：

v-for 通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代。
  {{ index }}. {{ key }}: {{ value }}


new Vue({
  el: "#v-for-object",
  data: {
    object: {
      firstName: "John",
      lastName: "Doe",
      age: 30
    }
  }
})
建議盡可能在使用 v-for 時(shí)提供 key，除非遍歷輸出的 DOM 內(nèi)容非常簡(jiǎn)單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升。
結(jié)果：

更改檢測(cè) 
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現(xiàn)在是響應(yīng)式的
vm.b = 2
// `vm.b` 不是響應(yīng)式的
對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。例如，對(duì)于：
var vm = new Vue({
  data: {
    userProfile: {
      name: "Anika"
    }
  }
})

可以添加一個(gè)新的 age 屬性到嵌套的 userProfile 對(duì)象：

Vue.set(vm.userProfile, "age", 27)

還可以使用 vm.$set 實(shí)例方法，它只是全局 Vue.set 的別名：

vm.$set(vm.userProfile, "age", 27)
事件綁定
Mixins 
// 定義一個(gè)混合對(duì)象
var myMixin = {
   created: function() {
      this.hello()
   },
   methods: {
      hello: function() {
         console.log("hello from mixin!")
      }
   }
}

// 定義一個(gè)組件， 使用這個(gè)混合對(duì)象
var Component = Vue.extend({
   mixins: [myMixin]
})
插件 

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或?qū)傩?  Vue.myGlobalMethod = function () {
    // 邏輯...
  }
  // 2. 添加全局資源
  Vue.directive("my-directive", {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })
  // 4. 添加實(shí)例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}
注冊(cè)組件

局部注冊(cè)組件

全局注冊(cè)組件

// a.vue


// myComponent.vue


// main.js
import MyComponent from ./myComponent""
// 全局注冊(cè)
Vue.component("my-component",  MyComponent);
// 創(chuàng)建根實(shí)例
new Vue({
   el: "#example"
})
Props 

// 動(dòng)態(tài)props

// 雙向綁定

// 單次綁定

Vue.component("child", {
  // 聲明 props
   props: ["msg"],
  // prop 可以在模板內(nèi)
  // 可以用 `this.msg` 設(shè)置
  template: " {{msg}}"
})
slot 
  
我是子組件的標(biāo)題

  
    只有在沒有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。
// 父模板

我是父組件的標(biāo)題

這是一些初始內(nèi)容

這是更多的初始內(nèi)容
// 渲染結(jié)果

我是父組件的標(biāo)題

我是子組件的標(biāo)題

這是一些初始內(nèi)容

這是更多的初始內(nèi)容

具名插值

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

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

相關(guān)文章

  • vue.js快速入門

    摘要：但是，今天我要寫一個(gè)快速入門，本人覺得還是有一點(diǎn)用處，因?yàn)椋也豢赡茉谝惶熘畠?nèi)精通某種東西，卻可以在一兩小時(shí)入門。不知道還要不要再來(lái)一個(gè)快速入門，發(fā)展得挺快，東西也像類似的全家。 以前看到多少天學(xué)習(xí)系列，我都深感煩躁，短短幾天怎么可以精通，那是對(duì)于他們而言。但是，今天我要寫一個(gè)快速入門，本人覺得還是有一點(diǎn)用處，因?yàn)椋也豢赡茉谝惶熘畠?nèi)精通某種東西，卻可以在一兩小時(shí)入門。 回到vue本身...

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

  • 前端必須要珍藏的技術(shù)文章和面試題

    摘要：前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問(wèn)題花點(diǎn)時(shí)間整理出一下前端工程師日常工作所需要的學(xué)習(xí)資料查找，幫助學(xué)習(xí)者快速掌握前端工程師開發(fā)的基本知識(shí)編程始于足下記住再牛逼的夢(mèng)想也抵不住傻逼似的堅(jiān)持蝴蝶 前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問(wèn)題花點(diǎn)時(shí)間整理出一下web前端工程師日常工作所需要的學(xué)習(xí)資料...

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

  • Vue.js快速入門

    摘要：今年以來(lái)，的文檔更新很快完善社區(qū)也日漸狀大，再加上于某廠你懂的大力的推廣，的前景十分光明。一般情況下，中小型的系統(tǒng)從遷移到版本大概只需要天的時(shí)間。快去動(dòng)手嘗試吧原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。 作者：曉飛（滬江Web前端開發(fā)工程師）本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處 Vue.js框架已經(jīng)火了好長(zhǎng)一段時(shí)間了，早在2015年的雙11中，淘寶的部分導(dǎo)購(gòu)業(yè)務(wù)——如：雙十一晚會(huì)搖...

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

  • vue.js快速入門

    摘要：的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，同時(shí)擁有非常容易上手的中英文都有提供快速入門準(zhǔn)備地址地址沒錯(cuò)就只需要這兩個(gè)就可以開發(fā)了是核心文件，在這里只是為了提高開發(fā)效率而引用的，是可選的。專門存儲(chǔ)一些數(shù)據(jù)的屬性，數(shù)據(jù)一定是對(duì)象格式。 **關(guān)于前陣子的文章錯(cuò)誤有點(diǎn)多所以從新修改了并添加了一些在官方腳手架vue-cli開發(fā)時(shí)需要注意的事項(xiàng)，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)。...

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

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

0條評(píng)論

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