vue入門

NotFound 發(fā)布于2019-08-20 19:02 / 2449人閱讀

摘要：基本信息是框架讀音，類似于是一套構(gòu)建用戶界面的漸進(jìn)式框架。我們現(xiàn)在可以進(jìn)一步為我們的組件實(shí)現(xiàn)更復(fù)雜的模板和邏輯的改進(jìn)，而不會(huì)影響到父單元。

基本信息

vue是mvvm框架  (model view viewmodel)    Vue.js（讀音 /vju?/，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。

model 視圖/模板
view 模型/數(shù)據(jù)
viewmodel 視圖模型
model與view通過(guò)viewModel之間相互檢測(cè)

起步

你可以在瀏覽器新標(biāo)簽頁(yè)中打開它，跟著例子學(xué)習(xí)一些基礎(chǔ)用法?；蛘吣阋部梢詣?chuàng)建一個(gè) .html 文件，然后通過(guò)如下方式引入 Vue：

//開發(fā)版本
//生產(chǎn)版本

聲明式渲染

Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM：

{{msg}} 
//輸出Hello Vue!

學(xué)習(xí)vue更多的是學(xué)習(xí)指令和組件

指令(directives)是帶有 v- 前綴的特殊屬性。

v-model 在input中

能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定

![
  {{ msg }}

v-if 條件

控制切換一個(gè)元素的顯示也相當(dāng)簡(jiǎn)單：


  現(xiàn)在你看到我了

var app= new Vue({
  el: "#app",
  data: {
    seen: true
  }
})  //輸出：現(xiàn)在你看到我了

v-for 循環(huán)

可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表：


  
    
      {{ todo.text }}
    
  

var app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "學(xué)習(xí) JavaScript" },
      { text: "學(xué)習(xí) Vue" },
      { text: "整個(gè)牛項(xiàng)目" }
    ]
  }
})

v-on 處理用戶輸入

為了讓用戶和你的應(yīng)用進(jìn)行互動(dòng)，我們可以用 v-on 指令綁定一個(gè)事件監(jiān)聽器，通過(guò)它調(diào)用我們 Vue 實(shí)例中定義的方法：


  {{ message }}
  

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("")
    }
  }
})

組件化應(yīng)用構(gòu)建

組件系統(tǒng)是 Vue 的另一個(gè)重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用。  
在 Vue 里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例，在 Vue 中注冊(cè)組件很簡(jiǎn)單：

// 定義名為 todo-item 的新組件
Vue.component("todo-item", {
  template: "這是個(gè)待辦項(xiàng)"
})

現(xiàn)在你可以用它構(gòu)建另一個(gè)組件模板：

但是這樣會(huì)為每個(gè)待辦項(xiàng)渲染同樣的文本，這看起來(lái)并不炫酷，我們應(yīng)該能將數(shù)據(jù)從父作用域傳到子組件。讓我們來(lái)修改一下組件的定義，使之能夠接受一個(gè)屬性：

Vue.component("todo-item", {
  // todo-item 組件現(xiàn)在接受一個(gè)
  // "prop"，類似于一個(gè)自定義屬性
  // 這個(gè)屬性名為 todo。
  props: ["todo"],
  template: "{{ todo.text }}"
})

現(xiàn)在，我們可以使用 v-bind 指令將 todo 傳到每一個(gè)重復(fù)的組件中：

這只是一個(gè)假設(shè)的例子，但是我們已經(jīng)設(shè)法將應(yīng)用分割成了兩個(gè)更小的單元，子單元通過(guò) props 接口實(shí)現(xiàn)了與父單元很好的解耦。我們現(xiàn)在可以進(jìn)一步為我們的 todo-item 組件實(shí)現(xiàn)更復(fù)雜的模板和邏輯的改進(jìn)，而不會(huì)影響到父單元。