|
昨天晚上23:00，Vue，正式打響第一槍！轉(zhuǎn)行三年半，向全棧邁進(jìn)，爭取三年內(nèi)可以成為架構(gòu)師，成為世界500強(qiáng)公司的中流砥柱，fighting從未停止，加油！ 
一、簡介 Vue(讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。與其它框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，方便與第三方庫或既有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。 Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。 二、Vue.js實(shí)現(xiàn)hello world <meta name='viewport' content='width=device-width, initial-scale=1.0'> <!--插值表達(dá)式，綁定vue中的data數(shù)據(jù)--> <script src='vue.min.js'></script> //1、創(chuàng)建一個(gè)vue對象 el: '#app',//2、綁定vue作用的范圍 data: {//3、定義頁面中顯示的模型數(shù)據(jù)
三、創(chuàng)建代碼片段 文件 => 首選項(xiàng) => 用戶代碼片段 => 新建全局代碼片段/或文件夾代碼片段：vue-html.code-snippets ' <meta charset=\'UTF-8\'>', ' <meta name=\'viewport\' content=\'width=device-width, initial-scale=1.0\'>', ' <meta http-equiv=\'X-UA-Compatible\' content=\'ie=edge\'>', ' <title>Document</title>', ' <script src=\'vue.min.js\'></script>', 'description': 'my vue template in html'
四、基礎(chǔ)語法 1、單向綁定數(shù)據(jù)v-bind 你看到的 v-bind 特性被稱為指令。指令帶有前綴 v- 除了使用插值表達(dá)式{{}}進(jìn)行數(shù)據(jù)渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個(gè)冒號（:） 2、雙向綁定數(shù)據(jù)v-model <!-- v-bind:value只能進(jìn)行單向的數(shù)據(jù)渲染 --> <input type='text' v-bind:value='searchMap.keyWord'> <!-- v-model 可以進(jìn)行雙向的數(shù)據(jù)綁定 --> <input type='text' v-model='searchMap.keyWord'> <p>您要查詢的是：{{searchMap.keyWord}}</p>
3、方法methods 4、修飾符 修飾符 (Modifiers) 是以半角句號（.）指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。 例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()： 即阻止事件原本的默認(rèn)行為 5、條件渲染 v-if：條件指令 <input type='checkbox' v-model='ok'>同意許可協(xié)議 <!-- v:if條件指令：還有v-else、v-else-if 切換開銷大 --> <h1 v-if='ok'>if：Lorem ipsum dolor sit amet.</h1>
v-show：條件指令 使用v-show完成和上面相同的功能 <!-- v:show 條件指令 初始渲染開銷大 --> <h1 v-show='ok'>show：Lorem ipsum dolor sit amet.</h1>
- v-if 是“真正”的條件渲染，因?yàn)樗鼤_保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
- v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會開始渲染條件塊。
- 相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。
- 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。
6、列表渲染 v-for：列表循環(huán)指令 例1：簡單的列表渲染 <li v-for='n in 10'>{{ n }} </li> <!-- 如果想獲取索引，則使用index關(guān)鍵字，注意，圓括號中的index必須放在后面 --> <li v-for='(n, index) in 5'>{{ n }} - {{ index }} </li>
例2：遍歷數(shù)據(jù)列表 { id: 1, username: 'helen', age: 18 }, { id: 2, username: 'peter', age: 28 }, { id: 3, username: 'andy', age: 38 }
<!-- 2、遍歷數(shù)據(jù)列表 --> <!-- <tr v-for='item in userList'></tr> --> <tr v-for='(item, index) in userList'> <td>{{item.username}}</td>
五、組件 組件（Component）是 Vue.js 最強(qiáng)大的功能之一。 組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。 組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹： 
1、局部組件 // 定義局部組件，這里可以定義多個(gè)局部組件 template: '<ul><li>首頁</li><li>學(xué)員管理</li></ul>'
使用組件 2、全局組件 定義全局組件：components/Navbar.js Vue.component('Navbar', { template: '<ul><li>首頁</li><li>學(xué)員管理</li><li>講師管理</li></ul>'
<script src='vue.min.js'></script> <script src='components/Navbar.js'></script>
六、生命周期 
分析生命周期相關(guān)方法的執(zhí)行時(shí)機(jī) //===創(chuàng)建時(shí)的四個(gè)事件 beforeCreate() { // 第一個(gè)被執(zhí)行的鉤子方法：實(shí)例被創(chuàng)建出來之前執(zhí)行 console.log(this.message) //undefined this.show() //TypeError: this.show is not a function // beforeCreate執(zhí)行時(shí)，data 和 methods 中的 數(shù)據(jù)都還沒有沒初始化 created() { // 第二個(gè)被執(zhí)行的鉤子方法 console.log(this.message) //床前明月光 this.show() //執(zhí)行show方法 // created執(zhí)行時(shí)，data 和 methods 都已經(jīng)被初始化好了！ // 如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早，只能在 created 中操作 beforeMount() { // 第三個(gè)被執(zhí)行的鉤子方法 console.log(document.getElementById('h3').innerText) //{{ message }} // beforeMount執(zhí)行時(shí)，模板已經(jīng)在內(nèi)存中編輯完成了，尚未被渲染到頁面中 mounted() { // 第四個(gè)被執(zhí)行的鉤子方法 console.log(document.getElementById('h3').innerText) //床前明月光 // 內(nèi)存中的模板已經(jīng)渲染到頁面，用戶已經(jīng)可以看見內(nèi)容 beforeUpdate() { // 數(shù)據(jù)更新的前一刻 console.log('界面顯示的內(nèi)容：' + document.getElementById('h3').innerText) console.log('data 中的 message 數(shù)據(jù)是：' + this.message) // beforeUpdate執(zhí)行時(shí)，內(nèi)存中的數(shù)據(jù)已更新，但是頁面尚未被渲染 console.log('界面顯示的內(nèi)容：' + document.getElementById('h3').innerText) console.log('data 中的 message 數(shù)據(jù)是：' + this.message) // updated執(zhí)行時(shí)，內(nèi)存中的數(shù)據(jù)已更新，并且頁面已經(jīng)被渲染
七、路由 Vue.js 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。 通過 Vue.js 可以實(shí)現(xiàn)多視圖的單頁Web應(yīng)用（single page web application，SPA）。 Vue.js 路由需要載入 vue-router 庫 1、引入js <script src='vue.min.js'></script> <script src='vue-router.min.js'></script>
2、編寫html <!-- 使用 router-link 組件來導(dǎo)航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認(rèn)會被渲染成一個(gè) `<a>` 標(biāo)簽 --> <router-link to='/'>首頁</router-link> <router-link to='/student'>會員管理</router-link> <router-link to='/teacher'>講師管理</router-link> <router-view></router-view>
3、編寫js // 可以從其他文件 import 進(jìn)來 const Welcome = { template: '<div>歡迎</div>' } const Student = { template: '<div>student list</div>' } const Teacher = { template: '<div>teacher list</div>' } // 每個(gè)路由應(yīng)該映射一個(gè)組件。 { path: '/', redirect: '/welcome' }, //設(shè)置默認(rèn)指向的路徑 { path: '/welcome', component: Welcome }, { path: '/student', component: Student }, { path: '/teacher', component: Teacher } // 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置 const router = new VueRouter({ routes // （縮寫）相當(dāng)于 routes: routes // 4. 創(chuàng)建和掛載根實(shí)例。 // 從而讓整個(gè)應(yīng)用都有路由功能 // 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！
上一篇：Spring Boot + Vue 全棧開發(fā)，都需要哪些前端知識？ 下一篇：瞧不起CRUD？Vue 神帶你領(lǐng)略王者級CRUD程序媛的風(fēng)采
|
