Vue有关的computed、watch、ref、filters、directives

1.computed

资料查阅:我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。

举个例子:

 <div id="app">
        <input type="text" v-model="x"><br>
        <input type="text" v-model="y"><br>
        <!-- {{add()}}   x300次-->
        {{kks}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            x: '',
            y: ''
        },
        // methods: {
        //     add: function () {
        //         return this.x + this.y + Date.now()
        //     }
        // },
        computed: {
            kks: function () {
                return this.x + this.y + Date.now()
            }
        },
    });
</script>

执行add和computed，得到效果如下

add的输出的有时间没有变,而kss的时间没有变化。

2.watch

监听目标为谁，就以谁的名字命名方法，

index.html 文件

 
 <div id="app">
        <input type="text" v-model="names"><br>
        {{sum}}
    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            names: 'ws',
            sum: '',
        },
        //监听器，监听的是data里面的数据变化
        watch: {
            //监听目标为谁，就以谁的名字命名方法
            names: function (newdata, oldata) {
                var xhr = new XMLHttpRequest();
                var temp = this;
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.responseText == 0) {
                            console.log("不能改")
                            //不能改
                            temp.sum = oldata
                        } else {
                            //可以改
                            console.log("可以改")
                            temp.sum = newdata
                        }
                    }
                }
                xhr.open('get', 'http://127.0.0.1:8000/?name=' + newdata);
                xhr.send();
            },
        }

    });

</script>

.index.js文件

var http = require('http');
var server = http.createServer();
server.listen(8000);
server.on('request', function (req, res) {
    var urls = require('url').parse(req.url, true);
    if (urls.pathname == '/') {
        if (urls.query.name == 'admin') {
            res.end('0')
        } else {
            res.end('1')
        }
    } else {
        require('fs').readFile('.' + urls.pathname, function (err, data) {
            res.end(data);
        })
    }

})

在文件目录下启动CMD输入node index.js，url路径为：http://127.0.0.1:8000/index.html。

在input框输入内容。当内容为admin时候，数据回过去为0，前端页面接受0.console.log不能改。 1.

2.

3.

3.ref

ref 是一个自定义节点属性的方式,this.$refs 来获取所有ref属性的节点对象,尽量不要使用 ref违背了MVVM的设计原则.

<div id="app">
        <input type="button" value="按钮" @click="dianji">
        <p ref="ks">哈哈</p>
    </div>
<script>
    // 尽量不要使用  ref违背了MVVM的设计原则
    var app = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            dianji: function () {
                console.log(this.$refs.ks.innerHTML)
            }
        }

    });


</script>

4.filters

vue有私有过滤器和全局过滤器两种

    <div id="app">
        <input type="text" v-model="res">
        {{res|myf|nu}}
    </div>
    <div id="app2">
        <input type="text" v-model="res">
        {{res|myf|nu}}
    </div>

</body>
<script>
    //全局过滤器
    Vue.filter('myf', function (val) {
        return val.toUpperCase();
    })
    Vue.filter('nu', function (val) {
        var reg = /\d/g;
        return val.replace(reg, "*");
    })
    var app = new Vue({
        el: '#app',
        data: {
            res: "msg"
        },
        methods: {

        },
        //私有过滤器、局部过滤器
        // filters: {
        //     myf: function (val) {
        //         return val.toUpperCase();
        //     },
        //     nu: function (val) {
        //         var reg = /\d/g;
        //         return val.replace(reg, "*")
        //     }
        // }

    });
    var app = new Vue({
        el: '#app2',
        data: {
            res: "msg"
        },
        methods: {

        },
        //私有过滤器、局部过滤器
        // filters: {
        //     myf: function (val) {
        //         return val.toUpperCase();
        //     },
        //     nu: function (val) {
        //         var reg = /\d/g;
        //         return val.replace(reg, "*")
        //     }
        // }

    });
</script>

5.directives(自定义指令) 自定义指令.不具备双向绑定

 <div id="app">
        <input type="text" v-model="res">
        <p v-red>123</p>
        <p v-color="res">123</p>
</div>
<script>
    // Vue.directive("red", {
    //     inserted: function (el) {
    //         el.style.background = 'red';
    //     }
    // })
    var app = new Vue({
        el: '#app',
        data: {
            res: "msg",
            // green: "pink"
        },
        methods: {

        },
        //私有自定义指令
        directives: {
            red: {
                inserted: function (el) {
                    el.style.color = 'red';
                }
            },
            color: {
                inserted: function (el, elm) {
                    console.log(elm)
                    el.style.color = elm.value;
                    // elm.expression:green
                }
            },
        }
    });
</script>