4.Vue.js-スタート

2762 ワード
Vue.jsスタート
各Vueアプリケーションは、Vueをインスタンス化することによって実現される必要がある.
構文の形式は次のとおりです.
var vm = new Vue({
  //   
})

 
次に、Vueコンストラクタで必要な内容を例に挙げてみましょう.

    
site : {{site}}

    
url : {{url}}

    
{{details()}}




    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "    ",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " -        ，    ！";
            }
        }
    })

 
VueコンストラクタにはDOM要素のidであるelパラメータが見られる.上記の例ではidはvue_det、div要素で:

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。


    
site : {{site}}

    
url : {{url}}

    
{{details()}}

 
Vueインスタンスが作成されると、Vueの応答システムにdataオブジェクトで見つけられるすべてのプロパティが追加されます.これらのプロパティの値が変更されると、htmlビューにも対応する変化が発生します.

    
site : {{site}}

    
url : {{url}}

    
Alexa : {{alexa}}




//        
var data = { site: "    ", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
//          ！
<span style="color: #ff0000;"><strong><em>document.write(vm.site === data.site) // true</em></strong></span>
document.write("<br>")
//              
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
 
// ……    
data.alexa = 1234
document.write(vm.alexa) // 1234

Vueインスタンスは、データ属性に加えて、いくつかの有用なインスタンス属性と方法を提供します.ユーザー定義のプロパティと区別するために、接頭辞$があります.例:

    
site : {{site}}

    
url : {{url}}

    
Alexa : {{alexa}}




//        
var data = { site: "    ", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
<span style="color: #ff0000;"><em><strong>document.write(vm.$data === data) // true</strong></em></span>
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true

 
 
　
 
MVC権限検証のActionFilterAttribute
Laravelでfakerを利用し、Eloquentのcursor()・all()・chunk()の速度を計測するために、テストの点数のデータを登録してみた(第1回)