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 - 学习总目录