Sintaxis básica de Vue3

Mobile 2023-07-21 11:21:29 views: null

tu yuxi

Directorio de artículos

prefacio

提示：这里可以添加本文要记录的大概内容：

Hay varias razones para aprender el marco front-end Vue:

  1. Vue es un marco frontal liviano que es fácil de aprender y usar;
  2. Vue tiene documentación completa y soporte comunitario, lo que facilita encontrar soluciones a los problemas;
  3. Vue utiliza programación por componentes, que puede ayudarlo a administrar y organizar mejor su código;
  4. Vue tiene un rico ecosistema, que incluye una gran cantidad de componentes y complementos de terceros, que pueden ayudarlo a desarrollar aplicaciones más rápidamente;
  5. Vue tiene un buen desempeño en el desarrollo de terminales móviles y puede ayudarlo a crear rápidamente una interfaz de usuario receptiva;
  6. Vue también funciona bien en proyectos a gran escala y puede satisfacer necesidades de desarrollo exigentes.

El enfoque central del desarrollo de Vue: los cambios de datos
simplifican la programación DOM

提示：以下是本篇文章正文内容，下面案例可供参考

Marco MVVM

inserte la descripción de la imagen aquí

Conoce Vue

Dirección de referencia en línea de vue.js (dirección de importación oficial de vue):

<script src="https://unpkg.com/vue@next"></script>

Aquí hay un ejemplo de cómo escribir una aplicación simple "Hello World" usando Vue.js:

  1. Importar archivo Vue.js
  2. Para crear un objeto de instancia vue, debe pasar un objeto de configuración (el más importante: datos)
  3. Monte el objeto de instancia vue creado en una marca en la vista (sintaxis CSS vm.mount('#xxx'))
  4. Use la sintaxis de interpolación dentro del div más grande

[Código de ejemplo]:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 4.输入框的数据改变，同步到title（指明h1内容就是title内容）插值语法 -->
        <h1>{
    
    {
    
    title}}</h1>
    </div>
</body>
<!-- 1.引入vue js文件（这里可以替换成网页） -->
<script src="./js/vue3.js"></script>

<script>
    // 2.创建vue实例对象，需要传入配置对象
    // 配置对象中需要指定若干个配置项 data代表数据配置项
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                title: 'Hello World'
            }
        },
    })

    // 3.将创建的vue实例对象，挂载到视图中某个标记上
    vm.mount('#app')
    // css选择器思想
</script>
</html>

Efecto de salida:
inserte la descripción de la imagen aquí
lo anterior es un enlace único y lo siguiente es un enlace bidireccional

<body>
    <div id="app">
        <!-- 4.输入框的数据改变，同步到title（指明h1内容就是title内容）插值语法 -->
        <h1>{
    
    {
    
    title}}</h1>
        <input type="text" v-model="title">
    </div>
</body>

Efecto de salida:
inserte la descripción de la imagen aquí
cambie el contenido en el cuadro de entrada, y el contenido de h1 arriba también cambiará en consecuencia
inserte la descripción de la imagen aquí

Instrucción de representación de texto v-text

directiva de texto v:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-text="x">
        </div>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                x: '<h1>xxx</h1>'
            }
        },
    })
    vm.mount('#app')
</script>
</html>

Efecto de salida:
escriba el contenido como texto sin formato.
inserte la descripción de la imagen aquí
Cambie el texto v a la sintaxis de interpolación:

<body>
    <div id="app">
        <div>
            {
    
    {
    
    x}}
        </div>
    </div>
</body>

El efecto es el mismo
inserte la descripción de la imagen aquí
v-text modificar el atributo innerText v-html modificar el atributo innerHtml
v-text es equivalente a { {sintaxis de interpolación}}

directiva de vinculación de atributos

Puede vincular dinámicamente el valor de una propiedad.
Puede vincular el atributo de clase de un componente a un atributo de datos en la instancia de Vue para lograr un control de estilo dinámico

