[Vue] Sintaxis de plantilla, interpolación, instrucciones, filtros, propiedades calculadas y propiedades de monitoreo (incluidos casos prácticos como preguntas de entrevista y diseño de graduación) Parte 1

News 2023-10-05 06:36:07 views: null

I. Introducción

1. ¿Qué es la sintaxis de la plantilla?

La sintaxis de plantilla de Vue es una sintaxis para representar declarativamente componentes de Vue en HTML. Se basa en HTML y amplía HTML con una sintaxis de plantilla específica. Vue utiliza una interpolación de plantilla llamada sintaxis " Moustache " para vincular datos a elementos HTML.

En la sintaxis de la plantilla de Vue, puede usar llaves dobles ( { {}} ) para vincular datos a elementos HTML, de modo que el valor de los datos se reemplace dinámicamente en la ubicación correspondiente.

A continuación te haré una demostración con introducción a la gramática y ejemplos.

2. Interpolación

1. Texto

 { {mensaje}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>文本</h2>
    <p>{
   
   {msg}}</p>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'hello Vue.js'
            };
        }
    })
</script>
</html>

2.html

Utilice la directiva v-html para generar código html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>html</h2>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                htmlstr: '<h3 style="color:red;">这是一个v-html指令html代码</h3>'
            };
        }
    })
</script>

</html>

3. Atributos

          Los valores en los atributos HTML deben usar la directiva v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>vue中的属性</h2>
    <a v-bind:href="hrefstr">4399</a>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                hrefstr: 'https://www.4399.com/'
            };
        }
    })
</script>

</html>

Es un enlace aquí porque usé la etiqueta <a> para que pueda dar un salto.

4. Expresión

          Vue proporciona soporte completo para expresiones JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>表达式</h2>
    表达式:{
   
   {number + 1}}<br>
    截取：{
   
   {str.substring(0, 4).toUpperCase()}}<br>
    三元：{
   
   {ok ? 'yes' : 'no'}}

</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                number: 59,
                str: 'Java、python、php、C++',
                ok: false,
            };
        }
    })
</script>

</html>

       

5. Encuadernación de clase y estilo.

          Cómo utilizar:

                v-bind:class="expresión"

                v-bind:estilo="expresión"

          Tipo de expresión: cadena, matriz, objeto

He aquí un caso donde se combinan clase y estilo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
    .f30 {
        font-size: 30px;
        color: red;
    }
</style>
<body>
<div id="app">
    <h2>class、style绑定</h2>
    <b :class="msg3">class、style绑定</b>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg3: 'f30'
            };
        }
    })
</script>

</html>

3. Instrucciones y parámetros dinámicos.

Se refiere a propiedades especiales con el prefijo " v- ".

Instrucciones básicas:

         (v-si|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-mode）

1、v-si|v-otro|v-otro-si

Determinar si se representa el elemento en función del valor bool de la expresión posterior

        Sólo pueden ser elementos hermanos.

                 El elemento hermano anterior de v-else-if debe ser v-if

                 El elemento hermano anterior de v-else debe ser v-if o v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-if|v-else|v-else-if</p>
    分数：<input v-model="score"/>
    <div v-if="score>=90">大神</div>
    <div v-else-if="score>=80 && score<90">优秀</div>
    <div v-else-if="score>=70 && score<80">优秀</div>
    <div v-else-if="score>=60 && score<70">良好</div>
    <div v-else="score<60">还需努力</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                score: 78
            };
        }
    })
</script>

</html>

2、v-mostrar

Similar a v-if , solo representa elementos cuya expresión detrás de ellos es falsa y agrega código CSS a dichos elementos: style="display:none"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-if|v-else|v-else-if</p>
    分数：<input v-model="score"/>
    <div v-if="score>=90">大神</div>
    <div v-else-if="score>=80 && score<90">优秀</div>
    <div v-else-if="score>=70 && score<80">优秀</div>
    <div v-else-if="score>=60 && score<70">良好</div>
    <div v-else="score<60">还需努力</div>

    <p>v-show</p>
    <div v-show="score>90">v-show-成为大神的人</div>
    <div v-if="score>90">v-if-成为大神的人</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                score: 78
            };
        }
    })
</script>

</html>

Sólo se mostrará cuando nuestra puntuación llegue a 90 o más.

3、v-para

Recorrido tipo JS:

                          Recorre la matriz: v-for="item in items" , items es una matriz, item es un elemento de matriz en la matriz

                         Recorrer objetos: v-for="(valor, clave, índice) en stu" , valor del atributo de valor, nombre del atributo clave, subíndice de índice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-for</p>
    下拉框：
    <select v-model="hobbySelected">
        <option v-for="h in hobby" :value="h.id">{
   
   {h.name}}</option>
    </select><br>
    复选框：
    <div v-for="h in hobby">
        <input :value="h.id" type='checkbox'/>{
   
   {h.name}}
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                hobby: [
                    {id: "1", name: "唱"},
                    {id: "2", name: "跳"},
                    {id: "3", name: "rap"},
                    {id: "4", name: "篮球"}
                ]
            };
        }
    })
</script>

</html>

