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

資訊專欄INFORMATION COLUMN

Vue快速入門

stdying / 2405人閱讀

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

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

Message: {{ msg }}

這個將不會改變: {{ 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 塊中，我們擁有對父作用域?qū)傩缘耐耆L問權(quán)限。v-for 還支持一個可選的第二個參數(shù)為當前項的索引。
    
  
  • 
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  
    • 



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

結(jié)果：

v-for 通過一個對象的屬性來迭代。
  {{ index }}. {{ key }}: {{ value }}


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

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

可以添加一個新的 age 屬性到嵌套的 userProfile 對象：

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

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

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

// 定義一個組件， 使用這個混合對象
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. 添加實例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}
注冊組件

局部注冊組件

全局注冊組件

// a.vue


// myComponent.vue


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

// 動態(tài)props

// 雙向綁定

// 單次綁定

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

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

我是父組件的標題

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

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

我是父組件的標題

我是子組件的標題

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

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

具名插值

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

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

相關(guān)文章

  • vue.js快速入門

    摘要：但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內(nèi)精通某種東西，卻可以在一兩小時入門。不知道還要不要再來一個快速入門，發(fā)展得挺快，東西也像類似的全家。 以前看到多少天學習系列，我都深感煩躁，短短幾天怎么可以精通，那是對于他們而言。但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內(nèi)精通某種東西，卻可以在一兩小時入門。 回到vue本身...

    MkkHou 評論0 收藏0

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

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

    MoAir 評論0 收藏0

  • Vue.js快速入門

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

    KitorinZero 評論0 收藏0

  • vue.js快速入門

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

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<