vue.js

時間 2019-11-09

原文原文鏈接

雙向數據綁定/組件/表單||類型排序/過濾||路由||判斷/循環迭代||計算機||CSS3樣式綁定/時間處理

Vue.js（讀音 /vjuː/, 相似於 view）是一個構建數據驅動的 web 界面的庫。html

Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。
說到組件，咱們要先了解MVVM框架。vue

M指的是model：數據訪問層；node
V指的是View：UI界面；webpack
VM指的是ViewModel：他是view的抽象，負責view和model之間的信息轉換，將view的command傳送到model。git

優勢：

*簡單：官方文檔很清晰，比 Angular 簡單易學；

*快速：異步批處理方式更新 DOM；

*組合：用解耦的、可複用的組件組合你的應用程序；

*緊湊：~23kb min+gzip，且無依賴；

*強大：表達式 & 無需聲明依賴的可推導屬性 (computed properties)；

*對模塊友好：能夠經過 NPM、Bower 或 Duo 安裝，不強迫你全部的代碼都遵循 Angular 的各類規定，使用場景更加靈活。

缺點：

*新生兒：新的項目，2014年3月20日發佈的0.10.0 Release Candidate版本，目前github上面最新的是2.2.4版本，沒有angular那麼成熟；

*影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其餘一些有名的庫。

*不支持IE8

1、使用Vue的過程就是定義MVVM各個組成部分的過程的過程。

1.定義View；

2.定義Model；

3.建立一個Vue實例或"ViewModel"，它用於鏈接View和Model；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--這是咱們的View-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 這是咱們的Model
        var exampleData = {
            message: 'Hello World!'
        }


        // 建立一個 Vue 實例或 "ViewModel"， 它鏈接 View 與 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>
</html>

2、MVVM 雙向數據綁定:

<div id="app"> 
  <p>{{ message }}</p>
  <input v-model="message">
</div>

3、vue路由

原理一：History API (..?x=6);

原理二：hash (..#/home ;

相似：輪播插件（Swiper）；
通常用於移動app頁面跳轉；github

<template>
        <div id="app">
            <h1>Hello App!</h1>
            <ul>
                <!-- 使用 router-link 組件來導航. -->
                <!-- 經過傳入 `to` 屬性指定連接. -->
                <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->           
                <li><router-link to="/foo">Go to Foo</router-link></li>
                <li><router-link to="/bar">Go to Bar</router-link></li>         
            <!-- 路由出口 -->
            <!-- 路由匹配到的組件將渲染在這裏 -->
            </ul>       
            <router-view   ></router-view>
        </div>
    <template>
    <script>
          // 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
          // 1. 定義（路由）組件。
          // 能夠從其餘文件 import 進來
       const Foo = {
            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
            data: function() {
                return {
                    msg: 'Hello, vue router!'
                    }
                }
            };
        const Bar = {
                template: '<div><h1>About</h1><p></div>'
         }
            // 2. 定義路由
            // 每一個路由應該映射一個組件。 其中"component" 能夠是
            // 經過 Vue.extend() 建立的組件構造器，
            // 或者，只是一個組件配置對象。
            // 咱們晚點再討論嵌套路由。
        const routes = [{
                path: '/foo',
                component: Foo
            }, {
                path: '/bar',
                component: Bar
        }]
            // 3. 建立 router 實例，而後傳 `routes` 配置
            // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
        const router = new VueRouter({
                routes // （縮寫）至關於 routes: routes
        })
            // 4. 建立和掛載根實例。
            // 記得要經過 router 配置參數注入路由，
            // 從而讓整個應用都有路由功能
        const app = new Vue({
                router
        }).$mount('#app')
            // 如今，應用已經啓動了！
    </script>

<style scoped>

<style>