测开 | Vue速查知识点

news2024/11/20 8:28:55

文章目录

- Vue知识
- - 1. Vue 概述
  - 2. Vue 代码格式
  - 3. Vue 指令
  - - 3.1 v-bind & v-model
    - 3.2 v-on
    - 3.3 v-if和v-show
    - 3.4 v-for
  - 4. 生命周期

Vue知识

1. Vue 概述

简介：
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
原理：
MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：
- Model: 数据模型，特指前端中通过请求从后台获取的数据
- View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
- ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

如图所示就是MVVM开发思想的含义：

1 - MVVM架构思想-2023-10-219:30:32.png

2. 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>
    <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"
        },
        methods:{
            
        }
    })
</script>
</html>

3. 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	列表渲染，遍历容器的元素或者对象的属性

3.1 v-bind & v-model

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定

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

<a v-bind:href="url">链接1</a>

<a :href="url">链接2</a>

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

v-model：在表单元素上创建双向数据绑定。什么是双向？
- vue对象的data属性中的数据变化，视图展示会一起变化
- 视图数据发生变化，vue对象的data属性中的数据也会随着变化。
data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：

<a v-bind:href="url">链接1</a>

<input type="text" v-model="url">

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

表单项标签：

<input>：用于创建一个表单输入框，可以输入文本、密码、日期、数字等。
<textarea>：用于创建一个多行文本输入框。
<select>：用于创建一个下拉选择框，用户可以从预定义的选项中选择一个或多个选项。
<checkbox>：用于创建一个复选框，用户可以从多个选项中选择一个或多个选项。
<radio>：用于创建一个单选按钮，用户可以从多个选项中选择一个选项。
<button>：用于创建一个按钮，用户可以点击执行特定的操作。
<submit>：用于创建一个提交按钮，用于提交整个表单内容。
<reset>：用于创建一个重置按钮，用于将表单内容重置为初始状态。
<label>：用于创建一个标签，用于描述表单字段的用途或说明。
<fieldset>：用于创建一个字段集，用于将相关的表单字段组合在一起。
<legend>：用于创建字段集的标题，描述字段集的内容。

4 - v-bind&v-model展览图-2023-10-312:22:49.png

3.2 v-on

指令	作用
v-on	用来给html标签绑定事件的

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

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

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

3 - v-on展览图-2023-10-311:03:07.png

3.3 v-if和v-show

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

v-if:

年龄<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>

<script>
    // 定义 Vue 对象
    new Vue({
        el: "#app",
        data: {
            age: 20
        }
    })
</script>

2 - v-if 展览图-2023-10-311:01:48.png

v-show:

年龄<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>

<script>
    // 定义 Vue 对象
    new Vue({
        el: "#app",
        data: {
            age: 20
        }
    })
</script>

2 - v-if 展览图-2023-10-311:01:48.png

3.4 v-for

指令	描述
v-for	列表渲染，遍历容器的元素或者对象的属性

格式：

<标签 v-for="变量 in 列表">{{变量名}}</标签>

<标签 v-for="(变量名,索引变量) in 列表">{{索引变量 + 1}} {{变量名}}</标签>

模板：

<div id="app">
	<div v-for="addr in addrs">{{addr}}</div>
	<hr>
	<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>

5 - v-for展览图-2023-10-313:00:43.png

4. 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为（钩子方法）。

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

Vue渲染流程：

1668867134683-2023-10-313:09:04.png

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

模板：

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