Vue.js基本語法的介紹

Jensen 發布于2019-08-21 10:48 / 2934人閱讀

摘要：當表達式的值發生變化時，響應應用特定的行為到。指的是否重復，對重復的進行服用循環中，表示數組第個元素表示對象的樣式綁定樣式也可以根據中的變量來動態確定。

介紹

前段時間接觸到一個庫叫做Vue.js, 個人感覺很棒，所以整理了一篇博文做個介紹。
Vue讀音/vju:/,和view類似。是一個數據驅動的web界面庫。Vue.js只聚焦于視圖層，可以很容易的和其他庫整合。代碼壓縮后只有24kb。
可以去這里下載。自己整理了一個Vue.js的demo，https://github.com/chenhao-ch/demo-vue

快速入門

以下代碼是Vue.js最簡單的例子，當 input 中的內容變化時，p 節點的內容會跟著變化。



  {{message}}

new Vue({
  el: "#demo",
  data: {
    message: "Hello Vue.js!"
  }
})

語法介紹 數據綁定

數據綁定就是指將js中的變量自動更新到html中。如下代碼, message的默認值是“Hello Vue.js!”, 那么當頁面啟動時，html中的默認值會被設置成“Hello Vue.js”



  {{message}}

new Vue({
  el: "#demo",
  data: {
    message: "Hello Vue.js!"
  }
})

如果要輸出原生的html，可以使用三個大括號來實現

{{{messageHtml}}}

也可以做表達式的綁定

{{length - 1}}
{{isShow ? "block" : "none"}}

過濾器

表達式后面可以添加過濾器，對輸出的數據進行過濾。

{{ message | capitalize }}

自定義過濾器

Vue.js運行自己定義過濾器。比如:

Vue.filter("wrap", function (value, begin, end) {
  return begin + value + end;
})


{{ message | wrap "before" "after" }}

指令

指令是特殊的帶有前綴 v- 的特性。當表達式的值發生變化時，響應應用特定的行為到DOM。

hello

bind , on 指令可以進行縮寫

自定義指令

Vue.directive("demo", {
  bind: function () {
    // 準備工作
    // 例如，添加事件處理器或只需要運行一次的高耗任務
  },
  update: function (newValue, oldValue) {
    // 值更新時的工作
    // 也會以初始值為參數調用一次
  },
  unbind: function () {
    // 清理工作
    // 例如，刪除 bind() 添加的事件監聽器
  }
})

html模板

Vue.js支持對js對象進行判斷(if), 循環(for)輸出。類似于前端模板。


Yes
No


Hello!




  
    {{ $index }} : {{ item.message }}

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

樣式綁定

樣式也可以根據js中的變量來動態確定。

事件綁定

可以使用 v-on 指令來監聽DOM事件。

new Vue({
  el: "#example-2",
  methods: {
    say: function (msg, event) {
      alert(msg);
      event.preventDefault();
    }
  }
})

常見的阻止冒泡，禁止默認行為等event方法可以通過修飾符來快速處理。

對特殊按鍵生效也可以使用修飾符

組件

組件系統是 Vue.js 另一個重要概念，因為它提供了一種抽象，讓我們可以用獨立可復用的小組件來構建大型應用。

注冊

通過Vue.extend()來定義一個組件，Vue.component()來注冊組件。

// 定義
var Tree = Vue.extend({
  template: "This is a tree!"
});
// 注冊
Vue.component("tree", Tree);
// 開始渲染
new Vue({
  el: "#box"
});

// 定義，注冊可以合并成一步。下面的代碼和上面一樣
Vue.component("tree", {
  template: "This is a tree!"
});
new Vue({
  el: "#box"
});

渲染結果為：


  This is a tree!

還可以進行局部注冊

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
  template: "...",
  components: {
    "my-component": Child
  }
})

props

props用于父組件向子組件傳遞數據。

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

動態props，當父組件的數據變化時，需要通知子組件跟著變化。

父子組件通信

當父組件數據變化時，可以通過props來通知子組件，子組件狀態變化時，可以利用事件的冒泡來通知父組件。
子組件可以用 this.$parent 訪問它的父組件。父組件有一個數組 this.$children，包含它所有的子元素。
例子：






  Messages: {{ messages | json }}

// 注冊子組件
// 將當前消息派發出去
Vue.component("child", {
  template: "#child-template",
  data: function () {
    return { msg: "hello" }
  },
  methods: {
    notify: function () {
      if (this.msg.trim()) {
        this.$dispatch("child-msg", this.msg)  // 觸發child-msg事件
        this.msg = ""
      }
    }
  }
})

// 啟動父組件
// 將收到消息時將事件推入一個數組
var parent = new Vue({
  el: "#events-example",
  data: {
    messages: []
  },
  // 在創建實例時 `events` 選項簡單地調用 `$on`
  events: {
    "child-msg": function (msg) {  // 監聽到 child-msg事件
      // 事件回調內的 `this` 自動綁定到注冊它的實例上
      this.messages.push(msg)  // messages改變自動修改html內容
    }
  }
})

上面這種寫法child-msg事件觸發后，會冒泡到父組件，并執行父組件的child-msg events。
但是上面的的執行流程不夠直觀，可以在html中通過指定on事件來實現event的監聽。下面是全部代碼：





  Messages: {{ messages | json }}

構建大型應用

在典型的 Vue.js 項目中，我們會把界面拆分為多個小組件，每個組件在同一地方封裝它的 CSS 樣式，模板和 JavaScript 定義，這么做比較好。如上所述，使用 Webpack 或 Browserify 以及合適的源碼轉換器，我們可以這樣寫組件：

當然也可以使用預處理器，

GPU云服務器云服務器 js基本語法 java基本語法 javascript基本語法 java基本語法學習

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

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

快速入門 - Vue2 Tutorials (一)

摘要：在這個組件里面有一些鏈接列表，和，這些列表直接使用編寫按照傳統的寫法，如果我們需要往里面添加鏈接的時候，每次我們都得添加和標簽。所以修改如下這樣我們就把數據和視圖分開了，模板里面的代碼也簡潔了很多，不再需要寫很多重復的代碼。 Vue 的官方文檔對 Vue 介紹非常詳細，但官方文檔使用在 HTML 中引入 vue 的方式進行講解，而實際項目中一般使用腳手架如 vue-cli 初始化項目...

djfml 2019-08-20 17:47 評論0 收藏0
Webpack 配置詳解（含 4）——關注細節

摘要：由于這種差異我們將對預處理器文件的配置封裝為函數，由參數生成對應配置，將文件放入文件內，將配置放在文件內。前言源代碼熟悉 webpack 與 webpack4 配置。 webpack4 相對于 3 的最主要的區別是所謂的零配置，但是為了滿足我們的項目需求還是要自己進行配置，不過我們可以使用一些 webpack 的預設值。同時 webpack 也拆成了兩部分，webpack 和 w...

jsbintask 2019-08-26 11:52 評論0 收藏0
Vue.js學習第一課

摘要：示例了解一門語言，或者學習一門新技術，編寫示例是我們的必經之路。分割線元素是否渲染在中，取決于前面使用的是還是指令。添加完對象后，重置對象刪一個數組元素 Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。 MVVM模式下...

sf_wangchong 2019-06-27 16:34 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

baoxl 2019-08-30 13:47 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

liukai90 2019-08-21 17:05 評論0 收藏0