Vue related computed, watch, REF, filters, directives

1.computed

Data check: We can use methods instead of computed, which has the same effect as both, but computed is based on its dependency cache, which is re-evaluated only when the dependency changes. With methods, functions are always called again when rendering again.

Here’s an example:

 <div id="app">
        <input type="text" v-model="x"><br>
        <input type="text" v-model="y"><br> <! - {{the add ()}} x300 times - > {{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>
Copy the code

Perform ADD and computed, and the results are as follows

2.watch

You name the method after the person you’re listening to,

The index.html file

 
 <div id="app">
        <input type="text" v-model="names"><br>
        {{sum}}
    </div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            names: 'ws',
            sum: ' '}, // watch: {// name the method named after the name of the target:function (newdata, oldata) {
                var xhr = new XMLHttpRequest();
                var temp = this;
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.responseText == 0) {
                            console.log("You can't change it."Temp. Sum = oldata}else{// Can change console.log("It can be changed")
                            temp.sum = newdata
                        }
                    }
                }
                xhr.open('get'.'http://127.0.0.1:8000/? name='+ newdata); xhr.send(); }}}); </script>Copy the code

. The index. The js file

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); })}})Copy the code

The beginning of the file directory CMD input node index. The js, url path is: http://127.0.0.1:8000/index.html.

Enter content in the Input box. When the content is admin, the data is returned to 0, and the front-end page accepts 0. Console. log. 1.

2.

3.

3.ref

Ref is a way to customize node attributes,this.$refs to get all the node objects of ref attributes, try not to use ref violates MVVM design principles.

<div id="app">
        <input type="button" value="Button" @click="dianji">
        <p ref="ks"Var app = new Vue({el: </p> </div> <script>'#app',
        data: {

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

    });


</script>
Copy the code

4.filters

Vue has private filters and global filters

    <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 > / / global filter 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>Copy the code

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: {}, // Private custom directive 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>
Copy the code