Vue の機能 + Vue の簡単な例 + Vue テンプレートの構文 + Vue データバインディング + データと EL の 2 つの書き方

<!-- 引入开发版本的Vue 全局就多了一个 Vue的构造函数 -->
<script src="../js/vue.js"></script>
<body>
    <!-- 1.准备一个容器 -->
    <div id="app">
        <h1>hello,{
   
   {name}}</h1>
    </div>
    <script>
        //创建vue实例  配置项里面的key值不能乱改
        new Vue({
            el:'#app',           //el用于指定当前Vue实例为哪个容器服务，通常为CSS选择器字符串
            data:{
                name:'Vue第一天' //data中用于存储数据，数据供 el所指定的容器 去使用(容器之外就不能使用),指暂时先写为一个对象
            }
        });
    </script>
</body>

分析の概要 1:

1. Vue を動作させたい場合は、Vue インスタンスを作成し、設定オブジェクトを渡す必要があります。

2. アプリコンテナ内のコードは引き続き HTML 仕様を提供しますが、いくつかの特殊な Vue 構文が { {}}に混在しています。

3. アプリコンテナ内のコードはVue テンプレートと呼ばれます

注 1:コンテナと Vue インスタンスの間には 1 対 1 の関係があり、1 つのコンテナは 1 つの Vue インスタンスにのみ対応し、1 つの Vue インスタンスは 1 つのコンテナにのみ対応します。

注 2:アプリコンテナ内の特殊な Vue 構文 { {}} は、二重中括弧は JS 式のみにすることができます。

JS 式と JS ステートメントの違いに注意してください。

01.JS 式: 式は値を生成し、値が必要な場所にどこにでも配置できます。

（1）ア

（2）a+b

(1)デモ(1)関数式

(1) x===y? 'a' : b の三項式

02.JSコード(ステートメント)

（1）if(){ }

（2）for(){ }

    <!-- 1.准备一个容器 -->
    <div id="app">
        <h1>hello,{
   
   {name}},{
   
   {Date.now()}},{
   
   {1+1}}</h1>
    </div>
    <script>
        //创建vue实例  配置项里面的key值不能乱改
        new Vue({
            el:'#app',           //el用于指定当前Vue实例为哪个容器服务，通常为CSS选择器字符串
            data:{
                name:'Vue第一天' //data中用于存储数据，数据供 el所指定的容器 去使用(容器之外就不能使用),指暂时先写为一个对象
            }
        });
    </script>

結果：

注3：データ内のデータの階層表示

分析の概要 2:

4. コンテナと Vue インスタンスの間には1 対 1 の関係があります。

5. 実際の開発では、Vue インスタンスは 1 つだけあり、コンポーネントと一緒に使用されます。

6. {{xxx}} の xxx はjs 式として記述する必要があり、xxx はデータ内のすべての属性を自動的に読み取ることができます。

7. データ内のデータが変更されると、テンプレート内のデータが使用されている箇所が自動的に更新されます。

4.Vueテンプレートの構文

1.{ {xxx }} 補間構文

補間構文は通常、タグ本体内のコンテンツに使用されます: <h1>タグ本体内のコンテンツ</h1>

例:<h1>{ {名前}}</h1>

2.v-xxx コマンド構文

例: ラベル属性を解析する例として v-bind を使用してみましょう: v-bind は次のように省略できます: 例: v-bind:href='xxx' is: href='xxx'

    <!-- 1.准备一个容器 -->
    <div id="app">
        <h1>插值语法</h1>
        <h1>hello,{
   
   {name}}</h1>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">点我去百度查Vue2文档</a>
        <a :href="url.toUpperCase()">点我去百度查Vue2文档</a>
    </div>
    <script>
        new Vue({
            el:'#app',           //el用于指定当前Vue实例为哪个容器服务，通常为CSS选择器字符串
            data:{
                name:'Vue第一天', //data中用于存储数据，数据供 el所指定的容器 去使用(容器之外就不能使用),指暂时先写为一个对象
                url:'https://www.baidu.com'
            }
        });
    </script>

v-bind はタグの任意の属性に値を動的にバインドできます。上記のコードでは、v-bind はタグ a の href 属性「url」に値を動的にバインドします。この時点では文字列ではありません。 url.はデータ内のURLに対応する式です。

分析の要約 3:

Vue テンプレートの構文には主に 2 つのカテゴリがあります。

