Vue框架学习篇(一)

所讲述的主要有以下三点① Vue基本结构② 数据的显示(普通标签和标签里面的属性值)③ 事件的绑定

SSS4362

3559人浏览 · 2023-02-07 20:39:29

SSS4362 · 2023-02-07 20:39:29 发布

Vue框架学习篇(一)

1 Vue的基本结构

1.1 示例代码

<!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>vue2的基本结构的演示</title>
    <!-- ①导入vue.js脚本文件 -->
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- ②准备div -->
    <div id="app">
        显示数据: {{msg}}
    </div>
    <!-- ③在script脚本中new一个Vue实例-->
    <script>
        var v=new Vue({
            el:"#app", //el是用于挂载元素 一般是用id选择器
            data:{
                msg:"Hello Vue2"
            }
        })
    </script>
</body>
</html>

1.2 运行截图

在这里插入图片描述

2 数据的显示

2.1 普通标签里面文字内容显示(v-text)

2.1.1 示例代码

<!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>vue2的数据展示</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 中间有中文,用单引号包起来,和内单外双的效果是一样的 -->
         <h3 v-text="'当前日期为: '+time"></h3>
    </div>
    <script>
        var v=new Vue({
            el:"#app",
            data:{
                time:"2023年2月7号"
            }
        })
    </script>
</body>
</html>

2.1.2 运行截图

在这里插入图片描述

2.2 标签属性赋值(:符号)

2.2.1 示例代码

<!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>vue2的数据展示</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
         <!-- .就是v-blind:冒号的缩写 -->
         <button :title="notice">登录按钮</button>
    </div>
    <script>
        var v=new Vue({
            el:"#app",
            data:{
                notice:"将于明日停服"
            }
        })
    </script>
</body>
</html>

2.2.2 运行截图

在这里插入图片描述

3 事件的绑定(@符号)

3.1 语法

①在对应标签里面写 @事件名="函数名()" 
   如@click="a()" 代表绑定是鼠标单击事件,单击事件的执行逻辑写在a方法里头
②在new Vue内部通过 methods:来书写,具体如下所示
 methods:{
 	//函数定义的第一种写法(推荐使用这种)
     方法名(){
     	//方法体内容;
     },
    //函数定义的第二种写法
    方法名:function(){
      //方法体内容;
    }
}

3.2 示例代码(通过点击不同按钮实现信息的展示和隐藏)

<!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>Vue2的事件的绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-show里面的内容为true则显示,为false则该标签隐藏 底层是display:none -->
         <h1 v-show="result">失败乃成功之母</h1>
         <button @click="a()">显示</button>
         <button @click="b()">隐藏</button>
    </div>
    <script>
        var v=new Vue({
            el:"#app",
            data:{
                result:false
            },
            methods:{
                //函数与函数之间用逗号隔开
                a(){
                  //this指向当前 
                  this.result=true
                },
                b(){
                  this.result=false
                }
            }
        })
    </script>
</body>
</html>

3.3 运行截图

3.3.0 没有点击时的界面

在这里插入图片描述

3.3.1 点击显示按钮后

在这里插入图片描述

3.3.2 点击隐藏按钮后

在这里插入图片描述

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport