vue——介紹和使用

時間 2019-11-16

標籤 vue 介紹使用简体版

原文原文鏈接

1、vue介紹

　　vue官網說：Vue.js（讀音 /vjuː/，相似於 view）是一套構建用戶界面的漸進式的JavaScript框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。 javascript

一、漸進式的JavaScript框架

          Angular    React          Vue
做者      google公司  facebook公司   尤雨溪
組織方式   MVC        模塊化          模塊化
數據綁定   雙向綁定    單向綁定        雙向綁定
模板能力   強大        自由           自由
自由度    較小         大             較大
路由      靜態路由     動態路由       動態路由

二、前端框架和庫的區別

（1）功能上的不一樣

　　jquery庫：包含DOM(操做DOM)+請求，就是一塊功能的實現。html

　　art-template庫：模板引擎渲染，高性能的渲染DOM。前端

　　框架：大而全的概念，簡易的DOM體驗+請求處理+模板引擎。vue

　　在KFC的世界來看的話，庫就是一個小套餐，框架就是全家桶。java

（2）代碼上的不一樣

　　通常使用庫的代碼，是調用某個函數或者使用拋出來的對象，咱們本身處理庫中的代碼。node

　　通常使用框架，框架自己提供好的成套的工具幫咱們運行咱們編寫好的代碼。jquery

（3）框架的使用

　　1）初始化自身的一些行爲；git

　　2）執行你所編寫的代碼；github

　　3）釋放一些資源。ajax

三、關於漸進式和自底向上增量開發

　　咱們來看一下知乎的回答：知乎回答

　　總的來講，它給你提供足夠的optional，但並不主張不少required。

　　咱們常說：作減法比作加法難。我以爲一個框架若是是「漸進式」的，就意味着，它自己承擔了較難的作減法的部分，而留給它的使用者較簡單的作加法的部分。

　　就是說，在咱們用一個工具的時候，並非爲了用其中的某一個部分，而想辦法無視或者裁剪掉其餘部分（作減法），而是上手就能夠用上它的大多數功能，再在須要的時候引入它的官方或第三方插件（作加法）。

2、vuejs的優勢

1.易用

　　已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

2.靈活

　　不斷繁榮的生態系統，能夠在一個庫和一套完整框架之間自如伸縮。

3.高效

　　20kB min+gzip 運行大小
超快虛擬 DOM (虛擬dom的渲染速度要比咱們真實的dom渲染速度快)
最省心的優化

　　虛擬的DOM的核心思想是：對複雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操做。這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想

　　(1) 提供一種方便的工具，使得開發效率獲得保證

　　(2) 保證最小化的DOM操做，使得執行效率獲得保證

3、vue的使用

一、安裝

（1）兼容性

　　Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的瀏覽器。

（2）Vue Devtools插件

　　在使用 Vue 時，推薦在瀏覽器上安裝 Vue Devtools。它容許你在一個更友好的界面中審查和調試 Vue 應用。

（3）直接用<script>引入（推薦新手使用）

　　直接下載並用 <script> 標籤引入，Vue 會被註冊爲一個全局變量。

　　下載能夠選擇去npm下載或者去vue官網下載並引入：

（4）cdn引入

　　咱們推薦連接到一個你能夠手動更新的指定版本號：

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

　　能夠在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。

　　Vue 也能夠在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯後)。

　　確認瞭解不一樣構建版本並在你發佈的站點中使用生產環境版本，把 vue.js 換成 vue.min.js。這是一個更小的構建，能夠帶來比開發環境下更快的速度體驗。（開發環境使用vue.js，生產環境使用vue.min.js）

二、引入vue.js文件

　　這裏是開發環境，所以選用vue.js。

<body>
    <!--1.先引包-->
    <!--<script src="js/vue.js"></script>-->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">

    </script>
</body>

　　引入vue.js文件後，Vue被註冊爲一個全局的變量，是一個構造函數。在網站控制檯查看：

4、使用Vue實例化對象

