Vue 的使用心得,也许你也能顿悟

三海 2020年10月15日 79次浏览

打通任督二脉

秘籍是:

不要用操作dom的思维去用Vue,用操作数据的思维去用。

当我明白这一点后,我真的就像打通了任督二脉一样,从此所向睥睨,成为一代东方不败,呸,东方求败。

以前我们要改变页面的样式必须是通过获取dom元素改变元素的样式和内容。

而Vue只需要我们改变数据即可。

换句话说就是:

一切需要操作dom的全都用数据的变化去表示。

当然,这背后发生了啥,我们暂且不去深究。

我们阶段目的是用起来。

简单的例子

jQuery的操作

<html>
    <div id="app"> 
         message
    </div>
    <input type="text" id="input">
    <script>
        $('#input').on('change',function(){
            var _value = $(this).val();
            $('#app').text(_value);
        })
        
    </script>
</html>

Vue的操作

<html>
    <div id="app"> 
        {{message}}
    </div>
    <input type="text" v-model="message">
    <script>
        new Vue({
            el:'#app',
            data:{
                message:''
            }
        })
        
    </script>
</html>

这个例子是Vue官网上的。

每个了解过Vue的人都看到过,但有没有明白什么呢?

可以看到,jquery要根据输入的值改变界面需要进行dom的操作。

不过如果是用Vue的话,我们改变Vue实例中的message,界面也就相应的改变。

项目里经常会碰到增加,删除某些东西的功能,以前用jQuery的时候都是直接一梭子dom操作解决的。

现在我们直接对数据进行操作,增加或者删除掉数据,界面就变化了。

最后

一定要记住,不要用操作dom的思维去用Vue,用操作数据的思维去用吧。