enlace dinámico de atributo de título

De manera similar a la vinculación de los atributos de clase y estilo, a través del comando v-bind, podemos vincular el atributo de título del elemento con el atributo de datos en la instancia de Vue para realizar la vinculación dinámica. Cuando el atributo de datos vinculados cambia, el valor del atributo de título también se actualizará dinámicamente en consecuencia, realizando así la vinculación dinámica.

[Código de ejemplo]:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a :href="address">跳转</a>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                address:'https://rej177.blog.csdn.net/article/details/131444680'
            }
        },
    })

    vm.mount('#app')
</script>
</html>

resultado de salida
inserte la descripción de la imagen aquí

Enlace dinámico de atributo de clase

Se pueden vincular uno o más nombres de clase a los atributos de datos en la instancia de Vue. Cuando el valor del atributo de datos cambia, el nombre de la clase también se actualizará dinámicamente.

[Código de ejemplo]:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
    
    
            color: aqua;
        }
        .two{
    
    
            color: yellowgreen;
        }
        .three{
    
    
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p :class="className">杰瑞</p>
        <p :class="[className,className1]">汤姆</p>
        <p :class="{one: flag}">斯派克</p>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                className: 'two',
                // 改成one变成湖绿色
                // className: 'one',
                // 多个属性配置中间加逗号分割
                className1: 'three',
                flag: true,
                // true生效，false不生效
            }
        },
    })

    vm.mount('#app')
</script>
</html>

Efecto de salida:
inserte la descripción de la imagen aquí

enlace dinámico de atributo de estilo

Uno o más atributos de estilo se pueden vincular a los atributos de datos en la instancia de Vue. Cuando el valor del atributo de datos cambia, el atributo de estilo también se actualizará dinámicamente

[Código de ejemplo]:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p :style="{textAlign: a,backgroundColor: b}">二哈喇子！</p>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                a: 'center',
                b: 'pink'
            }
        },
    })

    vm.mount('#app')
</script>
</html>

Efecto de salida:
inserte la descripción de la imagen aquí

Enlace de evento @nombre de evento

La función ejecutada por el evento en Vue debe escribirse en el elemento de configuración de métodos

Si desea acceder a los datos configurados en el elemento de configuración de datos en el cuerpo de la función de métodos, debe agregar este prefijo.

[Código de ejemplo]:

Simule los datos de suma y resta del carrito de compras
inserte la descripción de la imagen aquí

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- Vue开发两个最基本的最重要的配置项是 data 和 methods  -->
    <!-- Vue开发核心的关注点：数据的变化 -->
    <div id="app">
        <button @click="minus">-</button>
        {
    
    {
    
    num}}
        <button @click="plus">+</button>
        <!-- 事件绑定是 v-on事件名 简写成：@事件名 -->
        <div @click="b" style="width: 200px;height: 200px;border: 1px solid red;">
            <div @click.stop="a" style="width: 50px;height: 50px;background-color: yellow;"></div>
        </div>
    </div>
</body>
<script src="../js/vue3.js"></script>
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                num: 1
            }
        },
        // Vue中事件执行的函数，必须编写在methods配置项中
        methods: {
    
    
            // methods中定义的函数，function可以省略
            plus: function (event) {
    
    
                event.preventDefault()
                // methods函数体中想要访问data配置项中配置的数据，必须加this.前缀
                this.num++
            },
            minus: function (event) {
    
    
                event.preventDefault()
                if (this.num > 0) {
    
    
                    this.num--
                }
            },
            a: function () {
    
    
                console.log('点击子标记')
            },
            b: function () {
    
    
                console.log('点击父标记');
            }
        },
    })
    vm.mount('#app')

</script>

</html>

Efecto de salida:
inserte la descripción de la imagen aquí

El código anterior es una aplicación básica de Vue que implementa un contador y un elemento div anidado con un elemento secundario dentro. Aquí hay una explicación detallada del código:

