首页 > 其他分享 >Vue基本使用

Vue基本使用

时间:2024-08-21 13:28:32浏览次数:11  
标签:基本 vue 标签 绑定 视图 Vue 使用 data

一、什么是Vue

通过我们学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求 从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。正因为这种开发流程,所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想,即让我们开发者更加关注数据,而非数据绑定到视图这种机械化的操作。

MVVM:其实是Model-View-ViewModel的缩写,有3个单词,具体释义如下:

  • Model: 数据模型,特指前端中通过请求从后台获取的数据

  • View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据

  • ViewModel: 数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上

 

基于上述的MVVM思想,其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分,我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作,让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢?可以参考下图对比:  

在更加复杂的dom操作中,vue只会变得更加的简单!在上述的代码中,我们看不到之前的DOM操作,因为vue全部帮我们封装好了。

Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。

基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。

官网: https://v2.cn.vuejs.org/

Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

 二、快速入门

第一步:在VS Code中创建名为12. Vue-快速入门.html的文件,并且在html文件同级创建js目录,将资料/vue.js文件目录下得vue.js拷贝到js目录,(这个vue.js文件可以从官网下载)如下图所示:

第二步:然后编写script标签来引入vue.js文件,代码如下:  

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

第三步:在js代码区域定义vue对象,代码如下:

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

在创建vue对象时,有几个常用的属性:

  • el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值,规则和css选择器一样

  • data: 用来定义数据模型

  • methods: 用来定义函数。这个我们在后面就会用到

 第四步:在html区域编写视图,其中{{}}是插值表达式,用来将vue对象中定义的model展示到页面上的

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

浏览器打开效果如图所示:

完整代码如下

<!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>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

{{}}用于数据展示,由于vue的双向数据绑定,文本输入框的值改变,展示的值也会改变。  

 三、Vue指令

在上述的快速入门中,我们发现了html中输入了一个没有学过的属性v-model,这个就是vue的指令

指令:HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义。例如:v-if,v-for…

在vue中,通过大量的指令来实现数据绑定到视图的,所以接下来我们需要学习vue的常用指令,如下表所示:

指令作用
v-bind为HTML标签绑定属性值,如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else
v-else-if
v-show根据条件展示某元素,区别在于切换的是display属性的值
v-for列表渲染,遍历容器的元素或者对象的属性

 1.v-bind

v-bind: 为HTML标签绑定属性值,如设置 href , css样式等。当vue对象中的数据模型发生变化时,标签的属性值会随之发生变化。

在元素的属性前面添加v-bind:,或简写成  :  

这样子标签元素的属性的值可以不用写死,通过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-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        //简写
        <a :href="url">链接2</a>
        <input type="text" >

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

浏览器打开,2个超链接都可以点击,然后跳转到百度去!效果如图所示:

2.v-model  

v-model: 在表单元素上创建双向数据绑定。什么是双向?

  • vue对象的data属性中的数据变化,视图展示会一起变化

  • 视图数据发生变化,vue对象的data属性中的数据也会随着变化。

data属性中数据变化,我们知道可以通过赋值来改变,但是视图数据为什么会发生变化呢?只有表单项标签!所以双向绑定一定是使用在表单项标签上的。  

示例代码 

  <!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-指令-v-bind</title>
      <script src="js/vue.js"></script>
  </head>
  <body>
      <div id="app">
  
          <a v-bind:href="url">链接1</a>
          <a :href="url">链接2</a>
  
          <input type="text" v-model="url">
  
      </div>
  </body>
  <script>
      //定义Vue对象
      new Vue({
          el: "#app", //vue接管区域
          data:{
             url: "https://www.baidu.com"
          }
      })
  </script>
  </html>

浏览器效果

打开浏览器,我们修改表单项标签,发现vue对象data中的数据也发生了变化,如下图所示:

通过上图我们发现,我们只是改变了表单数据,那么我们之前超链接的绑定的数据值也发生了变化,为什么?

就是因为我们双向绑定,在视图发生变化时,同时vue的data中的数据模型也会随着变化。那么这个在企业开发的应用场景是什么?

 双向绑定的作用:可以获取表单的数据的值,然后提交给服务器

3.v-on

v-on: 用来给html标签绑定事件的。需要注意的是如下2点

  • v-on语法给标签的事件绑定的函数,必须是vue对象种声明的函数

  • v-on语法绑定事件时,事件名相比较js中的事件名,没有on

例如:在js中,事件绑定demo函数

<input οnclick="demo()">

vue中,事件绑定demo函数

<input v-on:click="demo()">

测试代码 

<!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-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

4.v-if和v-show

指令描述
v-if条件性的渲染某元素,判定为true时渲染,否则不渲染
v-if-else
v-else
v-show根据条件展示某元素,区别在于切换的是display属性的值(none)

测试代码 

<!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-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

 浏览器效果

5.v-for

v-for: 从名字我们就能看出,这个指令是用来遍历的。其语法格式如下:

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

