Vue テンプレート構文 (1)

プログラミング 2023-05-07 23:34:37 訪問数: null

1.テンプレート構文

React の開発モード:

  • React はjsxを使用するため、対応するコードはjsに似た構文で記述されます。
  • 次に、jsx をコンパイルして、Babelを介してReact.createElement 関数呼び出しを行います。

Vue は jsx 開発モードもサポートしています。

  • しかし、ほとんどの場合、HTMLベースのテンプレート構文を使用します。
  • テンプレートでは、開発者はDOMと基礎となるコンポーネント インスタンスのデータを宣言的な方法でバインドできます。
  • 基礎となる実装では、Vue はテンプレートを仮想DOMレンダリング関数にコンパイルします。

2.口ひげ二重中括弧構文

        データをテンプレートに表示したい場合、最もよく使用される構文は、" Mustache"構文(二重中括弧)によるテキスト補間です。

  • 前述したように、dataによって返されるオブジェクトはVueのレスポンシブ システムに追加されます。
  • data内のデータが変更されると、対応するコンテンツも更新されます。
  • もちろん、Mustache はdataの属性であるだけでなく、JavaScript式でもあります。
<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>Document</title>
</head>
<body>

    <div id="app">

        <!-- 1.基本使用 -->
        <h2>{
   
   { message }}</h2>
        <h2>当前计数: {
   
   { counter }} </h2>

        <!-- 2.表达式 -->
        <h2>计数双倍: {
   
   { counter * 2 }}</h2>
        <h2>展示的信息: {
   
   { info.split(" ") }}</h2>

        <!-- 3.三元运算符 -->
        <h2>{
   
   { age >= 18 ? "成年人" : "未成年人" }}</h2>

        <!-- 4.调用methods中函数 -->
        <h2>{
   
   { formatDate(time) }}</h2>

        <!-- 5.注意: 这里不能定义语句 -->
        <!--这是一个赋值语句，不是表达式-->
        <!-- <h2>{
   
   { const name = "why" }}</h2> -->

        <!--控制流的if语句也是不支持的，可以使用三元运算符-->
        <!-- <h2>{
   
   { if (true) { return message } }}</h2> -->

    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    message: "Hello Vue",
                    counter: 100,
                    info: "my name is why",
                    age: 22,
                    time: 123
                }
            },

            methods: {
                formatDate: function (date) {
                    return "2022-10-10-" + date
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

3. v -onceコマンド

v-once は、要素またはコンポーネントが1 回だけレンダリングされることを指定するために使用されます。

  • データが変更されると、要素またはコンポーネントとそのすべての子要素は静的コンテンツと見なされ、スキップされます。
  • この命令は、パフォーマンスの最適化に使用できます。

子ノードの場合は、1 回だけレンダリングされます。

<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>Document</title>
</head>
<body>

  <div id="app">

    <!-- 指令: v-once -->
    <h2 v-once>
      {
   
   { message }}
      <span>数字: {
   
   {counter}}</span>
    </h2>

    <h1>{
   
   {message}}</h1>

    <button @click="changeMessage">改变message</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Vue",
          counter: 100
        }
      },

      methods: {
        changeMessage: function() {
          this.message = "你好啊, 李银河"
          this.counter += 100
          console.log(this.message, this.counter)
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

4. v -textコマンド

要素の textContent を更新する場合:

<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>Document</title>
</head>
<body>

    <div id="app">
        <h2> aa {
   
   {message}} bbb</h2>
        <!-- 与{
   
   {}}方式不同，v-text会将元素原本的内容清空，然后再添加内容 -->
        <h2 v-text="message">aaa</h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    message: "Hello Vue"
                }
            },
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

5、v -html

  • デフォルトでは、表示するコンテンツがHTMLの場合、Vue はそれを特別に解析しません。
  • このコンテンツをVueで解析したい場合は、 v-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>Document</title>
</head>
<body>

    <div id="app">
        <h2>{
   
   { content }}</h2>
        <h2 v-html="content"></h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    content: `<span style="color: red; font-size: 30px;">哈哈哈</span>`
                }
            },
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

6、で- のために

v-preを使用して、要素とその子のコンパイル プロセスをスキップし、元の Mustache タグを表示します。

コンパイルを高速化するために、コンパイルする必要のないノードをスキップします。

<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>Document</title>
</head>
<body>

    <div id="app">
        <div v-pre>
            <h2>{
   
   { message }}</h2>
            <p>当前计数: {
   
   { counter }}</p>
            <p>{
   
   {}}</p>
        </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    message: "Hello Vue",
                    counter: 0
                }
            },
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

