Vue的基礎使用

Vue的介紹

漸進式的JavaScript框架

vue           react            angualr

做者:尤雨溪    facebook         谷歌公司


文檔:中文  建議:若是你想學好vue  
1.看視頻 初步的瞭解vue 2.學vue的課 時刻看官網文檔 https://cn.vuejs.org/

前端框架和庫的區別

功能上的不一樣

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

art-template庫：模板引擎渲染，高性能的渲染DOM    (咱們後端的一種模板  跟python的模板相似)

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

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

代碼上的不一樣

通常使用庫的代碼，是調用某個函數或者直接使用拋出來的對象，咱們本身處理庫中的代碼。
通常使用框架，其框架自己提供的好的成套的工具幫咱們運行咱們編寫好的代碼。

框架的使用

• 初始化自身的一些行爲
• 執行你所編寫的代碼
• 釋放一些資源

nodejs

1. 去官網https://nodejs.org/en/download/ 下載 安裝(傻瓜式安裝)

2. 打開終端 cmd : 執行node -v 若是出現版本號，證實安裝node成功 ，跟安裝python雷同

3. 下載完node以後，會自帶包管理器 npm，比如 是python中 pip3包管理器。pip3 install xxx

4. 使用npm

1.要初始化npm的項目 :

npm init --yes 自動生成一個package.json文件

```javascript
{

    "name": "vue_lesson",

    "version": "1.0.0",

    "description": "這是個人vue的第一個項目",

    "main": "index.js",

    "scripts": {

      "test": "echo "Error: no test specified" && exit 1"

    },

    "author": "mjj",

    "license": "ISC",

    "dependencies": {

      "vue": "^2.5.16"

    }

  }

```
2.下載依賴包

npm install vue --save
npm install jquery --save

3.卸載包 npm uninstall vue --save

4.下載全部的依賴包 npm install

vue的起步

• 引包:
• 建立實例化對象

    <div id="app">
        <h3>{{username}}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
        // 1.建立vue實例化對象
        // 參數
        var app = new Vue({
            el:"#app",
            // 全部的數據都放在數據屬性中
            data:{
               username:'張亞飛' 
            }
        })
    
    </script>