Vue简明实用教程(01)——Vue框架入门

Vue是一个渐进式的JavaScript框架。Vue主要特征如下：

谷哥的小弟

4128人浏览 · 2021-11-09 21:33:08

谷哥的小弟 · 2021-11-09 21:33:08 发布

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

Vue概述

Vue是一个渐进式的JavaScript框架。

官方网站

https://cn.vuejs.org/

在这里插入图片描述

主要特征

Vue主要特征如下：

易用

以原生HTML、CSS、JavaScript为基础，入门简易。

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

Vue运行时所需空间较小，性能优异。

官方文档

https://cn.vuejs.org/v2/guide/
在这里插入图片描述

入门示例

在此，以示例形式详细介绍Vue框架最简单的使用。

开发环境搭建

首先，我们来搭建开发环境

创建项目

使用IDEA以Maven方式创建项目Vue01
在这里插入图片描述

调整项目

创建好项目之后，我们对现有项目略微调整以便于前端开发。

要点概述：

1、在main下创建webapp文件夹
2、在webapp下创建vue文件夹
3、在vue文件夹下创建js文件夹

引入Vue文件

在js文件夹中引入Vue文件。

要点概述：

1、vue.js为开发环境版本
2、vue-min.js为生成环境版本

在这里插入图片描述

页面开发

在vue文件夹下创建前端页面001HelloWorld.html，并在页面中引入vue文件。

要点概述：

1、一个页面中只能存在一个Vue实例，不能创建多个vue实例
2、vue实例中元素属性(el属性)代表vue实例的作用范围
3、vue实例中data属性用于为当前vue实例绑定自定义数据
4、在vue实例作用范围内可以使用{{data属性中变量名}} 获取data中的变量名对应属性值
5、使用{{}}进行data中数据获取时,可以在{{}}中进行算数运算、逻辑运算以及调用相关类型的相关方法
6、vue实例中el属性可以书写任何css选择器。但是，推荐使用id选择器；因为一个vue实例只能作用于一个作用范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟"
                }
            });
        }
    </script>
</head>
<body>
    <div id="div1">
        <h1>{{name}}</h1>
        <span>{{name}}</span>
        <h1><span>{{name}}</span></h1>
    </div>
</body>
</html>

测试

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^