【Vue 5分】vueの一般的なサンプルメソッドを理解する5分

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button onclick="addName()">增加</button>
<button onclick="deleteName()">删除</button>
<h3>你想要的东西：{
   
   {goods.name}}</h3>
价格：<input type="text" v-model.number="price"></br>
数量：<input type="number" v-model="count"></br>
总和：<input type="text" v-model="total"></br>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
goods:{},
price:0,
count:1,
total:0
    },

});
function addName(){
    Vue.set(vm.goods,'name','漫画书');
};
function deleteName(){
    if(vm.goods.name){
        vm.$delete(vm.goods,'name');
    }
}
vm.$watch('price',function(newVal,oldVal){
    return this.total = newVal*this.count;
})
vm.$watch('count',function(newVal,oldVal){
    return this.total = newVal*this.price;
})
    </script>
</body>

</html>

操作結果:

「追加」ボタンを押すたびに{{グッズ名}}内の「コミック」が表示され、「削除」を押すと{ {グッズ名}}が空欄で表示されます。価格と数量が変わると、合計金額も変わります。

2. インスタンスメソッドとイベント

1、vm.$on

このインスタンスメソッドは、vue インスタンスでカスタムイベントをリッスンするために使用できます. これらのイベントは vm.$emit によってトリガーされ、コールバック関数は、着信する時間トリガー関数のすべての追加パラメーターを受け取ります.

2、vm.$emit

このインスタンスメソッドは、現在のインスタンスでイベントをトリガーし、追加のパラメーターが関数コールバックのリスナーに渡されます。

3、vm.$once

このインスタンスメソッドの機能は、カスタムイベントをリッスンすることですが、トリガーできるのは 1 回だけです。トリガーされると、リスナーはオーバーフローします。

4、vm.$off

このインスタンスメソッドの機能は、カスタムリスナーを削除することです。

コードを見てみましょう。

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button @click="zengjia">增加</button>
{
   
   {num}}
<button onclick="jianshao()">减少</button>
<button onclick="off()">解除减少操作事件</button>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
      num:100
    },
    methods:{
        zengjia:function(){
            this.num++;
        }
    }
});
vm.$on("reduce",function(step){
    vm.num =step;
});
function jianshao(){
    vm.$emit("reduce",2);
}
function off(){
    vm.$off("reduce");
}
    </script>
</body>

</html>

実行結果：「減らす」ボタンをクリックするたびに値が減少し、「減少操作イベントの削除」をクリックすると、減少ボタンをクリックしても値は変化しません。

3. インスタンスメソッドとライフサイクル

1、vm.$マウント

このインスタンスメソッドの機能は次のとおりです。インスタンスが el オプションを受け取らない場合、関連付けられた DOM 要素がないため、インスタンスは「マウントされていない」状態になります。このマウント方法を使用して、手動マウントを実行できます。

2、vm.$destroy

このインスタンスメソッドは主に、インスタンスを完全に破棄し、他のインスタンスへの接続をクリアし、すべてのディレクティブとイベントリスナーを破棄するために使用されます。

3、vm.$nextTick

このインスタンスメソッドのコールバック関数は DOM が更新されるまで遅延されますが、作成されたフック関数によって vue ライフサイクルで DOM イベントが実行される場合は、.nextTick のコールバック関数に配置する必要があります。データが変更された直後に .nextTick を使用できるため、DOM の更新が完了した後にコールバック関数を呼び出すことができます。

コード例を通してそれを理解します：

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<h2 ref="first">{
   
   {first}}</h2>
<h3 ref="secnd">{
   
   {second}}</h3>
<input type="text" v-model="msg">
<p>{
   
   {msg}}</p>
<button onclick="destroy()">销毁</button>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
let vm = new Vue({
    data:{
    msg:"看到你就烦",
    first:'1',
    second:'2',
    },

});
vm.$mount('#app');
vm.first = '丘比特';
vm.second = vm.$refs.first.textContent;
console.log(vm.second);


Vue.nextTick(function(){
    vm.second = vm.$refs.first.textContent;
    console.log(vm.second);
})
function destroy(){
    vm.$destroy();
}
    </script>
</body>

</html>

実行結果: コンソール console が「Cupid」で、vm.$nextTick を実行した値が msg の値であることがわかります -- 「あなたに会えて迷惑です」、ページも同期的に更新されます。「破棄」をクリックし、テキストボックスに値やテキストなどを書き込むと、破棄されて更新されません。