Este código es una página básica HTML + Vue.js, que contiene botones más y menos y un pequeño cuadro amarillo que rebota.

Los pasos principales de esta página son los siguientes:

  1. Use etiquetas en el encabezado de la página <script>para importar la biblioteca Vue.js.

  2. <body>Agregue una etiqueta a las etiquetas de la página <div>con un valor de atributo de ID de "aplicación".

  3. Agregue dos botones en esta <div>etiqueta, a saber, "+" y "-", y vincule las funciones de procesamiento de eventos correspondientes más y menos.

  4. <div>Agregue un cuadrado amarillo que rebota a esta etiqueta, que tiene un padre y un hijo. Podemos observar el efecto del burbujeo de eventos y evitar el burbujeo vinculando eventos de clic del mouse a estos dos elementos.

  5. Use la etiqueta en la parte inferior de la etiqueta <script>para definir una instancia de Vue vm y defina el atributo de datos y el método de métodos en la instancia.

  6. Solo hay una variable numérica num en el atributo de datos, que representa el valor numérico actual.

  7. El método de métodos contiene cuatro funciones más, menos, a y b, que se utilizan para aumentar el valor, disminuir el valor, generar la etiqueta secundaria de clic y generar la etiqueta principal de clic.

  8. Use vm.mountel método para montar la instancia de Vue en el elemento de la aplicación en la página.

Cuando el usuario hace clic en los botones más y menos o en los cuadrados pequeños de la página, la instancia de Vue ejecutará la función correspondiente para cambiar los datos y volverá a representar los datos modificados en la página. Al mismo tiempo, también puede ver el efecto del burbujeo de eventos y el burbujeo de bloqueo.

Directivas de representación condicional

Las instrucciones de representación condicional se refieren a las instrucciones que determinan si se deben representar los nodos DOM de acuerdo con las condiciones de los marcos front-end (como Vue, React, etc.). En Vue, las instrucciones de representación condicional incluyen v-if y v-show:

v-si

La directiva v-if agregará o eliminará nodos DOM según el valor de la expresión (verdadero o falso).Si el valor es falso, el nodo se eliminará del DOM; si el valor es verdadero, el nodo se agregará al DOM.
La ventaja de esta directiva es que puede guardar la representación de los nodos DOM, pero la desventaja es que todo el nodo se volverá a representar cuando se cambie la condición.

[Código de ejemplo]:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="isShow">条件渲染</div>
    <div v-if="price<=800">价格太贵了，买不起</div>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        // 显示的值为true时会显示出来
        isShow: true,
        // 默认不显示，只有price<=800时会显示
        price: 900
      }
    },
  })
  vm.mount('#app')
</script>
</html>

v-si 和 v-mostrar

v-ify v-show diferencia:

  1. v-if es la representación condicional real, y la implementación oculta es eliminar directamente la marca dinámicamente
  2. v-show es para controlar la visualización y ocultación de la marca modificando el estilo de visualización de la marca
  3. v-show es muy eficiente. Si es necesario cambiar un marcador con frecuencia para mostrar el estado oculto, se recomienda usar v-show

[Código de ejemplo v-if]:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="flag">hello world</div>
    <button @click="change">切换</button>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        flag: true
      }
    },
    methods: {
    
    
      change(){
    
    
        this.flag=!this.flag
      }
    },
  })
  vm.mount('#app')
</script>
</html>

Por favor agregue una descripción de la imagen
[Código de ejemplo v-show]:
reemplaza la décima línea con <div v-if="flag">hello world</div>v-show
Por favor agregue una descripción de la imagen

v-otro 和 v-otro-si

Este ejemplo también presenta el archivo Vue 3 JS vue3.js y usa vm.mount para montar la instancia de Vue <div id="app">en todas partes , de modo que Vue pueda monitorear y responder a los cambios de datos y actualizar dinámicamente el contenido de la página.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="type==1">A</div>
    <div v-else-if="type==1">B</div>
    <div v-else>C</div>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        type: 1
      }
    },
  })
  vm.mount('#app')
