Vue入门（一）

kong7906928

已于 2024-07-28 15:53:16 修改

阅读量338

点赞数 3

分类专栏：前端文章标签： vue.js javascript 前端

于 2024-07-25 17:13:45 首次发布

本文链接：https://blog.csdn.net/kong7906928/article/details/140694055

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、Vue介绍

- Vue是一套构建用户界面的渐进式前端框架。

渐进式框架：简单的来说你可以将Vue作为你的应用一部分嵌入其中，代理更丰富的交互体验。就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性

        - 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
        - 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
        - 特点
                  易用：在有HTMLCSSJavaScript的基础上，快速上手。
                  灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
                  性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

二、Vue详解

- Vue是一套构建用户界面的渐进式前端框架。
- Vue的程序包含视图和脚本两个核心部分。
- 脚本部分
- Vue核心对象。
- 选项列表
- el：接收获取的元素。
- data：保存数据。
- methods：定义方法。
- 视图部分
- 数据绑定：{{变量名}}

三、入门案例

入门案例一：

使用步骤：

1. 下载和引入vue.js文件。
2. 编写入门程序。
视图：负责页面渲染，主要由HTML+CSS构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        {{msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });
</script>
</html>

入门案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入门案例</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
        el:"#div",
        data:{
            name:"张三",
            classRoom:"班级1"
        },
        methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

    //定义打招呼方法
    function hi(){
        vm.study();
    }

    //定义修改班级
    function update(){
        vm.classRoom = "班级2";
    }
</script>
</html>

四、入门案例总结

         - Vue是一套构建用户界面的渐进式前端框架。
        - Vue的程序包含视图和脚本两个核心部分。
        - 脚本部分
          - Vue核心对象。
          - 选项列表
                  - el：接收获取的元素。
                  - data：保存数据。
                - methods：定义方法。
        - 视图部分
                  - 数据绑定：{{变量名}}

es6新语法：
        定义变量：
                var定义的变量具有作用域问题，以后不使用
                let定义的变量没有作用域问题。