從壹開始先後端分離 [ Vue2.0+.NET Core2.1] 十七 ║Vue基礎：使用Vue.js 來畫博客首頁+指令(一)

時間  2020-05-08
標籤 開始 後端 分離 vue2.0+.net vue core2.1 core 十七 基礎 使用 vue.js 博客 首頁 指令 欄目 JavaScript 简体版
原文   原文鏈接

緣起

書說前兩篇文章《 十五 ║ Vue前篇：JS對象&字面量&this》和 《 十六 ║ Vue前篇：ES6初體驗 & 模塊化編程》，已經經過對js面向對象，類和模式封裝，ES6新特性等多個角度講解了Vue入門的一些儲備知識，之因此說儲備知識，是值，這些內容不會也能夠學Vue，可是，若是學的不錯，那下一步學習Vue的時候會比較容易，要是能看得懂，寫的出來，會修改別人的，嗯！繼續大步往前走哈哈，今天呢，終於到了寫代碼的時候了，這兩天通常預習這Vue，一邊修改這以前.Net Core 的問題和優化，一直有個心結仍是沒有接口，望看到這個問題的小哥哥小姐姐能幫忙，《基於AOP的Redis 緩存技術》，嗯名字我都想好了，內容遲遲下不去，看來只能抽時間跪大神去了 [苦笑]，好啦，開始今天的Vue講解。javascript

 一言不合就放圖系列，今天簡單作一個博客首頁的列表展現，經過引用Vue.js的方法安裝環境，簡單的固定數據操做來完成以下css

 

 

 

零、今天完成左下角深綠色的部分

 

 

 

1、Vue的核心是什麼？

一、首先，咱們就來認識一下Vue.js，官網中的定義是：html

經過儘量簡單的 API 實現響應式的數據綁定和組合的視圖組件。vue

所以，數據綁定，組件，是整個Vue的核心，並且是響應式的，這個劃重點要考（值得注意的是只有當實例被建立時 data 中存在的屬性纔是響應式的）。java

 

二、數據驅動，數據的改變驅動了視圖的自動更新，之前咱們的寫法都是經過js或者Jquery來操做DOM，前兩章我們也說到了，整個頁面裏都充斥着DOM操做的語法，不只僅不美觀，並且從效率上大打折扣，屢次的渲染使得瀏覽器疲憊不堪。可是vue就不同，經過ViewModel來控制，只須要咱們修改數據，就能控制DOM，進而控制視圖View的展現，並且速度很快，嗯！並且不再用去操做DOM，去找控件選擇器了，（還記得那年，頁面裏爲了作事件而添加的各類id或者class），哈哈這就是MVVM思想的實現。git

 

