緣起
書說前兩篇文章《 十五 ║ Vue前篇：JS對象&字面量&this》和 《 十六 ║ Vue前篇：ES6初體驗 & 模塊化編程》勇吊，已經(jīng)通過對js面向?qū)ο螅惡湍Ｊ椒庋b麻捻，ES6新特性等多個角度講解了Vue入門的一些儲備知識敏沉，之所以說儲備知識，是值秦躯，這些內(nèi)容不會也可以學(xué)Vue忆谓，但是，如果學(xué)的不錯踱承，那下一步學(xué)習(xí)Vue的時候會比較容易倡缠，要是能看得懂，寫的出來茎活，會修改別人的昙沦，嗯！繼續(xù)大步往前走哈哈载荔，今天呢盾饮，終于到了寫代碼的時候了，這兩天一般預(yù)習(xí)這Vue懒熙，一邊修改這之前.Net Core 的問題和優(yōu)化丘损，一直有個心結(jié)還是沒有接口，望看到這個問題的小哥哥小姐姐能幫忙煌珊，《基于AOP的Redis 緩存技術(shù)》号俐，嗯名字我都想好了，內(nèi)容遲遲下不去定庵，看來只能抽時間跪大神去了 [苦笑]吏饿，好啦，開始今天的Vue講解蔬浙。
一言不合就放圖系列猪落，今天簡單做一個博客首頁的列表展示，通過引用Vue.js的方法安裝環(huán)境畴博，簡單的固定數(shù)據(jù)操作來完成如下
零笨忌、今天完成左下角深綠色的部分
一、Vue的核心是什么俱病？
1官疲、首先，我們就來認識一下Vue.js亮隙，官網(wǎng)中的定義是：
通過盡可能簡單的 API 實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件途凫。
因此，數(shù)據(jù)綁定溢吻，組件维费，是整個Vue的核心，而且是響應(yīng)式的，這個劃重點要考（值得注意的是只有當(dāng)實例被創(chuàng)建時 data 中存在的屬性才是響應(yīng)式的）犀盟。
2而晒、數(shù)據(jù)驅(qū)動，數(shù)據(jù)的改變驅(qū)動了視圖的自動更新阅畴，以前我們的寫法都是通過js或者Jquery來操作DOM倡怎，前兩章咱們也說到了，整個頁面里都充斥著DOM操作的語法恶阴，不僅僅不美觀诈胜，而且從效率上大大折扣，多次的渲染使得瀏覽器疲憊不堪冯事。但是vue就不一樣焦匈，通過ViewModel來控制，只需要我們修改數(shù)據(jù)昵仅，就能控制DOM缓熟，進而控制視圖View的展示，而且速度很快摔笤，嗯够滑！而且再也不用去操作DOM，去找控件選擇器了吕世，（還記得那年彰触，頁面里為了做事件而添加的各種id或者class），哈哈這就是MVVM思想的實現(xiàn)命辖。
3况毅、組件化，也是一大核心尔艇，通過分離頁面尔许，使得整個頁面由很多個組件構(gòu)成，給我們的第一個印象就是终娃，就像我們平時使用到的MVC中的分視圖味廊，或者子視圖，但是又不一樣棠耕，雖然組件是一部分余佛，但是卻是自己的一個整體，和其他組件相互獨立窍荧，高內(nèi)聚低耦合辉巡，可以通過自定義標(biāo)簽的形式來使用，比如：
Vue.component("fruit-select", {
template: `<section>
<section>
<section>
<input type="text" />
<input type="button" value="Go" />
<span></span>
</section>
<ul>
<li>蘋果</li>
<li>香蕉</li>
</ul>
</section>
</section> `,
}); //引用組件名搅荞，還可以傳遞參數(shù)，以及通訊等等
<fruit-select></fruit-select>
二、Vue.js的快速入門 Hello Blog
1咕痛、想要使用痢甘，必須要學(xué)會安裝Vue
這里呢，我不想直接用Npm安裝一個項目茉贡，一般大項目才會用到 NPM 搭建塞栅，如果我們只是想在打印一個 Hello Blog ，嗯腔丧，或者是一個簡單的Html的 todoList 頁面放椰，我們可以直接引用vue.js 文件，聲明一個全局變量來使用（當(dāng)然愉粤，我們在之后的教程中砾医，會開發(fā)一個個人博客系統(tǒng)，里邊會有前后臺多個頁面衣厘，那個時候我們再重新搭建我們的工程環(huán)境如蚜，可以復(fù)用今天的樣式等，今天就先通過引用一個文件來即可）影暴。
Vue.js 官網(wǎng)下載地址：http://vuejs.org/guide/installation.html错邦，推薦使用開發(fā)版本，因為里邊會由很多的錯誤提示等等型宙，
現(xiàn)在下來撬呢，直接在Html頁面里引用就行，今天我就用在線的文件：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2妆兑、開始使用Vue來實例化對象賦值
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>簡易安裝 Vue.js</title>
<!--引用vue.js在線文件魂拦，安裝-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<!--定義一個容器 id="app"-->
<div id="app"> 博客園：{{ name }} <!--獲取變量 name Mustache語法 兩個花括號 -->
</div>
<script>
//定義全局變量vm
let vm = new Vue({
el: "#app",//el表示element，表示定義在#app這個html標(biāo)簽容器元素內(nèi)
data: {
name: "老張的哲學(xué)",
}
}); </script>
</body>
</html>
然后運行代碼箭跳，如下圖：
一個 Vue 應(yīng)用由一個通過 new Vue 創(chuàng)建的根 Vue 實例晨另，以及可選的嵌套的、可復(fù)用的組件樹組成谱姓。舉個例子借尿，一個 todo 應(yīng)用的組件樹可以是這樣的：
<pre style="color: rgb(0, 0, 0); font-family: "Courier New"; font-size: 12px; margin: 5px 8px; padding: 5px;">根實例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics</pre>
我們會在下一篇文件中的 **組件系統(tǒng) **章節(jié)具體展開。
3屉来、我們還可以通過控制數(shù)據(jù)來控制頁面內(nèi)容的展示路翻，我們知道，vm就是我們定義的全局變量茄靠，如果我們想修改其中的值茂契，我們可以這樣
vm.name="Hello Blog"
//除了數(shù)據(jù)屬性，Vue 實例還暴露了一些有用的實例屬性與方法慨绳。它們都有前綴 $ 以便與用戶定義的屬性區(qū)分開來掉冶。
vm.$data.name="Hello Blog"
vm._data.name="Hello Blog"
動圖如下：
4真竖、不僅如此，我們上邊說到了厌小，vue還可以雙向數(shù)據(jù)綁定
修改html展示代碼
<div id="app"> 博客園：{{ name }} <!--獲取變量 name-->
<br />
<br />
<input v-model="name"> <!--v-model是vue的一個指令-->
</div>
可以看到我們操作的view控件數(shù)據(jù)恢共，直接影響到了我們的vm.data，并且又進一步影響到了頁面璧亚，這個時候我們可以想想讨韭，以前我們是怎么用Jquery來操作DOM的，是不是簡直不敢相信自己的眼睛癣蟋！都可以這么直接的操作DOM結(jié)構(gòu)和Data數(shù)據(jù)透硝，嗯！這個時候我們就可以進一步理解到了疯搅，VM 這個監(jiān)控者在一直干什么了濒生。
三、常用的一些指令總結(jié) （上）
1秉撇、v-text 和 v-html 指令
v-text 指令用于更新標(biāo)簽包含的文本甜攀，它的作用跟雙大括號的效果一樣。我們看看它的用法
兩者差不多琐馆，但是v-html 可以帶樣式
<p class="name" v-text="author"></p>
<a href="#" v-html="authorHtml"></a>
var myVueTest = new Vue({
el: '#app',//容器
data: {
author: "老張的哲學(xué)",
authorHtml: "<strong>老張的哲學(xué)</strong>",
},
methods: {
}, //通過計算屬性過濾數(shù)據(jù)
computed: { //這個明天講到
}
});
2规阀、v-show 指令
v-show ，用來控制元素的顯示/隱藏 瘦麸，主要是控制元素的display css屬性的谁撼。v-show 指令的取值為true/false，分別對應(yīng)著顯示/隱藏滋饲。
<li class="nav-item" v-show="isShow">
<a href="/rss.xml">CSDN</a>
</li>
<script type="text/javascript">
var myVueTest1 = new Vue({
el: '#app1',//容器
data: {
author: "老張的哲學(xué)",
authorHtml: "<strong>老張的哲學(xué)</strong>",
isShow: false }
}); </script>
3厉碟、v-if 、v-else-if屠缭、 v-else 指令
v-if 指令的取值也是為true或false箍鼓，通過一定的條件，它控制元素是否需要被渲染出來呵曹，感覺上和上邊的 v-show 很相似款咖，請看
<div>
<div v-if="list.length > 20 "> MOST </div>
<div v-else-if="list.length > 6 "> MORE </div>
<div v-else> ALL </div>
</div>
4、v-for 指令
這個時候奄喂，我們就用到了經(jīng)常用的三大指令之一铐殃，列表渲染 v-for
有時候，我們的data中的存放的數(shù)據(jù)不是個簡單的數(shù)字或者字符串跨新，而是數(shù)組Array類型富腊，這個時候，我們要把數(shù)組的元素展示在視圖上域帐，就需要用到vue提供的 v-for 指令赘被，來實現(xiàn)列表的渲染是整。
<ul class="post-list non-style-list">
<li v-for='item in list' class="post-list-item">
<a :href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name}}</a>
<span class="post-list-date">({{item.date}})</span>
</li>
</ul>
<script type="text/javascript">
var myVueTest1 = new Vue({
el: '#app1',//容器
data: {
author: "老張的哲學(xué)",
authorHtml: "<strong>老張的哲學(xué)</strong>",
list: [ //假數(shù)據(jù)
{ name: " Vue前篇：ES6初體驗 & 模塊化編程", id: 9585766, date: "2018年9月5日" },
{ name: "Vue前篇：JS對象&字面量&this", id: 9580807, date: "2018年9月4日" },
{ name: " VUE 計劃書 & 我的前后端開發(fā)簡史", id: 9577805, date: "2018年9月3日" },
{ name: " DTOs 對象映射使用，項目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日" },
{ name: " 三種跨域方式比較民假，DTOs(數(shù)據(jù)傳輸對象)初探", id: 4200, date: "2018年8月31日" },
{ name: "VUE 計劃書 & 我的前后端開發(fā)簡史", id: 3200, date: "2018年9月2日" },
{ name: "VUE 實戰(zhàn)預(yù)告", id: 3200, date: "2018年9月12日" }
],
isShow: false }
}); </script>
5贰盗、代碼總結(jié)：代碼已經(jīng)上傳到Git
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>個人博客 Vue.js</title>
<!--引用 樣式文件 -->
<link rel="stylesheet" href="rexo.css" />
<!--引用vue.js在線文件，安裝-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<header>
<div class="description">
<div style="background-image: url(https://pic.cnblogs.com/avatar/1468246/20180817230353.png); width: 128px; height: 128px; background-size: cover; border-radius: 50%; margin: 0 auto;">
</div>
<p class="name" v-text="author"></p>//指令v-text
<p class="desc">Software Engineer.Currently working in Microsoft co-operation.</p>
</div>
<nav>
<ul class="nav">
<li class="nav-item">
<a >博客園</a>
</li>
<li class="nav-item">
<a href="http://www.reibang.com/u/94102b59cc2a">簡書</a>
</li>
<li class="nav-item">
<a href="#">阿里云棲</a>
</li>
<li class="nav-item">
<a href="/rss.xml">Git</a>
</li>
<li class="nav-item" v-show="isShow">//指令v-show
<a href="/rss.xml">CSDN</a>
</li>
</ul>
</nav>
</header>
<div class="container">
<h2 class="hr">
<span>About Me</span>
</h2>
<p>My name is <span v-html="author"></span>. An amateur programmer who writes code every day and watches movies every day.</p>
<h2 class="hr">
<span>featured</span>
</h2>
<ul class="post-list non-style-list">
<li v-for='item in list' class="post-list-item">//指令 v-for
<a :href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name}}</a>
<span class="post-list-date">({{item.date}})</span>
</li>
</ul>
<div>
<div v-if="list.length > 20 ">//指令 v-if v-else-if v-else MOST </div>
<div v-else-if="list.length > 6 "> MORE </div>
<div v-else> ALL </div>
</div>
<h2 class="hr">
<span>Skills</span>
</h2>
<ul class="skill-list non-style-list">
<li v-for='(item, key) in list3' class="post-list-item">{{item.name}}</li>
</ul>
<h2 class="hr">
<span>Contact</span>
</h2>
<ul class="contact-list non-style-list">
<li>
<b class="twitter">TWITTER</b>: <a href="#">@laozhang</a>
</li>
<li>
<b class="weibo">微博</b>: <a href="#">@laozhang</a>
</li>
<li>
<b class="zhihu">知乎</b>: <a href="#" v-html="authorHtml"></a>//指令 v-html
</li>
<li>
<b class="github">GITHUB</b>: <a >anjoy8</a>
</li>
<li>
<b class="email">EMAIL</b>: <a href="mailto:laozhang@azlinli.com">randypriv at azlinli</a>
</li>
</ul>
</div>
<div id="footer">
<p>2018 <a href="#">LZ's Blog</a> - Hosted by <a href="#" style="font-weight: bold">Coding Pages</a></p>
<p>
<a href="#">京ICP備00000000號</a>
</p>
</div>
<div class="layout-bg"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',//容器
data: {
author: "老張的哲學(xué)",
authorHtml: "<strong>老張的哲學(xué)</strong>",
list: [ //假數(shù)據(jù)
{ name: " Vue前篇：ES6初體驗 & 模塊化編程", id: 9585766, date: "2018年9月5日" },
{ name: "Vue前篇：JS對象&字面量&this", id: 9580807, date: "2018年9月4日" },
{ name: " VUE 計劃書 & 我的前后端開發(fā)簡史", id: 9577805, date: "2018年9月3日" },
{ name: " DTOs 對象映射使用阳欲，項目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日" },
{ name: " 三種跨域方式比較，DTOs(數(shù)據(jù)傳輸對象)初探", id: 4200, date: "2018年8月31日" },
{ name: "VUE 計劃書 & 我的前后端開發(fā)簡史", id: 3200, date: "2018年9月2日" },
{ name: "VUE 實戰(zhàn)預(yù)告", id: 3200, date: "2018年9月12日" }
],
list3: [ //假數(shù)據(jù)
{ name: "Html5" },
{ name: "CSS3" },
{ name: "JAVASCTIPT" },
{ name: "SQL" },
{ name: "C#" },
{ name: "Wechat小程序" },
{ name: "ASP.NET" }
],
isShow: false },
methods: {
}, //通過計算屬性過濾數(shù)據(jù)
computed: { //這個明天講到
}
}); </script>
</body>
</html>
四陋率、結(jié)語
今天就暫時講到這里球化，目前呢，咱們的個人博客的首頁1.0 在樣式上已經(jīng)差不多瓦糟，達到了開篇中截圖的效果筒愚。但是還有很多的還沒有說到，明天咱們繼續(xù)說指令總結(jié) （下） ：
5菩浙、v-bind （ : ）指令
6巢掺、v-on （ @）指令
7、v-model 指令
8劲蜻、v-once 指令
然后還會說到 動態(tài)綁定class和style 和 過濾器等陆淀，明天再見喲~~~
五、CODE
https://github.com/anjoy8/Blog.Vue
QQ群：
867095512 (blod.core)