7、v-マント

  • このディレクティブは、関連するコンポーネント インスタンスのコンパイルが完了するまで要素に残ります。
  • [v-cloak] { display: none }などのCSSルールと一緒に使用すると、このディレクティブは、コンポーネント インスタンスの準備が整うまで、コンパイルされていないMustacheタグを非表示にすることができます。
  • <div> はコンパイルが完了するまで表示されません。
<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>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

    <div id="app">
       <!--这个只有元素编译完成后才会显示-->
        <h2 v-cloak>{
   
   {message}}</h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>

        setTimeout(() => {
            // 1.创建app
            const app = Vue.createApp({
                // data: option api
                data: function () {
                    return {
                        message: "Hello Vue"
                    }
                },
            })

            // 2.挂载app
            app.mount("#app")
        }, 3000)

    </script>
</body>
</html>

8、vメモ  

  • 予期されるバインド値のタイプ:any[]

  • 詳細

    テンプレートのサブツリーをキャッシュします。要素とコンポーネントの両方で使用できます。キャッシュを実装するために、この命令は、比較のために依存値の固定長配列を渡す必要があります。配列内のすべての値が最後のレンダリングと同じである場合、サブツリー全体の更新はスキップされます。

<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>Document</title>
</head>
<body>

    <div id="app">
        <div v-memo="[name]"> <!--表示只有在数组中定义的属性发生变化时，才会渲染，数组之外的属性改变，不会引起页面渲染-->
            <h2>姓名: {
   
   { name }}</h2>
            <h2>年龄: {
   
   { age }}</h2>
            <h2>身高: {
   
   { height }}</h2>
        </div>
        <button @click="updateInfo">改变信息</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    name: "why",
                    age: 18,
                    height: 1.88
                }
            },

            methods: {
                updateInfo: function () {
                    // this.name = "kobe"
                    this.age = 20
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

9、Vバインド

上記の一連の手順は、主にテンプレート コンテンツに値を挿入することです。

ただし、動的に決定する必要があるコンテンツに加えて、特定の属性を動的にバインドすることも必要です。

  • たとえば、a要素の href 属性を動的にバインドします。
  • たとえば、img要素のsrc属性を動的にバインドします。

プロパティをバインドするには、v-bind を使用します。

  • 略語: :
  • 预期：any (引数あり) | オブジェクト (引数なし)
  • パラメータ: attrOrProp (オプション)
  • Modifiers : .camel -ケバブケースの属性名をキャメルケースに変換します。
  • 使用法: 1 つ以上の属性、またはコンポーネントのpropを式に動的にバインドします。

9.1.基本プロパティのバインド

  • v-bind は、1 つ以上のプロパティ値をバインドするか、props値を別のコンポーネントに渡すために使用されます(これは、コンポーネントを学習するときに導入されます)。
  • 開発において、どの属性を動的にバインドする必要がありますか?
    • 画像のリンクsrc 、ウェブサイトのリンクhref 、一部のクラスの動的バインディング、スタイルなど、まだまだたくさんあります。
  • v-bind には対応する構文法である sugar があり、これは短縮形です。
  • 開発では、より簡潔であるため、通常はシンタックス シュガーを使用します。
<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>Document</title>
</head>
<body>

    <div id="app">
        <div>
            <button @click="switchImage">切换图片</button>
        </div>

        <!-- 1.绑定img的src属性 -->
        <img v-bind:src="showImgUrl" alt="">
        <!-- 语法糖: v-bind -> : -->
        <img :src="showImgUrl" alt="">

        <!-- 2.绑定a的href属性 -->
        <a :href="href">百度一下</a>

    </div>
  
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    imgUrl1: "http://p1.music.126.net/agGc1qkogHtJQzjjyS-kAA==/109951167643767467.jpg",
                    imgUrl2: "http://p1.music.126.net/_Q2zGH5wNR9xmY1aY7VmUw==/109951167643791745.jpg",

                    showImgUrl: "http://p1.music.126.net/_Q2zGH5wNR9xmY1aY7VmUw==/109951167643791745.jpg",
                    href: "http://www.baidu.com"
                }
            },

            methods: {
                switchImage: function () {
                    this.showImgUrl = this.showImgUrl === this.imgUrl1 ? this.imgUrl2 : this.imgUrl1
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

9.2、バインディングクラス

開発中、次のように要素クラスも動的になることがあります。

  • データが特定の状態にある場合、フォントは赤色で表示されます。
  • データがそれ以外の状態の場合、フォントは黒で表示されます。

クラスをバインドするには、次の 2 つの方法があります。

  • オブジェクト構文
  • 配列構文

オブジェクト構文:オブジェクトを :class (v-bind:class の略)に渡して、動的にクラスを切り替えることができます。

配列構文:配列を:classに渡して、クラスリストを適用できます。

<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>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

  <div id="app">
    <!-- 1.基本绑定class -->
    <h2 :class="classes">Hello World</h2>

    <!-- 2.动态class可以写对象语法 -->
    <button :class=" isActive ? 'active': '' " @click="btnClick">我是按钮</button>

    <!-- 2.1.对象语法的基本使用(掌握) {key:value}，value值的类型必须为布尔值，true则会添加，反之则不会添加-->
    <button :class="{ active: isActive }" @click="btnClick">我是按钮</button>

    <!-- 2.2.对象语法的多个键值对 -->
    <button :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
    
    <!-- 2.3.动态绑定的class是可以和普通的class同时的使用 -->
    <button class="abc cba" :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
    
    <!-- 2.4.动态绑定的class是可以和普通的class同时的使用 -->
    <button class="abc cba" :class="getDynamicClasses()" @click="btnClick">我是按钮</button>

    <!-- 3.动态class可以写数组语法(了解) -->
    <h2 :class="['abc', 'cba']">Hello Array</h2>
    <h2 :class="['abc', className]">Hello Array</h2>
    <h2 :class="['abc', className, isActive? 'active': '']">Hello Array</h2>
    <h2 :class="['abc', className, { active: isActive }]">Hello Array</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          classes: "abc cba nba",
          isActive: false,
          className: "why"
        }
      },

      methods: {
        btnClick: function() {
          this.isActive = !this.isActive
        },

        getDynamicClasses: function() {
          return { active: this.isActive, why: true, kobe: false }
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

9.3、綴じ方

v-bind:style を使用して、いくつかのCSSインライン スタイルをバインドできます。

  • 今回は、いくつかのスタイルのため、データに従って動的に決定する必要があります。
  • たとえば、特定のテキストの色、サイズなど。

CSS プロパティ名は、キャメルケースまたはダッシュ区切り(ケバブケース、引用符で囲むことを忘れないでください)で指定できます。

クラスをバインドするには、次の 2 つの方法があります。

  • オブジェクト構文
  • 配列構文

:style の配列構文は、複数のスタイル オブジェクトを同じ要素に適用できます。

<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>Document</title>
</head>
<body>

    <div id="app">
        <!-- 1.普通的html写法 -->
        <h2 style="color: red; font-size: 30px;">哈哈哈哈</h2>

        <!-- 2.style中的某些值, 来自data中 -->
        <!-- 2.1.动态绑定style, 在后面跟上 对象类型 (重要) 使用驼峰命名-->
        <!-- <h2 v-bind:style="{ color: fontColor, 'font-size': '30px' }">哈哈哈哈</h2> -->
        <h2 v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">哈哈哈哈</h2>
        <!-- 2.2.动态的绑定属性, 这个属性是一个对象 -->
        <h2 :style="objStyle">呵呵呵呵</h2>

        <!-- 3.style的数组语法 -->
        <h2 :style="[objStyle, { backgroundColor: 'purple' }]">嘿嘿嘿嘿</h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    fontColor: "blue",
                    fontSize: 30,
                    objStyle: {
                        fontSize: '50px',
                        color: "green"
                    }
                }
            },
        })

        // 2.挂载app
        app.mount("#app")

    </script>
