vue生命週期、vue實例、模板語法
這次帶給大家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('a is: ' + 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 ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>
3.4、指令
指令 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 運算式 (v-for 是例外)。指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用於 DOM。回顧我們在介紹中看到的例子
<p v-if="seen">现在你看到我了</p>
v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
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中文网其它相关文章!
相关阅读:
前端微信分享jssdk config:invalid signature 签名错误的解决方法
以上是vue生命週期、vue實例、模板語法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

PHP電子郵件範本:客製化和個人化您的郵件內容隨著電子郵件的普及和廣泛應用,傳統的郵件範本已經無法滿足人們對個人化和客製化郵件內容的需求。現在,我們可以透過使用PHP程式語言來創建客製化和個人化的電子郵件範本。本文將為您介紹如何使用PHP來實現這一目標,並提供一些具體的程式碼範例。一、建立郵件範本首先,我們需要建立一個基本的郵件範本。這個模板可以是一個HTM

Lambda表達式是無名稱的匿名函數,其語法為:(parameter_list)->expression。它們具有匿名性、多樣性、柯里化和閉包等特徵。在實際應用中,Lambda表達式可用於簡潔地定義函數,如求和函數sum_lambda=lambdax,y:x+y,並透過map()函數應用於列表來進行求和操作。

關於PPT蒙版,很多人肯定對它很陌生,一般人做PPT不會將牠吃透,而是湊活著可以做出來自己喜歡的就行,所以很多人都不知道PPT蒙版到底是什麼意思,也不知道這個蒙版有什麼作用,甚至更不知道它可以讓圖片變得不再那麼單調,想要學習的小伙伴們快來了學習學習,為你的PPT圖片上添上點吧PPT蒙版吧,讓它不再單調了。那麼,PPT蒙版該怎麼添呢?請往下看。 1.首先我們開啟PPT,選擇一張空白的圖片,之後右鍵點選【設定背景格式】,純色選擇顏色就行。 2.點選【插入】,藝術字,輸入字3.點選【插入】,點選【形狀】

Golang是一門功能強大且高效的程式語言,可用於開發各種應用程式和服務。在Golang中,指標是一種非常重要的概念,它可以幫助我們更靈活和有效率地操作資料。指標轉換是指在不同類型之間進行指標操作的過程,本文將透過具體的實例來學習Golang中指標轉換的最佳實踐。 1.基本概念在Golang中,每個變數都有一個位址,位址就是變數在記憶體中的位置。

C++模板特化影響函式重載與重寫:函式重載:特化版本可提供特定型別不同的實現,進而影響編譯器選擇呼叫的函式。函數重寫:衍生類別中的特化版本將覆寫基底類別中的模板函數,影響衍生類別物件呼叫函數時的行為。

C++模板在實際開發中廣泛應用,包括容器類別模板、演算法模板、泛型函數模板和元編程模板。例如,泛型排序演算法可對不同類型資料的陣列進行排序。

Oracle實例數量與資料庫效能關係Oracle資料庫是業界知名的關係型資料庫管理系統之一,廣泛應用於企業級的資料儲存與管理。在Oracle資料庫中,實例是一個非常重要的概念。實例是指Oracle資料庫在記憶體中的運作環境,每個實例都有獨立的記憶體結構和後台進程,用於處理使用者的請求和管理資料庫的操作。實例數量對於Oracle資料庫的效能和穩定性有著重要的影響。

C++中模板與泛型的區別:模板:編譯時定義,明確類型化,效率高,程式碼體積小。泛型:運行時類型化,抽象接口,提供靈活性,效率較低。
