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>