【Vue】テンプレート構文、補間、命令、フィルター、計算プロパティ、モニタリングプロパティ（面接の質問や卒業設計などの実践事例も含む） 前編

情報 2023-10-05 06:35:58 訪問数: null

I.はじめに

1. テンプレート構文とは何ですか?

Vue のテンプレート構文は、HTML で Vue コンポーネントを宣言的にレンダリングするための構文です。これは HTML に基づいており、特定のテンプレート構文を使用して HTML を拡張します。Vue は、「 Mustache 」構文と呼ばれるテンプレート補間を使用して、データを HTML 要素にバインドします。

Vue のテンプレート構文では、二重中括弧 ( { {}} ) を使用してデータを HTML 要素にバインドし、データの値が対応する場所で動的に置き換えられるようにすることができます。

以下に文法と例の紹介を交えてデモンストレーションを行います。

2. 補間

1.本文

 { {メッセージ}}

<!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

v-html ディレクティブを使用して 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. 属性

          HTML 属性の値には 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>

ジャンプできるように<a>タグを使用したため、ここにリンクされています。

4. 表現

          Vue は 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. クラスとスタイルのバインディング

          使い方：

                v-bind:class="式"

                v-bind:style="式"

          式のタイプ: 文字列、配列、オブジェクト

こちらはクラスとスタイルを組み合わせた例です

<!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. 命令と動的パラメータ

「 v- 」という接頭辞が付いた特別なプロパティを指します。

主要な手順:

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

1、v-if|v-else|v-else-if

後続の式の bool 値に基づいて要素をレンダリングするかどうかを決定します。

        兄弟要素のみにすることができます

                 v-else-ifの前の兄弟要素はv-ifでなければなりません

                 v-elseの前の兄弟要素はv-ifまたは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ショー

v-ifと同様に、背後の式が false である要素のみをレンダリングし、そのような要素に CSS コードを追加します: 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>

スコアが90以上になった場合のみ表示されます

3、v-for

JS のようなトラバーサル:

                          配列を走査します: v-for="item in items"、items は配列、item は配列内の配列要素です

                         オブジェクトのトラバース: v-for="(value,key,index) in stu"、value 属性値、key 属性名、インデックス添え字

<!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. 動的パラメータ

  2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブの引数として使用できるようになりました。

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

  同様に、動的パラメーターを使用して、ハンドラーを動的イベント名にバインドできます。

 <button v-on:[evname]="dt">クリックイベント</button>

  注 1: 動的パラメータ式には文法上の制約があり、evNameは無効、evnameは有効、大文字は避けられます。

<!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. フィルター

1. ローカルフィルター

new Vue({

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

});

Vue を使用すると、一般的なテキストの書式設定に使用されるフィルターをカスタマイズできます。その形式は次のとおりです。

<!-- 2 つの中括弧内 -->

{ { 名前 | 大文字にする }}

<!-- v-bind ディレクティブ内 -->

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

注 1: フィルター関数は式の値を最初のパラメーターとして受け入れます。

注2：フィルタは直列接続可能    

        { { メッセージ | フィルターA | フィルターB }}

注 3: フィルタは JavaScript 関数であるため、パラメータを受け入れることができます。

        { { メッセージ | フィルターA('arg1', arg2) }}

注4: jsはクラスを定義します

        関数 Stu(){};

        Stu.prototype.add(a,b){}; //新しいインスタンス メソッドを追加します

        Stu.update(a,b){} ;//新しいクラスメソッドを追加します

<!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. グローバルフィルター

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

 // value 表示要过滤的内容

});

2.1. data.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. 計算属性と監視属性

1. 計算された特性

   計算されたプロパティを使用すると、ビューに表示されるプロパティをすばやく計算できます。これらの計算はキャッシュされ、必要な場合にのみ更新されます。

   計算結果:{}

<!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. モニタリング属性

   リスニング属性の監視により、監視を通じてデータの変更に対応できます

   時計：{}

<!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. ショッピングカートケース

リスニング属性と計算属性を使用してフロントエンドを計算するケース

<!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;
            }
        }

私が使用している入力ボックスのタイプは数値型なので、ボタンクリックイベント++は使用しません--

おすすめ

転載: blog.csdn.net/weixin_74383330/article/details/132984923
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com