Javascript - Vue - vue對象

MVC

即model（M）、html（V）、route、controller（c）

MVVM

VM是鏈接M和V的中介角色，VM提供了數據的雙向操做，做爲view的html展現數據時須要調用VM，VM調用model取數據再返回給html，做爲view的html須要操做數據就調用VM，VM則調用model來完成對數據的處理

data 數據

有了vue，你再也不須要被反覆的dom元素操做（增刪改查）所束縛，如今這一切只須要交給vue來完成。能夠把vue對象所關注的那個html元素當作是vue對象，它包含的子html元素所須要的數據能夠直接從vue對象的data中得到，省去了頻繁查找元素、向元素插入、刪除、修改數據的過程。

<div class="box">
    <p>{{msg}}</p>
    <p>{{obj.name}}-{{obj.age}}</p>
</div>

//vm：mvvm中的vm
var vm = new Vue({
    el: ".box",
    //data：mvvm中的model
    //data中能夠定義多個變量
    data: {
        msg: "hello world!!!",
        obj: {
            name:"sam",age:18
        }
    }
});

methods 方法組

//vm：mvvm中的vm
var vm = new Vue({
    el: ".box",   
    data: {
      ……
    },
    methods: {
        getElm: function () {

        },
        getData: function () {

        }
    }
});

vue內部獲取自身的屬性、函數

經過this關鍵字來訪問。注：在按鈕上使用@click=函數名來調用

var vm = new Vue({
    el: "#div",
    data: {
        msg: "hello"
    },
    methods: {
        show: function () {
            alert(this.msg); 
        }
    }
});

$refs 獲取vue對象所包含的html元素 

<div class="box"> 
    <p ref="htmlP" @click="getTxt">hello world</p>
</div>

var vm = new Vue({
    el: ".box",
    methods: {
        getTxt: function () {
            alert(this.$refs.htmlP.innerHTML); //獲取到的元素是原生的dom對象
        }
    }
});

監聽

1.監聽data

html中的數據由vue對象的data提供，使這些數據呈如今瀏覽器上。vue能夠自動監視data的改變，你也能夠手動使用watch來監視data的改變，監視data的改變能夠經過兩個例子來講明：

自動監視：兩個文本框中的數據來自於vue對象的data中的同一個數據，當用戶在第一個文本框改變數據時，第二個文本框的數據會跟着發生改變，這源於vue對data的自動監視

<div class="box">
    <input type="text" v-model="msg" />
    <input type="text" v-model="msg"  />
</div>
body>
html>
cript>
var vm = new Vue({
    el: ".box",
    data: {
        msg: "",
        obj: {
            name: "ss",
            age:18
        }
    },
});

 

手動監視 ：除了vue能夠自動監視data，還有watch也能夠作到。watch能夠即時捕獲數據的改變，watch會一直監視data，只要它的值發生了變化就會觸發監視函數。如下是監視一個文本框的值的變化，一旦它發生變化，則將變化的值更新到另外一個文本框中。

<div id="box">
    <input type="text" v-model="msg" />
   <input type="text" v-model="user.name" /> //v-model指令表示數據的雙向綁定，輸入框的值從vue的data中獲取，當用戶改變輸入框的值，也會同時改變data
</div>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            msg:"hello",
            user: {id:1,name:"sam"}
        },
        watch: {
            "msg":function(newVal, oldVal) {
                console.log("監聽到了msg的值發生了變化\n以前的值：" + oldVal + "以後的值" + newVal);
            },
            "user.name": function (newVal, oldVal) {
                console.log("監聽到了user的值發生了變化\n以前的值：" + oldVal + "以後的值" + newVal);
            }
        }
    });
</script>

2.監聽路由地址

路由機制參考：路由

watch除了監視data，還能夠監視路由地址的變化，只要瀏覽器地址欄進行了路由切換，watch就能夠捕獲到這個切換的動做，對此你能夠在watch中作一些操做來應對路由地址的變化

var vm = new Vue({
    el: ".box",    
    router: router,
    watch: {
        "$route.path": function (newval, oldval) {
            console.log(newval);//切換後的路由地址
        }
    }
});

computed 屬性處理

computed能夠建立一個通過計算處理後的數據，這個數據只能在computed中定義。computed的做用有兩點

1.數據不是直接從data中取出，訪問數據時會通過computed處理

2.computed處理的數據可能依賴於其它數據，若是是這樣，那麼它所依賴的其它數據一旦發生改變，就會當即被computed處理

<div id="box">
   <input type="text" v-model="msg1"/>
   <input type="text" v-model="msg2"/>
    <input type="text" v-model="msg3" />
</div>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            msg1: "",
            msg2:""
        },
        computed: {
            "msg3": function () {
                return this.msg1 + this.msg2; //在conputed中爲vue建立了一個通過計算處理後的屬性
            }
        }        
    });
</script>

 

Javascript - 學習總目錄