4. Parámetros dinámicos

  A partir de 2.6.0, puede utilizar expresiones JavaScript entre corchetes como argumentos para una directiva.

  <a v-bind:[attrname]="url"> ... </a>

  Del mismo modo, puede utilizar parámetros dinámicos para vincular controladores a un nombre de evento dinámico.

 <button v-on:[evname]="dt">Evento de clic</button>

  Nota 1: Las expresiones de parámetros dinámicos tienen algunas restricciones gramaticales: evName no es válido, evname es válido y se evitan las letras mayúsculas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>动态参数</h3>
    <button @click="dt">点一下</button>
    事件：<input v-model="evname"/>
    <button v-on:[evname]="dt">点击事件</button>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                evname: "click"
            };
        },
        methods: {
            dt() {
                alert("还得是你，说点就点");
            }
        }
    })
</script>
</html>

4. Filtrar

1. Filtro local

new Vue({

 filters:{'filterName':function(value){}}

});

Vue le permite personalizar filtros, que se utilizan para algunos formatos de texto comunes. El formato es el siguiente:

<!-- dentro de dos llaves -->

{ { nombre | capitalizar }}

<!-- En la directiva v-bind-->

<div v-bind:id="rawId | formatId"></div>

Nota 1: La función de filtro acepta el valor de una expresión como primer parámetro.

Nota 2: Los filtros se pueden conectar en serie.    

        { { mensaje | filtroA | filtroB }}

Nota 3: Los filtros son funciones de JavaScript y, por lo tanto, pueden aceptar parámetros:

        { { mensaje | filtroA('arg1', arg2) }}

Nota 4: js define una clase

        función Stu(){};

        Stu.prototype.add(a,b){}; //Agregar un nuevo método de instancia

        Stu.update(a,b){} ;//Agregar un nuevo método de clase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>局部过滤器基本使用</h3>
    {
   
   {msg}}<br>
    {
   
   {msg | singleA}}
    <h3>局部过滤器串行使用</h3><br>
    {
   
   {msg | singleA | singleB}}
    <h3>局部过滤器传参</h3><br>
    {
   
   {msg|param(3,5)}}
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'python、Java、php、C++'
            };
        },
        methods: {
            handle() {
                alert("触发事件");
            }
        },
        filters: {
            'singleA': function (val) {
                return val.substring(0, 6);
            },
            'singleB': function (val) {
                return val.substring(1, 5);
            },
            'param': function (val, start, end) {
                return val.substring(start, end);
            }
        }
    })
</script>
</html>

2. Filtro global

Vue.filter('filterName', function (value) {

 // value 表示要过滤的内容

});

2.1 Configurar datos.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

    <script src="date.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>全局过滤器</h3>
    {
   
   {time}}<br>
    {
   
   {time | fmtDateFilter}}
</div>
</body>
<script type="text/javascript">
    // 全局过滤器
    Vue.filter('fmtDateFilter', function (value) {
        return fmtDate(value);
    });
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                time: new Date()
            };
        }
    })
</script>
</html>

5. Atributos calculados y atributos de seguimiento

1. Propiedades calculadas

   Las propiedades calculadas se pueden utilizar para calcular rápidamente las propiedades que se muestran en una vista. Estos cálculos se almacenarán en caché y solo se actualizarán cuando sea necesario.

   calculado:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    单价：<input v-model="price">
    数量：<input v-model="num">
    总价：<input v-model="count">
</div>
</body>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data() {
            return {
                price: 79,
                num: 1
            }
        },
        computed: {
            count: function () {
                return this.price * this.num
            }

        }
    })
</script>
</html>

  

2. Atributos de seguimiento

   Al escuchar la vigilancia del atributo, podemos responder a los cambios de datos a través de la vigilancia.

   mirar:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性及监听属性</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>监听属性</p>
    千米：<input v-model="km"/>
    米：<input v-model="m"/>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                km: 2,
                m: 2000
            };
        },
        watch: {
            // v指的是m变量
            m: function (v) {
                this.km = parseInt(v) / 1000;
            },
            // v指的是km变量
            km: function (v) {
                this.m = parseInt(v) * 1000;
            }
        }
    })
</script>

</html>

3. Estuche para carrito de compras

Un caso de uso de atributos de escucha y atributos calculados para calcular el front-end

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        h1, p {
            text-align: center;
        }
    </style>
</head>
<body>
<h1>购物车</h1>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>商品名</th>
            <th>商品价格</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>花西币</td>
            <td>{
   
   {hxbDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="hxb"/>&nbsp;
            </td>
            <td>{
   
   {hxbTotal}}</td>
        </tr>
        <tr>
            <td>眉笔</td>
            <td>{
   
   {mbDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="mb">&nbsp;
            </td>
            <td>{
   
   {mbTotal}}</td>
        </tr>
        <tr>
            <td>口红</td>
            <td>{
   
   {khDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="kh">&nbsp;
            </td>
            <td>{
   
   {khTotal}}</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: right;">总计</td>
            <td>{
   
   {total}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new
    Vue({
        el: '#app',
        data() {
            return {
                hxbDj: 79,
                mbDj: 10,
                khDj: 299,
                hxb: 1,
                mb: 1,
                kh: 1,
            };
        },
        computed: {
            hxbTotal() {
                return this.hxbDj * this.hxb;
            },
            mbTotal() {
                return this.mbDj * this.mb;
            },
            khTotal() {
                return this.khDj * this.kh;
            },
            total() {
                return this.hxbTotal + this.mbTotal + this.khTotal;
            }
        }

Debido a que el tipo de cuadro de entrada que uso es de tipo numérico , no uso el evento de clic de botón++--

Supongo que te gusta

Origin blog.csdn.net/weixin_74383330/article/details/132984923
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