</script>
</html>

Si el tipo es igual a 1, se muestra el texto "A",
si el tipo no es igual a 1, pero es igual a 1, se muestra el texto "B",
si el tipo no es ni 1 ni 2, se muestra el texto "C".

recorrer las instrucciones

En Vue, puede usar la instrucción v-for para recorrer una matriz u objeto y generar los elementos correspondientes.

<div v-for="(item, index) in items">
  {
    
    {
    
     index }} - {
    
    {
    
     item }}
</div>

Entre ellos, items es la matriz u objeto a recorrer, item representa el elemento del ciclo actual e index representa el índice del elemento actual.

Si es una matriz, el índice es el subíndice del elemento actual;
si es un objeto, el índice es el nombre clave del elemento actual.

Además de matrices y objetos, también puede recorrer números, por ejemplo:

<div v-for="i in 5">
  {
    
    {
    
     i }}
</div>

El código anterior generará 5 elementos div que muestran los números del 1 al 5 respectivamente.

[Código de ejemplo de instrucción de recorrido de bucle]:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="game in arr">{
    
    {
    
    game}}</li>
    </ul>
  </div>
</body>
<script src="../js/vue3.js"></script>
<script>
  let vm = Vue.createApp({
    
    
    data() {
    
    
      return {
    
    
        arr: ['我的世界','英雄联盟','CS：GO']
      }
    },
  })
  vm.mount('#app')
</script>
</html>

Efecto de salida:
inserte la descripción de la imagen aquí
[Ejemplo] Operación de eliminación de la lista de productos de Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <style>
        table{
    
    
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #298cce;
            margin-top: 20px;
        }
        th, td{
    
    
            padding: 10px;
            text-align: center;
            border: 1px solid #298cce;
        }
        th{
    
    
            background-color: #f2f2f2;
        }
        tr:nth-child(even){
    
    
            background-color: #f2f2f2;
        }
        button{
    
    
            background-color: #298cce;
            color: #fff;
            border: none;
            padding: 6px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
   <div id="app">
        <table>
            <caption><h2>商品列表</h2></caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>成色</th>
                    <th>售后服务</th>
                    <th>连接方式</th>
                    <th>套餐类型</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(goods, index) in goods">
                    <td>{
    
    {
    
    index+1}}</td>
                    <td>{
    
    {
    
    goods.brand}}</td>
                    <td>{
    
    {
    
    goods.model}}</td>
                    <td>{
    
    {
    
    goods.fineness}}</td>
                    <td>{
    
    {
    
    goods.after}}</td>
                    <td>{
    
    {
    
    goods.connection}}</td>
                    <td>{
    
    {
    
    goods.type}}</td>
                    <td>{
    
    {
    
    goods.price}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
   </div> 
</body>
<script src="../js/vue3.js"></script>
<!-- 代替vue.js网页 -->
<script>
    let vm = Vue.createApp({
    
    
        data() {
    
    
            return {
    
    
                goods: [
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '一年质保',
                        connection: '有线/无线',
                        type: '基础版',
                        price: '500',
                    },
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '两年质保',
                        connection: '有线/无线',
                        type: '进阶版',
                        price: '600'
                    },
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '一年质保',
                        connection: '无线',
                        type: '战损版',
                        price: '500'
                    },
                    {
    
    
                        brand: 'OPES',
                        model: 1.0,
                        fineness: '全新',
                        after: '两年质保',
                        connection: '有线/无线',
                        type: '高级版',
                        price: '700'
                    },
                ]
            }
        },
        methods: {
    
    
            del(i){
    
    
                this.goods.splice(i,1)
            }
        },
    })
    vm.mount('#app')
</script>
</html>

Efecto de salida:
inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/rej177/article/details/131444680
Recomendado
Clasificación
Diario
Más
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)

Code World

© 2018 codetd.com