vue入門

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

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

基本信息

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

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

起步

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

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

聲明式渲染

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

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

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

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

v-model 在input中

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

![
  {{ msg }}

v-if 條件

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


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

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

v-for 循環(huán)

可以綁定數(shù)組的數(shù)據(jù)來渲染一個項目列表：


  
    
      {{ todo.text }}
    
  

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

v-on 處理用戶輸入

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


  {{ 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 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。  
在 Vue 里，一個組件本質(zhì)上是一個擁有預(yù)定義選項的一個 Vue 實例，在 Vue 中注冊組件很簡單：

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

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

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

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

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

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