摘要:在這個(gè)組件里面有一些鏈接列表,和,這些列表直接使用編寫按照傳統(tǒng)的寫法,如果我們需要往里面添加鏈接的時(shí)候,每次我們都得添加和標(biāo)簽。所以修改如下這樣我們就把數(shù)據(jù)和視圖分開了,模板里面的代碼也簡潔了很多,不再需要寫很多重復(fù)的代碼。
Vue 的官方文檔 對 Vue 介紹非常詳細(xì),但官方文檔使用在 HTML 中引入 vue 的方式進(jìn)行講解,而實(shí)際項(xiàng)目中一般使用腳手架如 vue-cli 初始化項(xiàng)目。以至于剛看完文檔時(shí),卻依舊不能立即立即 vue-cli 創(chuàng)建的項(xiàng)目代碼。所以本文 vue-cli 構(gòu)建的項(xiàng)目為基礎(chǔ),詳細(xì)解釋其代碼及對應(yīng)的概念,并進(jìn)行簡單的實(shí)踐。
命令行工具 安裝 vue-cli 并初始化項(xiàng)目本文的代碼在 https://github.com/nodejh/vue2-tutorials/tree/master/01.QuickStart
首先要全局安裝 vue-cl:
$ npm install --global vue-cli
然后使用 vue-cli 初始化一個(gè)基于 webpack 模板的新項(xiàng)目,除了 Install vue-router? 選 N (No),其余都可以直接回車選 Y (Yes),因?yàn)槲覀儠簳r(shí)不會(huì)講到 vue-router:
$ vue init webpack demo ? Project name demo ? Project description A Vue.js project ? Author nodejh安裝依賴? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes
$ cd demo $ npm install $ npm run dev
然后打開瀏覽器,輸入 http://localhost:8080 就能看到界面。
接下來分析一下代碼。
代碼分析項(xiàng)目目錄結(jié)構(gòu)如下:
├── README.md ├── build # 編譯項(xiàng)目的配置文件目錄 ├── config # 配置文件目錄 ├── src # 項(xiàng)目主要代碼目錄 ├── static # 靜態(tài)資源 ├── test # 測試文件目錄
開發(fā)階段的主要代碼都在 src 目錄中編寫,vue-cli 默認(rèn)生成了一些代碼:
src ├── App.vue ├── assets │?? └── logo.png ├── components │?? └── Hello.vue └── main.js
可以發(fā)現(xiàn),代碼的后綴名有兩種:
.js JS 文件
.vue Vue 組件,里面定義了 Vue 實(shí)例、模板、樣式等。需要由 webpack 等工具來轉(zhuǎn)換為 js 代碼
接下來會(huì)逐一解釋這些文件及代碼。
main.jsmain.js 是項(xiàng)目的入口文件,也是 webpack 打包的入口文件。里面最代碼很少,主要就是通過 new Vue() 創(chuàng)建 Vue 實(shí)例:
new Vue({ el: "#app", template: "", components: { App }, });
每個(gè) Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例啟動(dòng)的。
在實(shí)例化 Vue 時(shí),傳入一個(gè)了一個(gè)對象,對象包含以下幾個(gè)選項(xiàng)。
elel 的值是 Vue 實(shí)例的掛載目標(biāo),這里是 #app,也就是 demo/index.html 中 id="app" 這個(gè)元素:
el 必須是一個(gè)已存在的元素。
api/#el
components在說 template 之前,先來看看 components 屬性。
components: { App } 等價(jià)于 components: { App: App },是一個(gè)包含了對 Vue 實(shí)例可見的組件的哈希表。只有在 components 里面列出來的組件,才可以在 template 里面使用。
如果我們把 components: { App } 改為 components: { App } 改為 components: { MyApp: App },那么在 template 里面就需要這樣使用:template: "
由于 HTML 標(biāo)簽不區(qū)分大小寫,所以 components 里面的駝峰命名會(huì)自動(dòng)轉(zhuǎn)換為短橫線。詳見 camelCase vs. kebab-case
templatetemplate 就是掛載到頁面的模板。
這里的值是
new Vue({ el: "#app", // 這里的就是 components 屬性的值 App template: " ", components: { App }, });
所以這段代碼的含義就是,將
src/App.vue 是一個(gè)典型的單文件組件。實(shí)際在項(xiàng)目中,我們寫的基本都是組件,再根據(jù)需要用組件組成頁面,這其實(shí)就是組件化。組件與組件之間相互獨(dú)立,項(xiàng)目結(jié)構(gòu)更加清晰,也更有利于維護(hù)。
一個(gè)組件里面封裝了 HTML、CSS 和 JS,有自己獨(dú)立的樣式和邏輯。
就是組件中的模板,模板的代碼都在 標(biāo)簽中,除
為什么模板中能使用 hello 這個(gè)組件呢?
這是因?yàn)? 標(biāo)簽里面定義了 Hello(首字母大寫)這個(gè)組件:
import Hello from "./components/Hello" export default { name: "app", components: { // Hello 組件,即 ./components/Hello 的一個(gè)引用 Hello } }
這里 components 屬性的含義,在之前已經(jīng)提到過了,只有在 components 里面列出來的組件,才能被模板使用。這里列出了 Hello 這個(gè)組件,所以在 中我們可以使用
而 components 屬性里面的 Hello,則是 ./components/Hello 這個(gè)組件的一個(gè)引用:
import Hello from "./components/Hello"
最后就是 標(biāo)簽,里面就是普通的 CSS 了。
src/components/Hello.vue最后再來看看 src/components/Hello.vue 這個(gè)組件的代碼。
基本跟 src/App.vue 是一樣的,除了下面這兩個(gè)地方之外:
{{ msg }}
data () { return { msg: "Welcome to Your Vue.js App" } }
恭喜你!看到這里,我們就可以真正開始寫代碼了。
{{}} 是 Vue 的一個(gè)模板語法,文本插值。如上面的例子所示,我們在 data 里面定義一個(gè)對象,就可以在模板中通過 {{ }} 來訪問。
data 雖然是一個(gè)函數(shù),但它執(zhí)行之后就等價(jià)于:
data: { msg: "Welcome to Your Vue.js App" }
當(dāng)我們改變 msg 的值,在頁面上渲染出來的數(shù)據(jù)也會(huì)改變。也就是數(shù)據(jù)和 DOM 綁定在了一起。
模板語法 插值 文本插值上面我們已經(jīng)接觸到了文本插值 {{}},{{ msg }} 將會(huì)被替代為對應(yīng)數(shù)據(jù)對象上 msg 屬性的值。無論何時(shí),綁定的數(shù)據(jù)對象(即 data)上 msg 屬性發(fā)生了改變,插值處的內(nèi)容都會(huì)更新。
通過使用 v-once 指令,我們也能執(zhí)行一次性地插值,當(dāng)數(shù)據(jù)改變時(shí),插值處的內(nèi)容不會(huì)更新。但請留心這會(huì)影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定:
純 HTMLThis will never change: {{ msg }}
雙大括號會(huì)將數(shù)據(jù)解釋為純文本,而非 HTML 。為了輸出真正的 HTML ,需要使用 v-html 指令:
這個(gè) div 的內(nèi)容將會(huì)被替換成為屬性值 rawHtml,直接作為 HTML —— 數(shù)據(jù)綁定會(huì)被忽略。注意,你不能使用 v-html 來復(fù)合局部模板,因?yàn)?Vue 不是基于字符串的模板引擎。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元。
JS 表達(dá)式你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn),因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值,絕不要對用戶提供的內(nèi)容插值。
{{}} 中也可以寫 JS 表達(dá)式:
{{ number + 1 }} {{ ok ? "YES" : "NO" }} {{ message.split("").reverse().join("") }}指令
指令(Directives)是帶有 v- 前綴的特殊屬性。
v-bind{{}} 不能在 HTML 屬性中使用。針對 HTML 屬性需要使用 v-bind:
這對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會(huì)被移除:
v-bind 也可以縮寫:
v-on
v-on 用來監(jiān)聽 DOM 事件:
也可以縮寫成下面這樣:
v-ifNow you see me
這里 v-if 指令將根據(jù)表達(dá)式 seen 的值的真假來移除/插入
元素。
v-forv-for 指令可以綁定數(shù)組的數(shù)據(jù)來渲染一個(gè)項(xiàng)目列表:
實(shí)踐
- {{ todo.text }}
讓我們把目光回到 Hello.vue。在這個(gè)組件里面有一些鏈接列表, Essential Links 和 Ecosystem,這些列表直接使用 HTML 編寫:
按照傳統(tǒng)的寫法,如果我們需要往里面添加鏈接的時(shí)候,每次我們都得添加 和 標(biāo)簽。思考兩個(gè)問題:
添加幾個(gè)鏈接還好,如果要添加非常非常多呢?難到要復(fù)制幾十次 和 標(biāo)簽?
如果要?jiǎng)討B(tài)改變鏈接列表呢?難道要使用 innerHTML 等方法修改 DOM?
聰明的你可能已經(jīng)想到了,很明顯不需要這么做,我們可以使用模板語法。將鏈接信息寫到 Vue 的數(shù)據(jù)對象 data 里面,然后通過動(dòng)態(tài)綁定的方式,將數(shù)據(jù)綁定到 DOM。
所以修改如下:
{{ msg }}
Essential Links
Ecosystem
這樣我們就把數(shù)據(jù)和視圖分開了,模板里面的代碼也簡潔了很多,不再需要寫很多重復(fù)的代碼。并且根據(jù)不同數(shù)據(jù),我們也能展示出不同的 UI。
總結(jié)本文詳細(xì)講解了 vue-cli 初始化的項(xiàng)目代碼,并且在講解代碼的過程中,介紹了構(gòu)造 vue 對象的一些參數(shù),以及 vue 的一些基本概念,比如模板語法中的插值和指令。最后通過修改代碼對以上知識點(diǎn)進(jìn)行實(shí)踐。
相信看到了這里,你對如何使用 vue 寫一個(gè)項(xiàng)目已經(jīng)有了初步了解。當(dāng)然,看完本文,可能還有很多概念理解不清楚,這時(shí)推薦去看一下 vue 的官方文檔,這個(gè)時(shí)候再去看官方文檔,應(yīng)該就會(huì)輕松很多了。
https://github.com/nodejh/nodejh.github.io/issues/38
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83874.html
摘要:前端日報(bào)精選了解中的全局對象和全局作用域張鑫旭鑫空間鑫生活子進(jìn)程你應(yīng)該知道的一切直出內(nèi)存泄露問題的追查實(shí)踐我他喵的到底要怎樣才能在生產(chǎn)環(huán)境中用上模塊化騰訊前端大會(huì)大咖說大咖干貨,不再錯(cuò)過發(fā)布發(fā)布中文翻譯在使用進(jìn)行本地開發(fā)代碼 2017-07-07 前端日報(bào) 精選 了解JS中的全局對象window.self和全局作用域self ? 張鑫旭-鑫空間-鑫生活Node.js 子進(jìn)程:你應(yīng)該知道...
摘要:中文官網(wǎng)英文官網(wǎng)組織發(fā)出一個(gè)問題之后,不要暫時(shí)的離開電腦,如果沒有把握先不要提問。珍惜每一次提問,感恩每一次反饋,每個(gè)人工作還是業(yè)余之外抽出的時(shí)間有限,充分準(zhǔn)備好應(yīng)有的資源之后再發(fā)問,有利于問題能夠高效質(zhì)量地得到解決。 Vue.js資源分享 更多資源請Star:https://github.com/maidishike... 文章轉(zhuǎn)自:https://github.com/maid...
摘要:如這個(gè)表達(dá)式能匹配兩種以連字號分隔的電話號碼一種是三位區(qū)號,位本地號如,一種是位區(qū)號,位本地號。有時(shí)我們要匹配的字符串可能包含正則表達(dá)式語法提供的一些元字符,這時(shí)我們就要用到字符轉(zhuǎn)義例如匹配,匹配。 找了很多正則表達(dá)式的教程,始終沒有滿意的,要不就是直接給出一張?jiān)址谋?,要不就是給出各種常用的表達(dá)式,直到我看到這篇http://deerchao.net/tutorials/regex...
閱讀 3735·2021-10-14 09:43
閱讀 3321·2021-08-25 09:38
閱讀 616·2019-08-30 15:55
閱讀 1356·2019-08-30 13:05
閱讀 2249·2019-08-29 16:05
閱讀 513·2019-08-29 12:58
閱讀 2802·2019-08-29 12:34
閱讀 3249·2019-08-26 12:15