1.補間構文:

機能: タグ本体のコンテンツを解析する

記述方法: { {xxx}}、xxx は JS 式であり、データ内のすべての属性を直接読み取ることができます

2.命令の構文:

機能:タグを解析するために使用されます(タグ属性、タグ本体の内容、バインディングイベントなど)。

例: v-bind:href = "xxx"または:href = "xxx"と省略されます。xxx には JS 式を記述する必要もあります。

データ内のすべての属性を直接読み取ることができます

注: Vue には多くの命令があり、それらはすべて v-??? の形式になっています。

5.Vueデータバインディング

1. 一方向データバインディング v-bind は一方向バインディング命令です。

    <!-- 1.准备一个容器 -->
    <div id="app">
        单向数据绑定: <input type="text" v-bind:value="name">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'天空'
            }
        })
    </script>

2. 双方向データバインディング v-model は双方向データバインディングを実現できます。

v-model:value は、v-model と省略できます。これは、v-model がデフォルトで value を収集するためです。

    <!-- 1.准备一个容器 -->
    <div id="app">
        单向数据绑定: <input type="text" v-bind:value="name">
        <br>
        双向数据绑定: <input type="text" v-model:value="name">
        <br>
        双向数据绑定: <input type="text" v-model ="name">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'天空'
            }
        })
    </script>

注意点：

v-model はフォーム要素 (値を持つ入力要素)にのみ適用できるため、次のコードは間違っています。

 <h2 v-model:x="name">你好啊</h2>

分析の要約 4:

Vue にはデータバインディングの方法が 2 つあります。

1.一方向バインディング (v-bind) : データはデータからページへのみ流れることができます。

2.双方向バインディング (v-model) : データはデータからページに流れるだけでなく、ページからデータに流れることもできます。

述べる：

1. 双方向バインディングは通常、フォーム要素 (入力、選択など) に適用されます。

2. v-model:value は、v-model と省略できます。これは、v-model がデフォルトで value を収集するためです。

6. データとエルの2つの書き込み方法

1.elの2つの書き方

書き方１：

    <script>
        new Vue({
            //el的第一种写法
            el:'#app',
            data:{
                name:'天空'
            }
        })
    </script>

書き方2：Vueインスタンスを利用する

    <!-- 1.准备一个容器 -->
    <div id="app">
        你好，{
   
   {name}}
    </div>
    <script>
        const v = new Vue({
            data:{
                name:'天空a'
            }
        });
        //利用实例对象原型上面的 $mount()挂载
        v.$mount('#app');   //el的二种写法
    </script>

分析: どちらの方法も使用できますが、2 番目の方法の方が柔軟です。

2. データの書き込みには 2 つの方法があります

書き方1：オブジェクトスタイル

    <script>
        new Vue({
            el:'#app',
            //data的第一种写法  对象式
            data:{
                name:'天空'
            }
        })
    </script>

書き方 2: 関数型。データは関数として記述され、関数の戻り値はオブジェクトであり、オブジェクトには使用する必要のあるデータが含まれます。

    <!-- 1.准备一个容器 -->
    <div id="app">
        你好，{
   
   {name}}
    </div>
    <script>
        const v = new Vue({
            //data 的第二种写法：函数式
            data:function(){
                console.log(this,11111); //Vue {_uid: 0, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …
                return {
                    name:'天空啊'
                }
            }
        }).$mount('#app');
    </script>

注:データ関数はアロー関数として記述することはできません。アロー関数として記述すると、これはウィンドウを指すことになります。関数を記述する必要があります。

キーワードを使用するか、ES6 構文を使用します。

分析の要約 5:

1.elには2つの書き方があります

(1) Vue新規作成時のel属性の設定

(2) まず Vue インスタンスを作成し、 instance.$mount('#app')でel の値を指定します。

2. データを書き込むには 2 つの方法があります

(1) オブジェクトの種類

(2) 関数式

選択方法: 一般的にはどれでも問題ありませんが、コンポーネントを学習する場合、データは関数形式である必要があり、そうでない場合はエラーが報告されます。

3.重要な原則:

Vue によって管理される関数については 、アロー関数を作成してはなりません。アロー関数を作成すると、これは Vue インスタンスではなくなります。

Vueが管理する関数：Vueの設定オブジェクトに記述例えばデータの関数記述方法はVueが管理する関数です。