需要注意的是:需要循环那个标签,v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引,那么v-for指令遍历的语法格式如下:

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始,所以要表示序号的话,需要手动的加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>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
     <div id="app">
     <div v-for="addr in addrs">{{addr}}</div>
     <hr>
     <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
     </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

浏览器打开,呈现如下效果:

6.案例

需求

 完整代码

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

四、Vue生命周期

 vue的生命周期:指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示:

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

其中我们需要重点关注的是mounted,其他的我们了解即可。

mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

mounted钩子方法使用示例代码:

<!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-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

标签:基本,vue,标签,绑定,视图,Vue,使用,data
From: https://blog.csdn.net/2202_75483664/article/details/141370542

相关文章

  • 在Vue中的三种不同的模块导出方式:分别暴露、统一暴露和默认暴露。
     一,分别暴露:通过在模块中使用export关键字来分别导出多个变量、函数或组件。例如:test.jsexportconstperson={name:"bruce",age:33}exportfunctiongetPerson(){console.log(11)}在另一个模块中,可以使用解构赋值来导入这些分别暴露的变量、函数或组件:import......
  • 使用Mybatis 的PageHelper插件实现分页查询功能
    Mybatis提供了一个分页插件PageHelper,它会帮助我们自动完成分页和获取总数量的操作,可以方便实现分页查询。第一步,在pom.xml文件引入PageHelper依赖。<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-s......
  • ssm城投公司企业人事管理系统设计与实现+vue
    文章目录目录文章目录论文目录项目介绍开发环境系统实现论文参考论文目录摘 要Abstract第1章 绪论1.1 课题背景1.2课题意义1.3研究内容第2章 开发环境与技术2.1Java语言2.2 MYSQL数据库2.3IDEA开发工具2.4SSM框架第3章 系统分析......
  • MySQL 禁止使用 HASH 索引
    在MySQL中,虽然InnoDB存储引擎默认使用的是BTREE索引,但它也支持一种特殊的自适应哈希索引(adaptivehashindex,AHI),这是InnoDB自动管理和使用的,用户无法直接控制。然而,对于内存存储引擎MEMORY(之前称为HEAP),MySQL确实允许用户显式地创建HASH索引。如果你想要在MEMORY表上使用HASH索......
  • QT+OpenGL 使用VAO、VBO、EBO结合绘制一个正方形
    一、概述需求:绘制一个正方形,可以控制正方形的颜色、可以切换正方形为线框模式/填充模式绘制流程:1.定义一个顶点着色器和片元着色器shader2.Qt创建一个Widget并继承QOpenGLWidget、QOpenGLFunctions,并重写initializeGL()、resizeGL(w,h)、pai......
  • 车载以太网交换机入门基本功(3)—VLAN 转发
        在《车载以太网交换机入门基本功(2)》中提到,报文通过携带Tag字段,表明报文所属的VLAN。本文将介绍携带Tag报文在VLAN下的转发过程。而在实际转发过程中,交换机的端口属性起到关键作用。交换机端口属性    交换机的端口属性包括三大属性:VID、PVID、Tag/Untag。VI......
  • Python 开发中,使用bcrypt 或 Passlib 对系统用户密码进行哈希和验证处理
    在设计一个系统的时候,肯定都有会有用户身份认证的问题,一般对用户校验的时候,都是对用户存在数据库总的密码哈希值进行判断,从而避免密码泄露和反向解密,那么在Python开发中,我们可以引入bcrypt或Passlib对系统用户密码进行哈希和验证处理,以及介绍使用其他类库实现常规加解密处理操......
  • 亲测好用,吐血整理 ChatGPT 3.5/4.0 新手使用手册~ 【2024.08 更新】
    废话不多说,直接分享正文~以下是小编为大家搜集到的最新的ChatGPT国内站,各有优缺点。1、AIPlus(稳定使用)推荐指数:⭐⭐⭐⭐⭐     yixiaai.com该网站已经稳定运营了1年多了。2023年3月份第一批上线的网站。网站支持GPT-3.5、4.0及4o、4omini模型,手机和电脑都能用......
  • 亲测好用,吐血整理 ChatGPT 3.5/4.0 新手使用手册~ 【2024.08.21 更新】
    现在人工智能很强大,聊聊天、写论文、搞翻译、写代码、写文案、审合同、情感陪伴等,真是无所不能~本来以为ChatGPT早已普及了,没想到仍然有很多小伙伴还没用上。。。其实使用很简单,可以选通义、智谱、Deepseek等“83分”的国产大模型~国产大模型,平均80分左右~也可选国内的......
  • 使用sphinx自动提取python中的注释成为接口文档
    写好了代码,交付给他人使用的时候,查看代码固然可以了解各类和函数的功能细节,但接口文档能更方便的查找和说明功能。所以,一价与代码同步的接口文档是很有必要的。sphinx可以根据python中的注释,自动的生成接口文档,这样有利于保证文档和代码功能的同步。让我们来了解如何自动生......