day03---Vue(03)

1、介紹

一、Vue.js 是什麼

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。
Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。
官方網站：https://cn.vuejs.org

二、初始Vue.js

首先引入vue.min.js到項目文件目錄下。
建立 demo.html

Document
            {{ message }}

這就是聲明式渲染：Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統
這裏的核心思想就是沒有繁瑣的DOM操做，例如jQuery中，咱們須要先找到div節點，獲取到DOM對象，而後進行一系列的節點操做

三、在vs code中建立代碼片斷

文件 =>  首選項 => 用戶代碼片斷 => 新建全局代碼片斷/或文件夾代碼片斷：vue-html.code-snippets

注意：製做代碼片斷的時候，字符串中若是包含文件中複製過來的「Tab」鍵的空格，要換成「空格鍵」的空格

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "Document",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
        ],
        "description": "my vue template in html"
    }
}

2、基本語法

一、基本數據渲染和指令

你看到的 v-bind 特性被稱爲指令。指令帶有前綴 v-
除了使用插值表達式{{}}進行數據渲染，也可使用 v-bind指令，它的簡寫的形式就是一個冒號（:）
建立 01-基本數據渲染和指令.html

Document{{ content }}{{ content }}

二、雙向數據綁定

雙向數據綁定和單向數據綁定：使用 v-model 進行雙向數據綁定
建立 02-雙向數據綁定.html

Document您要查詢的是：{{searchMap.keyWord}}

三、事件

需求：點擊查詢按鈕，按照輸入框中輸入的內容查找公司相關信息
在前面的例子基礎上，data節點中增長 result，增長 methods節點 並定義 search方法。
html中增長 button 和 p。
使用 v-on 進行數件處理，v-on:click 表示處理鼠標點擊事件，事件調用的方法定義在 vue 對象聲明的 methods 節點中。
建立 03-事件.html

Document查詢您要查詢的是：{{searchMap.keyWord}}{{result.title}}查詢

四、修飾符

修飾符 (Modifiers) 是以半角句號（.）指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
即阻止事件本來的默認行爲

建立 04-修飾符.html

Document保存

五、條件渲染

v-if：條件指令
建立 05-條件渲染.html
注意：單個複選框綁定到布爾值

Document是否贊成1{{ok}}贊成查看協議。。。。。。。。。。是否贊成2{{ok}}贊成查看協議。。。。。。。。。。

v-show：條件指令
使用v-show完成和上面相同的功能

 show：Lorem ipsum dolor sit amet.no

（1）v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

（2）v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

（3）相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

（4）通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

六、列表渲染

v-for：列表循環指令
建立 06-列表渲染.html

Document{{ n }}{{ n }} - {{ index }}-->{{index}}{{item.id}}{{item.username}}{{item.age}}