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>