一、建立vue實例對象

　　每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：

<body>
    <div id="app">
        <h3>{{title}}</h3>
        <p>{{msg}}</p>
    </div>
<script src="js/vue.js"></script>
<script>
    // 建立vue實例對象
    var app = new Vue({
        el: "#app",    // 元素
        // 全部的數據都放在數據屬性裏
        data: {
            title: "土豆",
            msg: "路飛"
        }
    })
</script>
</body>

　　輸出結果：

　　已經簡單的建立了第一個vue應用。渲染的數據的方式咱們也叫聲明式的渲染。如今數據和 DOM 已經被創建了關聯，全部東西都是響應式的。咱們要怎麼確認呢？打開你的瀏覽器的 JavaScript 控制檯 (就在這個頁面打開)，並修改 app.msg 的值，你將看到上例相應地更新。

二、模板語法

　　{{}}模板語法：主要做用是插值，不只能夠插變量，只要你能想到的插入均可以（if-else不能夠）。

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <!--字符串拼接-->
        <h3>{{msg + 'hello'}}</h3>
        <!--三目運算符-->
        <h3>{{1>2?"真的":"假的"}}</h3>
        <!--能夠插入字符串-->
        <h4>{{'helloworld'.split('').reverse().join('')}}</h4>
        <!--不能使用if-else-->
        <!--{{}}模板語法的設計，只是爲了簡單的運算-->
    </div>

    <!--1.先引包-->
    <!--<script src="js/vue.js"></script>-->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 2.建立vue實例化對象
        new Vue({
            el: '#app',  // 目的地
            data:{       // data屬性能夠是函數或對象
                msg: 'hello Vue'   // 數據屬性
            }
        })
    </script>
</body>

　　顯示效果：

注意：

　　1）data屬性能夠是一個函數也能夠是一個對象。msg是數據屬性。依靠數據驅動視圖（模板語法），將數據（msg）渲染到DOM（標籤也就是view）中。

　　2）模板語法中不能使用if-else。

　　3）Vue實例化對象後，這個對象中屬性前面都有前綴 $，主要是爲了跟咱們自定義的屬性區分。

三、app.$el對象問題

（1）app.$el對象等價於對應標籤全部內容

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <!--字符串拼接-->
        <h3>{{msg + 'hello'}}</h3>
        <!--三目運算符-->
        <h3>{{1>2?"真的":"假的"}}</h3>
    </div>

    <!--1.先引包-->
    <!--<script src="js/vue.js"></script>-->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 2.建立vue實例化對象
        var app = new Vue({    // 這樣定義，實例化有返回值
            el: '#app',  // 目的地
            data:{       // data屬性能夠是函數或對象
                msg: 'hello Vue',   // 數據屬性
            }
        });
        console.log(app);
        console.log(app.$el);
        console.log(app.$el === document.getElementById('app'));
    </script>
</body>

　　顯示效果：

（2）el和template的優先級問題

　　template的優先級要高於el，具體狀況以下所示：

　　1）當代碼只定義了el和模板語法時：

<body>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello指令系統',
            },
            //template:`<h4>{{msg}}</h4>>`
        })
    </script>
</body>

　　模板在app標籤下，效果以下所示：

　　2）當代碼也定義了template時：

<body>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello指令系統',
            },
            template:`<h4>{{msg}}</h4>>`
        })
    </script>
</body>

　　msg沒有渲染到el中，以下圖所示：

四、Vue應用的組成結構

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

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

1. vue-worker的介紹和使用
2. Vue過濾器的介紹和使用
3. Pug 介紹和在 Vue 中使用
4. vue slot的使用介紹
5. vue-cli使用介紹
6. Vue介紹和簡介
7. Keychain的介紹和使用
8. EGL 介紹和使用
9. RxJava介紹和使用
10. CountDownLatch的介紹和使用
更多相關文章...
• 網站主機介紹 - 網站主機教程
• Redis基本安裝和使用 - Redis教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Composer 安裝與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。