Vue快速入門

stdying 發布于2019-08-22 16:47 / 2404人閱讀

摘要：的目標是通過盡可能簡單的實現響應的數據綁定和組合的視圖組件。結果更改檢測現在是響應式的不是響應式的對于已經創建的實例，不能動態添加根級別的響應式屬性。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

vue單文件組件

模板數據綁定


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

Not A/B/C

Hello!

列表渲染


  
    {{ item.message }}
  


var example1 = new Vue({  
   el: "#example-1",  
   data: {   
      items: [      
         { message: "Foo" },      
         { message: "Bar" }    
       ]  
  }})

在 v-for 塊中，我們擁有對父作用域屬性的完全訪問權限。v-for 還支持一個可選的第二個參數為當前項的索引。


  
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  


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

結果：

v-for 通過一個對象的屬性來迭代。

  {{ index }}. {{ key }}: {{ value }}

new Vue({
  el: "#v-for-object",
  data: {
    object: {
      firstName: "John",
      lastName: "Doe",
      age: 30
    }
  }
})

建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。
結果：

更改檢測

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現在是響應式的
vm.b = 2
// `vm.b` 不是響應式的

對于已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。例如，對于：

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. 添加全局方法或屬性
  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);
// 創建根實例
new Vue({
   el: "#example"
})

Props


// 動態props

// 雙向綁定

// 單次綁定

Vue.component("child", {
  // 聲明 props
   props: ["msg"],
  // prop 可以在模板內
  // 可以用 `this.msg` 設置
  template: " {{msg}}"
})

slot

  我是子組件的標題
  
    只有在沒有要分發的內容時才會顯示。

// 父模板

我是父組件的標題

這是一些初始內容

這是更多的初始內容

// 渲染結果

我是父組件的標題

我是子組件的標題

這是一些初始內容

這是更多的初始內容

具名插值

GPU云服務器云服務器 vue入門教程前端快速入門云計算快速入門 css快速入門

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94658.html

vue.js快速入門

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

MkkHou 2019-08-20 10:45 評論0 收藏0
前端必須要珍藏的技術文章和面試題

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

MoAir 2019-08-26 10:29 評論0 收藏0
Vue.js快速入門

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

KitorinZero 2019-08-20 19:06 評論0 收藏0
vue.js快速入門

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

dantezhao 2019-08-20 13:46 評論0 收藏0