簡単に理解するために - 2 - Vueのスタート

その他 2020-01-23 02:19:53 訪問数: null

1.Vueの例

<div id="exp">
    <div @click="handleClick">{{content}}</div>
</div>
</body>
<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            content:"hello world"
        },
        methods:{
            handleClick:function () {
                alert(this.content)
            }
        }
    });
</script>
// vm为一个实例，当执行vm.$destory()就会销毁这个实例。这样通过修改数据vm.$data.message = "123"，
页面不会有相应的变化

2.Vueライフサイクルフック

  • ライフサイクル機能は、ある時点で自動的に実行される機能のVUEのインスタンスです。
  • 注：ライフサイクルの関数とのメソッドを定義していません。

IMG

  • コード
<div id="app"></div>
<script>
    var vm = new Vue({
        el:"#app",
        template:`<div>{{test}}</div>`,
        data:{
            test:"hello world"
        },
        // vue实例进行基本初始化之后会被执行
        beforeCreate:function () {
            console.log("beforeCreate");
        },
        // 初始化一些外部注入，和双向绑定，当此类操作完成会调用created
        created:function () {
            console.log("created");
        },
        // 在template页面挂载之前执行函数
        beforeMount:function () {
            // 此时this.$el 还没有被渲染
            console.log("beforeMount");
        },
        // 页面渲染完执行周期函数mounted
        mounted:function () {
            // 此时this.$el 已经被渲染了，
            console.log("mounted");
        },
        // 当调用vm.$destroy(),即将被销毁时候会执行
        beforeDestroy:function () {
            console.log("beforeDestory");
        },
        // 当前实例被销毁会被调用
        destroyed:function () {
            console.log("destroyed");
        },
        // 数据发生改变，vm.test='123'还没有重新渲染数据会被执行
        beforeUpdate:function () {
            console.log("beforeUpdate");
        },
        // 重新渲染数据会被执行vm.test='123'
        updated:function () {
            console.log("updated");
        }
    })
</script>

3.テンプレートの構文

1.発現の差

<div id="exp">
    {{name}}
</div>
或
<div>{{"my name is "+name}}</div>


<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            name:"James"
        }
    });
</script>

2.vテキスト

<div v-text="name"></div>
或
<div v-text="'my name is ' + name"></div>
<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            name:"James"
        }
    });
</script>

3.v-HTML

<div v-html="name_html"></div>
var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            name_html:"<h1>James</h1>"
        }
    });

4.vオン

5.vバインド

4.計算リスナーのプロパティと

1.計算プロパティ

  • fullName下に来る計算することにより、いわゆる属性計算は、得られた計算さ内の関数によって定義されます。
var vm = new Vue({
    el:"#exp",
    data:{
        firstName:"Dell",
        lastName:"Lee"
        age:20
    },
    computed:{
        fullName:function () {
            console.log("计算一次")
            return this.firstName + " " + this.lastName
        }
    }
});
  • 内部キャッシュ属性がために、計算されるため、姓と名は、そのような唯一の年齢の変更などの変更は、「一度計算」に印刷されていないいないとしてのfullName、姓と名以上、内にスプライシングによってキャッシュの属性は、計算されましたパフォーマンスを向上させるが、firstNameのかlastNameのが変わっ、それは「時間を計算する」出力します、一度再計算。
  • 例えば、年齢の変化は、再びのfullNameを思い出します方法、などの方法に比べて、计算属性より効率的です。
methods:{
    fullName:function () {
    return this.firstName + " " + this.lastName
    }
},

2.リスナー

  • ない変更が行われない場合は、データの変更は、リスニング時計の機能を実行する場合は、時計、姓と名の変更をリスニングすることによって。そして、リスナーのプロパティは、キャッシュの概念を計算しますが、時計のリスナーのコードで書かれているが、より複雑です。
watch:{
    firstName: function () {
        this.fullName = this.firstName + " " + this.lastName
    },
    lastName: function () {
        this.fullName = this.firstName + " " + this.lastName
    },
},
  • 計算プロパティ>リスナー>方法：最高の勧告は、だから、

3.計算プロパティのセッターとゲッター

  • だけでなく、計算されたgetメソッドを記述し、あなたも値を設定するための一連のメソッドを書くことができますが、我々は通常、唯一の方法は、設定値を渡す必要であることを指摘し、書き込み方法、を取得します。
computed:{
    fullName:{
        // 当取 fullName 会执行此方法
        get:function () {
        return this.firstName + " " + this.lastName
        },
        // 当设置fullName 会执行此方法
        set:function (value) {
        var arr = value.split(" ");
        this.firstName = arr[0];
        this.lastName = arr[1];

        console.log(value)
        }
    }
}

結合5.vueのスタイル

  • 我々はページを作成する過程では、DOMは、スタイルのVueを追加する方法を、いくつかのスタイルを追加します

モード1：クラスオブジェクトがバインドされています

<style>
    .activated {
        color:red;
    }
</style>
<div id="exp">
    <div @click="handleDivClick" :class="{activated:isActivated}">{{text}}</div>
</div>

<script>
    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp",
        data:{
            text:"hello world",
            isActivated:false
        },
        methods:{
            handleDivClick:function () {
                this.isActivated = ! this.isActivated
            }
        }
    });

オプション2：方法の配列

<div id="exp2">
    <div @click="handleDivClick" :class="[activated,]">{{text}}</div>
</div>


var vm2 = new Vue({
    // el限制一个vue实例的管理范围。
    el:"#exp2",
    data:{
        text:"hello world",
        activated:""
    },
    methods:{
        handleDivClick:function () {
            this.activated = this.activated === "activated" ? "" : "activated"
        }
    }
});

