核となるアイデア

データは、駆動：ページビューとデータバインディング双方向の結合、DOM、ビューを操作し、同時にデータを変更しないでください
コンポーネント：ビジネス機能は、個別のモジュールが取り外されて

MVVM

ビュー：DOM、ビュー
ViewModel：ビューおよび方法結合モデル
モデル：JSネイティブオブジェクト

Vueの基本的な文法

Vueの例を作成します

ダウンロードした後<ヘッド>の<script>の直接導入

<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="./vue.js"></script>
</head>

参考CDN：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

マウントポイント、テンプレートと例

マウントポイント：Vueのマウント、ページタブを参照

マウントポイントを内容：テンプレート

例：新しいVueの内のJavaScript（）インスタンスオブジェクト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="./vue.js"></script>
</head>
<body>
<!--挂载点、模板、实例之间的关系
div为挂载点，通过ID绑定
模板可以写到挂载点内部和实例中-->
<div id="root">{{msg}}
    <!--挂载点内部的内容为模板-->
    <p>这里是挂载点内部的模板{{temMsg}}</p>
</div>
<script>
    // vue实例
    new Vue({
        //指定实例的挂载点，Vue去接管哪个元素内容，绑定DOM节点
        el: "#root",
        // 模板也可以写到实例中,但是这样挂载点中的内容就不会被显示
        template:'<i>这里是实例中的模板{{temMsg}}</i>',
        // 数据内容
        data: {
            msg: "hello world",
            temMsg:"template"
        }
    });
</script>
</body>
</html>

データのVueの例

データオブジェクト：データ

ページの参照データ・インスタンス：

{{}}、v-text、v-html

<body>
<div id="root">
    <!--{{}}为插值表达式语法
    v-text:Vue中的指令，只能输出文本，会转义
    v-html:Vue中的指令,可以输出标签，不会转义
    -->
    <ul>
        <li>{{msg}}</li>
        <li v-text="vText"></li>
        <li v-html="vHtml"></li>
        <li v-text="content"></li>
        <li v-html="content"></li>
    </ul>
</div>
<script>
    // vue实例
    new Vue({
        el: "#root",
        data: {
            msg: "{{}}双括号插值表达式",
            vText: "v-text是Vue指令",
            vHtml:"v-html是Vue指令",
            content:"<i>测试v-text和v-html之间的不同</i>"
        }
    });
</script>
</body>

Vueのイベントとメソッド

イベントV-上に要素を結合は：また、と略記することができます@

Functionオブジェクト：メソッド

Vueが特長：データ指向プログラミング、DOMを操作する必要はありません、データ変更、ページの変更を

<body>
<div id="root">
    <!--
    v-on:Vue绑定事件,
    改变挂载点中的内容不要操作DOM，应该修改实例中的数据
    -->
    <ul>
        <li v-on:click="()=>{alert('绑定了点击事件 v-on:click')}">{{msg}}:箭头函数有问题</li>
        <li v-on:click="handleClick">{{msg}}:引用实例中methods对象下的方法</li>
        <li @click="changeData">{{changeMsg}}</li>
    </ul>
</div>
<script>
    // vue实例
    new Vue({
        el: "#root",
        data: {
            msg: "v-on:click   点击事件",
            changeMsg: "点击改变内容"
        },
        methods: {
            handleClick: function () {
                alert("绑定了点击事件 v-on:click")
            },
            changeData: function () {
                // this指向data 修改数据
                this.changeMsg="内容被改变";
            }
        }
    })
    ;
</script>
</body>

結合特性

V-バインドのプロパティをバインド：タイトル=「変数名」を書き込むことができます。title =「変数名」のコマンドテンプレート
変数名Vueの属性データは、データオブジェクトである
の背後には、= JS表現番号、かもしれ=「入力され、文字+タイトル"

<div id="root">
    <ul>
        <li title="title 的名字">鼠标移动过来显示</li>
        <li v-bind:title="title">属性绑定</li>
        <!--  =号后边为js表达式  title 是变量-->
        <li :title="'这是一个'+ title">属性绑定</li>
    </ul>
</div>
<script>
    // vue实例
    new Vue({
        el: "#root",
        data: {
            title: "实例中的数据"
        }
    })
</script>

結合双方向データ

ウェイバインディング：データ・ページを表示することを決定し、ページがどのようなデータを決定することはできません

双方向バインディング：テンプレートディレクティブのVモデル、データ、コンテンツページや変更は、他にも変更します

<div id="root">
    <ul>
        <li><input :value="content"/></li>
        <li><input v-model="content"/></li>
        <li>{{content}}</li>
    </ul>
</div>
<script>
    // vue实例
    new Vue({
        el: "#root",
        data: {
            content: "this is content!"
        }
    })
</script>

リスナーのプロパティで計算

から算出した他の属性から計算されたオブジェクトの属性、

キャッシュされた値を変更しない他の用途に依存関係プロパティが再計算されていません

時計：リスナーオブジェクト、モニター・データの変更、データはトリガーを変更されました

<div id="root">
    <ul>
        <li>姓：<input v-model="firstName"/></li>
        <li>名：<input v-model="lastName"/></li>
        <li>{{firstName}}{{lastName}}</li>
        <li>fullName 属性计算：{{fullName}}</li>
        <li>侦听姓名修改次数：{{count}}</li>
        <li>侦听fullName数据变化：{{fullCount}}</li>
    </ul>
</div>
<script>
    // vue实例
    new Vue({
        el: "#root",
        data: {
            firstName: "",
            lastName: "",
            count: 0,
            fullCount: 0
        },
        // 计算属性：由其它属性计算而来
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        },
        // 侦听器：监听数据变化
        watch: {
            // 侦听数据属性
            firstName: function () {
                this.count++;
            },
            lastName: function () {
                this.count++;
            },
            // 侦听计算属性
            fullName: function () {
                return this.fullCount++;
            }
        }
    })
</script>

V-場合、V-ショー、V-のための指令

V-IF：DOM、偽の削除DOMの有無を制御

V-ショー：DOMコントロールディスプレイやないラベルを隠すDOM

V-用：効率を改善するキー=「アイテム」が、キー値と同じではない：データ、データ表示サイクル、増加を横切ります

<div id="root">
    <ul>
        <li><p v-if="show">hello world</p></li>
        <li><p v-show="show">hello world</p></li>
        <li>
            <button @click="handleClick">toggle</button>
        </li>
    </ul>
    <ul>
        <li v-for="item of list">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
</div>
<script>
    // vue实例
    new Vue({
        el: "#root",
        data: {
            show: true,
            list: [1, 2, 3]
        },
        methods: {
            handleClick: function () {
                this.show = !this.show;
            }
        }
    })
</script>