</body>
</html>

9.4、動的バインディングのプロパティ

場合によっては、プロパティの名前も固定されないことがあります。

  • src 、href 、class 、 styleをバインドするかどうかに関係なく、属性名は固定されています。
  • 属性名が固定されていない場合は、 [属性名] = "値"の形式を使用して定義できます。
  • このバインド方法は、動的バインド プロパティと呼ばれます。
<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>Document</title>
</head>
<body>

    <div id="app">
        <!--值需要"''"进行包裹，才是字符串，""包裹的是js代码-->
        <h2 :[name]="'aaaa'">Hello World</h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    name: "class"
                }
            },
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

9.5、オブジェクトをバインドする

  • オブジェクトのすべてのプロパティを要素のすべてのプロパティにバインドしたい場合はどうすればよいでしょうか?
    • 非常に単純です。v -bind を直接使用してオブジェクトをバインドできます。
  • ケース: infosオブジェクトはdivの各属性に分解されます
<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>Document</title>
</head>
<body>

    <div id="app">
        <!-- 原始方式 -->
        <h2 :name="name" :age="age" :height="height">Hello World</h2>

        <!-- 新的方式直接绑定对象，效果与上述代码一致 -->
        <!-- v-bind绑定对象: 给组件传递参数 -->
        <h2 v-bind="infos">Hello Bind</h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    infos: {name: "why", age: 18, height: 1.88, address: "广州市"},

                    name: "why",
                    age: 18,
                    height: 1.88
                }
            },
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