モード3：スタイル変更スタイルオブジェクトのバインディング

<div id="exp3">
    <div @click="handleDivClick" :style="styleObj">{{text}}</div>
</div>

<script>
    var vm3 = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#exp3",
        data:{
            text:"hello world",
            styleObj:{
                color:"black"
            }
        },
        methods:{
            handleDivClick:function () {
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
            }
        }
    });

</script>

モード4：スタイル変更スタイル配列バインド

<div @click="handleDivClick" :style="[styleObj,{fontSize:'40px'}]">{{text}}</div>

レンダリング6.Vue条件

1.v-IF

<div v-if="show">{{message}}</div>

2.vショー

<div v-show="show">{{message}}</div>
  • なし、およびV-場合は、ページ上でレンダリングされません。それらの違いは、V-ショーはすでにページをレンダリングしますが、ディスプレイに結合されています。
var vm = new Vue({
    // el限制一个vue实例的管理范围。
    el:"#exp",
    data:{
        show:false,
        message:"hello world"
    }
});
  • また、入力端子：vm.show = trueの場合、彼らが表示されます。多くの場合、ディスプレイのタグを削除すると、V-ショーは明らかに、より効率的です。それは常に作成および破棄同じ、V-場合たくないので。逆に、V-であれば、より適切な。

3.v-IF-ELSE / V-他

  • V-ELSE
<div id="exp">
    <div v-if="show">{{message}}</div>
    <div v-else>Bye world</div>
</div>
  • V-ELSE-IF
<div id="exp">
    <div v-if="show === 'message'">{{message}}</div>
    <div v-else-if="show ==='count'">1</div>
    <div v-else>Bye world</div>
</div>
  • V-他に、V-ELSE-場合、V-IF結合ラベルは、書き込みに一緒に配置する必要があり、私は失敗することはできません

使用4.key値

  • キーの値を使用する必要があります
<div id="app">
    <div v-if="show">
        用户名: <input type="text" key="username">
    </div>
    <div v-else>
        邮箱名: <input type="text" key="email">
    </div>
</div>
<script>
    //每个元素标签设置一个key值, 表示它是唯一标签，如果2个key不一样则不会服用原来元素标签
    // 虚拟dom算法用的内容
    var app = new Vue({
        el:"#app",
        data:{
            show:false
        }
    })
</script>

V-のためのレンダリングで一覧7.Vue

  • の使用に基づいて、
<div id="exp">
    <div v-for="(item,index) of list">
        {{item}}------{{index}}
    </div>
</div>
var vm = new Vue({
    // el限制一个vue实例的管理范围。
    el:"#exp",
    data:{
        list:[
            "hello,",
            "James",
            "nice",
            "to",
            "meet",
            "you"
        ]
    }
});
  • タグV-の一意のキー値を与えるパフォーマンスを循環改善するために、たとえばあなたが書くことができます。
<div v-for="(item,index) of list" :key="index">
  • しかし、多くの場合、バックエンドのデータ項目によって返され、次のタイプに似ています：
list:[
    {id:001102,text:"hello"},
    {id:029303,text:"James"},
    ......
]
  • あなたは唯一のキーの値をバインドすることができ、V-のために
<div v-for="(item,index) of list" :key="item.id">

  • 私たちは、配列を操作すると、このような配列によって追加の添え字ではない：list[i]={id:03957569,text="bye"}だけのVUEを次のように提供することで：

    • モード1：
    push
pop
shift
unshift 
splice
sort
reverse
    • オプション2：
    改变数组的引用

プレースホルダテンプレート

  • パッケージテンプレートプレースホルダのいくつかの要素によって私たちを助けるが、サイクルで、本当にページにレンダリングすることができないテンプレートのプレースホルダ。

  • ループ配列

<template v-for="(item,index) of list" 
:key="item.id">
    <div>
        {{item.text}}
    </div>
    <span>
        {{index}}
    </span>
</template>
  • リサイクル対象
<div id="app">
    <div v-for="(item,key,index) of userInfo">
        {{item}}---{{key}}---{{index}}
    </div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            userInfo:{
                name:"James",
                age:28,
                gender:"male",
                salary:"secret"
            }
        }
    });
</script>

8.追加：ヴューは、この方法を設定します

  • 増加したデータオブジェクト
//app为一个实例
app.$set(app.userInfo,"address","beijing")
  • データの配列を増やします
vm.$set(vm.list,2,"wawawawaw")

小概要：

  • 配列内のモードデータを変更します

    改变数组的引用
使用数组的变异方法
set方法

  • オブジェクトモードでデータを変更します

    改变对象的引用
set方法

おすすめ

転載: www.cnblogs.com/xujunkai/p/12229978.html
おすすめ
ランキング
图神经网络(GNN)-第三方库(工具包)：networkx【处理图的工具包】
どのくらいのスパークマスターデータになるには？
アクセス許可の問題の欠如を示唆し、NPMを使用してMAC
WeChatアプレットを使用して、母親と乳児の店舗での赤ちゃんの入浴回数のカウンターカードを作成するにはどうすればよいですか？JavaScript変数はデータ値のコンテナーです。
el-tree自定义图标，使用图片或者dom自定义图标，element-plus
背景インターフェイスの開発
win10ノートパソコンの睡眠を解決するために、一定期間の後、自動シャットダウンの問題を覚ますことができません
[音声合成] MATLAB線形予測フォルマント検出とピッチパラメーターに基づく音声合成[Matlabソースコード562を含む]
Codeforces 1324E - 眠れる森のスケジュール
[ジャワ] [35]サブリスト傍受部一覧
アーカイブ
もっと
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

コードワールド

© 2018 codetd.com