首頁 >web前端 >js教程 >vue生命週期、vue實例、模板語法

vue生命週期、vue實例、模板語法

php中世界最好的语言原創: 2018-03-10 10:19:241930瀏覽

這次帶給大家vue生命週期、vue實例、模板語法，使用vue生命週期、vue實例、模板語法的注意事項有哪些，以下就是實戰案例，一起來看一下。

vue從出生到現在，從一個默默小眾型的框架發展成為現在國內的三大框架之一，也從最初的版本到現在的2.5.13(穩定版截止2018.1.26日2014到2018)。

正題

Vue.js是當下很火的一個JavaScript MVVM函式庫，它是以資料驅動和元件化的想法建構的。相較於Angular.js，Vue.js提供了更簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。

由於前面部落格裡面我介紹了vue的安裝還有關於webpack的基本配置，那這篇文章我問就說介紹vue、以及vue的使用。

如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它透過一些特殊的HTML語法，將DOM和資料綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。

當然了，使用Vue.js時，你也可以結合其他函式庫一起使用，例如jQuery。

如果您覺得這篇內容不錯，請點個贊，後續我會把demo傳到github上，覺得可以請點贊，謝謝。

乾貨

如果你想學vue請具備 HTML、CSS 和 JavaScript 的中階知識。
如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來！之前有其它框架的使用經驗會有幫助，但這不是必要的。 (官網原話)。

1、第一步、vue生命週期表

學好vue生命週期表是絕對要看懂的

將官網生命週期圖示進行註解，以加深印象與理解(來源網路圖附上位址)

2、vue實例

每個Vue 應用程式都是透過用Vue 函數建立新的Vue 實例開始的：

var vm = new Vue({
  // 选项
})

3、實例生命週期鉤子

每個Vue 實例在被建立時都要經過一系列的初始化過程－例如在設定資料綁定、方法傳參將實例掛載到DOM 並在數據變化時更新DOM 等。同時在過程中也就運行了一些叫做生命週期鉤子的函數，可以在不同的階段添加自己的程式碼的機會。

例如 mounted 鉤子可以用來在一個實例被創建之後執行程式碼：

new Vue({
  data: {
    a: 1
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log(&#39;a is: &#39; + this.a)
  }
})
// => "a is: 1"

也有一些其它的鉤子，在實例生命週期的不同階段被調用，如updated 和 destroyed。生命週期鉤子的 this 上下文指向呼叫它的 Vue 實例。

3、模板語法

Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的資料。所有 Vue.js 的範本都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

在底層的實作上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合回應系統，Vue 能夠聰明地計算出最少需要重新渲染多少元件，並將 DOM 操作次數減到最少。

如果你熟悉虛擬 DOM 並且偏好 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。 (官網原話)

3.1、文字插值

資料綁定最常見的形式就是使用「Mustache」語法(雙大括號) 的文字插值：

<span>Message: {{ msg }}</span>

Mustache 標籤將會被取代為對應資料物件上msg 屬性的值。無論何時，綁定的資料物件上 msg 屬性發生了改變，插值處的內容都會更新。

vue是預設的雙向綁定，若不想雙向綁定，一次性資料的請用指令v-once 指令，不過請小心影響到該節點上所有的資料綁定：

<span v-once>这个将不会改变: {{ msg }}</span>

3.2、原始HTML

雙大括號會將資料解釋為普通文本，而非HTML 程式碼。為了輸出真正的 HTML，你需要使用 v-html 指令：

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

你的網站上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信任內容使用 HTML 插值，絕對不要對使用者提供的內容使用內插。

3.3、使用 JavaScript 表達式

迄今為止，在vue的模板中，vue一直只綁定簡單的屬性鍵值。但實際上，對於所有的資料綁定，Vue.js 都提供了完全的 JavaScript 表達式支援。

{{ number + 1 }}
{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
<div v-bind:id="&#39;list-&#39; + id"></div>

3.4、指令

指令是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 運算式 (v-for 是例外)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。回顧我們在介紹中看到的例子

<p v-if="seen">现在你看到我了</p>

v-if 指令将根据表达式 seen 的值的真假来插入/移除 e388a4556c0f65e1904146cc1a846bee 元素。

3.4.1、参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

3.4.2、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写:

<a v-bind:href="url">...</a>...

v-on缩写:

<a v-on:click="doSomething">...</a>...

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

vue生命週期、vue實例、模板語法

相關文章