10. v -onバインディングイベント

前に、要素のコンテンツと属性をバインドしました. フロントエンド開発におけるもう1つの非常に重要な機能は、対話です.

フロントエンド開発では、多くの場合、さまざまな方法でユーザーと対話する必要があります。

  • この時点で、クリック、ドラッグ、キーボード イベントなど、ユーザーに発生するイベントをリッスンする必要があります。
  • Vueでイベントを聞く方法は? v-onディレクティブを使用します。

10.1、v-onの使い方

v-onの使用:

略語：@

予想される: 関数 | インライン ステートメント | オブジェクト

パラメータ:イベント

修飾子:

  1. .stop  : event.stopPropagation ()を呼び出します。
  2. .prevent  : event.preventDefault ()を呼び出します。 
  3. .capture  :イベント リスナーを追加するときにキャプチャ モードを使用します。
  4. .self : コールバックは、リスナーがバインドされている要素自体からイベントが発生した場合にのみ発生します。
  5. .{keyAlias}  : イベントが特定のキーから発生した場合にのみ、コールバックを発生させます。
  6. .once :コールバックを 1 回だけトリガーします。
  7. .left  : マウスの左ボタンがクリックされたときにのみ発生します。
  8. .right  : マウスの右ボタンがクリックされたときにのみ発生します。
  9. .middle  : マウスの中ボタンがクリックされたときにのみ発生します。
  10. .passive  : { passive: true } モード追加リスナー

使用法: イベント リスナーのバインド

10.2 v-onの基本的な使い方

<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>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div id="app">
        <!-- 1.基本的写法 -->
        <div class="box" v-on:click="divClick"></div>

        <!-- 2.语法糖写法(重点掌握) -->
        <div class="box" @click="divClick"></div>

        <!-- 3.绑定的方法位置, 也可以写成一个表达式(不常用, 不推荐) -->
        <h2>{
   
   { counter }}</h2>
        <button @click="increment">+1</button>
        <button @click="counter++">+1</button>

        <!-- 4.绑定其他方法(掌握) -->
        <div class="box" @mousemove="divMousemove"></div>

        <!-- 5.元素绑定多个事件(掌握) -->
        <div class="box" @click="divClick" @mousemove="divMousemove"></div>
        <!-- <div class="box" v-on="{ click: divClick, mousemove: divMousemove }"></div> -->
        <!-- <div class="box" @="{ click: divClick, mousemove: divMousemove }"></div> -->
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                divClick() {
                    console.log("divClick")
                },
                increment() {
                    this.counter++
                },
                divMousemove() {
                    console.log("divMousemove")
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

10.3、v-on パラメータの受け渡し

@click呼び出しのメソッドでメソッドを定義するときは、パラメーターの問題に注意する必要があります。

  • ケース 1:メソッドが追加のパラメーターを必要としない場合、メソッドの後の () は追加されない可能性があります。
    • ただし、注意: メソッド自体にパラメーターがある場合、デフォルトでネイティブ イベント イベント パラメーターが渡されます。
  • ケース 2: 特定のパラメーターとイベントを同時に渡す必要がある場合は、 $eventを介してイベントを渡すことができます。
<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>Document</title>
</head>
<body>

    <div id="app">
        <!-- 1.默认传递event对象 -->
        <button @click="btn1Click">按钮1</button>

        <!-- 2.只有自己的参数 -->
        <button @click="btn2Click('why', age)">按钮2</button>

        <!-- 3.自己的参数和event对象 -->
        <!-- 在模板中想要明确的获取event对象: $event -->
        <button @click="btn3Click('why', age, $event)">按钮3</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    message: "Hello Vue",
                    age: 18
                }
            },
            methods: {
                // 1.默认参数: event对象
                // 总结: 如果在绑定事件的时候, 没有传递任何的参数, 那么event对象会被默认传递进来
                btn1Click(event) {
                    console.log("btn1Click:", event)
                },

                // 2.明确参数:
                btn2Click(name, age) {
                    console.log("btn2Click:", name, age)
                },

                // 3.明确参数+event对象
                btn3Click(name, age, event) {
                    console.log("btn3Click:", name, age, event)
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

10.4. v -onの修飾子

v-on は、イベントの特別な処理と同等の修飾子をサポートしています。

<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>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>

    <div id="app">
        <div class="box" @click="divClick">
            <button @click.stop="btnClick">按钮</button>
        </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    message: "Hello Vue"
                }
            },
            methods: {
                btnClick(event) {
                    console.log("btnClick")
                },
                divClick() {
                    console.log("divClick")
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

おすすめ

転載: blog.csdn.net/weixin_52851967/article/details/128703416
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
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)

コードワールド

© 2018 codetd.com