前置准备

  • 要有前端三件套基础 html + js + css
  • 要有一台电脑和一个大脑 (要去练习的!)
  • 还要会做笔记 笔记非常主要哦

Vue 介绍概述

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架

以上为官网的介绍

vue是属于一个轻量级的前端框架,它可以做到响应式的页面内容,可以根据用户的修改立马给出反馈

vue主要关注视图层 是因为有一个框架 :MVVM 这也是vue的核心思想

那什么是MVVM呢 概括的说就是 Model View ModelView

Model:数据 View:视图 ModelView:数据和视图

vue呢就是将数据层 和视图层 转换为 数据视图层 也就是将这两个部分整合起来

可以理解为数据都写在一个地方 视图都写在一个地方,而vue就是接受到这些数据和视图,然后将他们对应的整合起来并且解析到页面上去

vue还有一个特点就是拥有一个虚拟DOM 不需要频繁的操作DOM

在虚拟DOM中 会使用一个叫做 diff算法 的方式来比较元素的变化和大小 避免重复解析相同的元素

Vue入门

导包

程序员的开始 一定是Hello world (但是官网居然是hello vue)😕

首先我们去引入一个vue包

可以在线引入也可以引入下载下来后离线的包

我这里使用离线的vue包:

<script src="../js/vue.js"></script>

这里使用的是完整版的vue.js 还有一个精简版的vue.js.min

它们两个的区别在于:

完整版的vue有报错提示和开发者工具使用调试 ,而精简版的vue去除了这些

所以在学习测试环境 我们使用完整版的vue

等我们完成了项目准备上线项目后 就使用精简版的vue

编写代码

导包完了以后 我们就可以正式的开始写vue的代码了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识VUE</title>
    <!-- 引入VUE -->
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>

</body>
    
    <script>
        Vue.config.productionTip = false;
        const x = new Vue({
            el: '#root',
            data:{
                name:'MianJu'
            }
        });
    </script>

</html>

我们来分析一下这些 html代码(我们不是学的vue吗😅)

  • 首先在body框中 我们声明了一个 id为root的 div块

  • 并且在其中写了一个 h1 标签 其中写了一个我们从来没见过的语法 {{xxx}}

    • 这个是vue的语法 它的名字叫做 插值语法 {{name}}中的name 就是对应的data中的name的值
    • 这个地方会根据name的值随着变化 有个监控的效果 如果name更改了页面上的{{name}} 部分就会随着立马更改
  • 在new Vue中 对应传入的配置项的话有多种

    • el:绑定对应的一个块元素 一个vue实例只能绑定一个el

    • data:对应的vue中所需要管理的数据内容 有两种方式声明 此处使用的是对象式

      • 对象式:使用对象的方式来声明data中的所有数据key与value

        例如 {name:'MianJu',sex:'man'}

      • 函数式:使用函数返回值的方式来声明data中的数据

        例如

        data(){
            return {
                name:'MianJu',
                sex:'man'
            }
        }
        
      • 在后面的组件中 只能使用函数式来声明data

当然Vue不止这点配置项,后面会跟着学习衍生出更多的配置项😃

上一篇 下一篇