三、組件化，也是一大核心，經過分離頁面，使得整個頁面由不少個組件構成，給咱們的第一個印象就是，就像咱們平時使用到的MVC中的分視圖，或者子視圖，可是又不同，雖然組件是一部分，可是倒是本身的一個總體，和其餘組件相互獨立，高內聚低耦合，能夠經過自定義標籤的形式來使用，好比：github

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> `, }); //引用組件名，還能夠傳遞參數，以及通信等等
<fruit-select></fruit-select>

 

2、Vue.js的快速入門 Hello Blog

一、安裝Vue環境

這裏呢，我不想直接用Npm安裝一個項目，通常大項目纔會用到 NPM 搭建，若是咱們只是想在打印一個 Hello Blog ，嗯，或者是一個簡單的Html的 todoList 頁面，咱們能夠直接引用vue.js 文件，聲明一個全局變量來使用（固然，咱們在以後的教程中，會開發一個我的博客系統，裏邊會有先後臺多個頁面，那個時候咱們再從新搭建咱們的工程環境，能夠複用今天的樣式等，今天就先經過引用一個文件來便可）。npm

Vue.js 官網下載地址：http://vuejs.org/guide/installation.html，推薦使用開發版本，由於裏邊會由不少的錯誤提示等等，編程

如今下來，直接在Html頁面裏引用就行，今天我就用在線的文件：小程序

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

 

二、開始使用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標籤容器元素內
 data: { name: "老張的哲學", } }); </script>
</body>
</html>

而後運行代碼，以下圖：

一個 Vue 應用由一個經過 new Vue 建立的根 Vue 實例，以及可選的嵌套的、可複用的組件樹組成。舉個例子，一個 todo 應用的組件樹能夠是這樣的：

根實例 └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics

咱們會在下一篇文件中的 組件系統 章節具體展開。

 

三、數據控制頁面，MV綁定

咱們知道，vm就是咱們定義的全局變量，若是咱們想修改其中的值，咱們能夠這樣

vm.name="Hello Blog"
//除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 ，以便與用戶定義的屬性區分開來。
vm.$data.name="Hello Blog"$
vm._data.name="Hello Blog"

動圖以下：

 

 

四、vue還能夠雙向數據綁定

修改html展現代碼

<div id="app"> 博客園：{{ name }} <!--獲取變量 name-->
        <br />
        <br />
        <input v-model="name"> <!--v-model是vue的一個指令-->
    </div>

 

能夠看到咱們操做的view控件數據，直接影響到了咱們的vm.data，而且又進一步影響到了頁面，這個時候咱們能夠想一想，之前咱們是怎麼用Jquery來操做DOM的，是否是簡直不敢相信本身的眼睛！均可以這麼直接的操做DOM結構和Data數據，嗯！這個時候咱們就能夠進一步理解到了，VM 這個監控者在一直幹什麼了。

 

3、經常使用的一些指令總結 （上）

一、v-text 和 v-html 指令

 v-text 指令用於更新標籤包含的文本，它的做用跟雙大括號的效果同樣。咱們看看它的用法

二者差很少，可是v-html 能夠帶樣式

<p class="name" v-text="author"></p>
       <a href="#" v-html="authorHtml"></a>

       var myVueTest = new Vue({ el: '#app',//容器
 data: { author: "老張的哲學", authorHtml: "<strong>老張的哲學</strong>", }, methods: { }, //經過計算屬性過濾數據
 computed: { //這個明天講到
 } });

 

 

二、v-show 指令

v-show ，用來控制元素的顯示/隱藏 ，主要是控制元素的display css屬性的。v-show 指令的取值爲true/false，分別對應着顯示/隱藏。

<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: "老張的哲學", authorHtml: "<strong>老張的哲學</strong>", isShow: false } }); </script>

 

 

 

三、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>

 

 

四、v-for 指令

 這個時候，咱們就用到了常常用的三大指令之一，列表渲染 v-for

有時候，咱們的data中的存放的數據不是個簡單的數字或者字符串，而是數組Array類型，這個時候，咱們要把數組的元素展現在視圖上，就須要用到vue提供的 v-for 指令，來實現列表的渲染。

<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: "老張的哲學", authorHtml: "<strong>老張的哲學</strong>", list: [ //假數據
                 { name: " Vue前篇：ES6初體驗 & 模塊化編程", id: 9585766, date: "2018年9月5日" }, { name: "Vue前篇：JS對象&字面量&this", id: 9580807, date: "2018年9月4日" }, { name: " VUE 計劃書 & 個人先後端開發簡史", id: 9577805, date: "2018年9月3日" }, { name: " DTOs 對象映射使用，項目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日" }, { name: " 三種跨域方式比較，DTOs(數據傳輸對象)初探", id: 4200, date: "2018年8月31日" }, { name: "VUE 計劃書 & 個人先後端開發簡史", id: 3200, date: "2018年9月2日" }, { name: "VUE 實戰預告", id: 3200, date: "2018年9月12日" } ], isShow: false } }); </script>

 

 

 

五、代碼總結：代碼已經上傳到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 href="https://www.cnblogs.com/laozhang-is-phi/">博客園</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.jianshu.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 href="https://github.com/anjoy8">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: "老張的哲學", authorHtml: "<strong>老張的哲學</strong>", list: [ //假數據
                    { name: " Vue前篇：ES6初體驗 & 模塊化編程", id: 9585766, date: "2018年9月5日" }, { name: "Vue前篇：JS對象&字面量&this", id: 9580807, date: "2018年9月4日" }, { name: " VUE 計劃書 & 個人先後端開發簡史", id: 9577805, date: "2018年9月3日" }, { name: " DTOs 對象映射使用，項目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日" }, { name: " 三種跨域方式比較，DTOs(數據傳輸對象)初探", id: 4200, date: "2018年8月31日" }, { name: "VUE 計劃書 & 個人先後端開發簡史", id: 3200, date: "2018年9月2日" }, { name: "VUE 實戰預告", id: 3200, date: "2018年9月12日" } ], list3: [ //假數據
                    { name: "Html5" }, { name: "CSS3" }, { name: "JAVASCTIPT" }, { name: "SQL" }, { name: "C#" }, { name: "Wechat小程序" }, { name: "ASP.NET" } ], isShow: false }, methods: { }, //經過計算屬性過濾數據
 computed: { //這個明天講到
 } }); </script>

    
</body>
</html>

 

這裏說個題外話，可能之後來個React的快速入門教程，不過那個React 的 JSX 語法是真的看着沒有vue舒服，你們能夠看看：

 

 

4、結語

今天就暫時講到這裏，目前呢，我們的我的博客的首頁1.0 在樣式上已經差很少，達到了開篇中截圖的效果。可是還有不少的尚未說到，明天我們繼續說指令總結 （下） ：

五、v-bind （ : ）指令

六、v-on （ @）指令

七、v-model 指令

八、v-once 指令

 而後還會說到 動態綁定class和style 和 過濾器等，明天再見喲~~~

 

5、CODE

https://github.com/anjoy8/Blog.Vue/tree/master/Demo/Vue_17

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程