Vue的使用教程


1.什么是VUE

vue就是一個js庫,並且無依賴別的js庫,跟jquery差不多。vue的核心庫只關注視圖層,非常容易與其它庫或已有項目整合。Vue.js是一個輕巧、高性能、可組件化的MVVM庫,同時擁有非常容易上手的API。

 

2.安裝

一般有三種引入vue的方法

1.

直接引用script標簽

 

 

 2.

使用https://unpkg.com/vue這個在線CDN

3.

在官網直接下載

vue官網:https://cn.vuejs.org/

而且他的官網有非常詳細的關於vue的教程,對新手相當友好。

 

 

 

3.模板語法

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

1.插值

文本

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值:

 

 

 

也就是雙綁,標簽里加雙括號的值會和list里面的值進行綁定,標簽的值發生變化,插值處的內容也同時會發生變化,但是也能通過v-once指令,讓插值處只更新一次,但是一般不常用。

 

原始html

雙綁后,大括號里面的數據會變成普通文本,不是真正的html代碼,為了輸出真正的html,我們需要使用v-html指令:

 

 

 

 

 

 

 這個 span 的內容將會被替換成為 property 值 rawHtml,直接作為 HTML——會忽略解析 property 值中的數據綁定。

 

 

 

 

 2.指令

指令是帶有v-前綴的特殊屬性(比如v-if,v-for,v-model等等),指令 的值預期是單個 JavaScript 表達式 ,指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用於 DOM。

 

3.參數

參數就是指令名稱:后的那個元素,例如:

 

 在這里這個href就是參數,告知這個指令將該元素與url的值進行一個綁定

4.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM