著作權宣告

本文原創作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

Vue概述

Vue是一個漸進式的JavaScript框架，

官方網站

https://cn.vuejs.org/

在這里插入圖片描述

主要特征

Vue主要特征如下：

易用

以原生HTML、CSS、JavaScript為基礎，入門簡易，

靈活

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

高效

Vue運行時所需空間較小，性能優異，

官方檔案

https://cn.vuejs.org/v2/guide/
在這里插入圖片描述

入門示例

在此，以示例形式詳細介紹Vue框架最簡單的使用，

開發環境搭建

首先，我們來搭建開發環境

創建專案

使用IDEA以Maven方式創建專案Vue01
在這里插入圖片描述

調整專案

創建好專案之后，我們對現有專案略微調整以便于前端開發，

要點概述：

1、在main下創建webapp檔案夾
2、在webapp下創建vue檔案夾
3、在vue檔案夾下創建js檔案夾

引入Vue檔案

在js檔案夾中引入Vue檔案，

要點概述：

1、vue.js為開發環境版本
2、vue-min.js為生成環境版本

在這里插入圖片描述

頁面開發

在vue檔案夾下創建前端頁面001HelloWorld.html，并在頁面中引入vue檔案，

要點概述：

1、一個頁面中只能存在一個Vue實體，不能創建多個vue實體
2、vue實體中元素屬性(el屬性)代表vue實體的作用范圍
3、vue實體中data屬性用于為當前vue實體系結自定義資料
4、在vue實體作用范圍內可以使用{{data屬性中變數名}} 獲取data中的變數名對應屬性值
5、使用{{}}進行data中資料獲取時,可以在{{}}中進行算數運算、邏輯運算以及呼叫相關型別的相關方法
6、vue實體中el屬性可以書寫任何css選擇器，但是，推薦使用id選擇器；因為一個vue實體只能作用于一個作用范圍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函式
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟"
                }
            });
        }
    </script>
</head>
<body>
    <div id="div1">
        <h1>{{name}}</h1>
        <span>{{name}}</span>
        <h1><span>{{name}}</span></h1>
    </div>
</body>
</html>