• 测开 | Vue速查知识点

    文章目录

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    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">链接1a>

    • 1
    <a :href="url">链接2a>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

      • vue对象的data属性中的数据变化，视图展示会一起变化
      • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

      data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    表单项标签：

    1. ：用于创建一个表单输入框，可以输入文本、密码、日期、数字等。