vue的知识点1

最新推荐文章于 2022-01-18 15:53:32 发布

linxiaoduo

最新推荐文章于 2022-01-18 15:53:32 发布

阅读量232

点赞数 1

本文链接：https://blog.csdn.net/linxiaoduo/article/details/80185417

版权

1. 文本插值是最常见的一种数据绑定方式，语法是使用双括号（Mustache）将变量包含

<div id="app">
        <p>{{message}}</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })

    </script>

上述 HTML 代码中的 message 与 script 中 data 的 message 属性绑定，两者数据同步，当我们更新data中对应的属性值时，无需操作 HTML，页面会自动更新数据。

我们也可以使用 v-once 指令，表示只执行一次插值，后面如果数据有改变，插值将不会更新。

<body>
    <div id="app">
        <p v-once>{{message}}</p>
        <!-- message只会渲染一次 -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })

    </script>
</body>

2.输出 HTML 代码，可以使用 v-html 指令。

<body>
    <div id="app">
        <p v-html="message"></p>
        <!-- 渲染结果
            <p><h1>hello</h1></p>
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                message:'<h1>hello</h1>'
            }
        })

    </script>
</body>

注意：在页面上动态的渲染html是一件很危险的事情，因为它很容易导致 XSS 攻击 (跨站脚本攻击)。

3.要给 HTML 元素绑定属性，不能直接使用文本插值，vue 有特定的指令【v-bind】进行属性的绑定

<body>
    <div id="app">
        <p v-bind:class="value">hello</p>
        <!-- 渲染结果
            <p class="content">hello</p>
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                value:'content'
            }
        })

    </script>
</body>

属性的插值使用比较频繁，所以vue也提供了该指令的简写【:】，一个冒号，效果跟使用【v-bind:】一样。

<body>
    <div id="app">
        <h2 v-bind:id="vid" v-bind:class="vclass" :title="vtitle">vue多属性绑定</h2>
        <!-- 渲染结果
            <h2 id="myid" class="myclass" title="mytitle"></h2>
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                vid:"myid",
                vclass:'myclass',
                vtitle:'mytitle'
            }
        })

    </script>
</body>

4.javascript表达式

<body>
    <div id="app">
        <h2>{{name.toLowerCase()}}</h2>
        <!-- 渲染结果
            <h2>myapp</h2>
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                name:'MYAPP'
            }
        })

    </script>
</body>

注意：使用 JavaScript 表达式进行运算时，只能使用单个表达式或者链式调用，不能使用语句。

5.指令指的是带有【v-】前缀的特殊属性，在插值中，我们已经使用了【v-html】和【v-bind】这两个指令。可以看出，指令的职责是当表达式的值改变时，响应式地作用于 DOM。

<a v-bind:href="url"></a>

上述代码中 href 就是【v-bind】指令的参数，告知【v-bind】指令将 href 属性和 url 的值绑定在一起。

6. 过滤器

对于一些要经过复杂计算才显示的插值，简单的表达式可能无法满足，这时可以使用vue的过滤器进行处理。

过滤器在插值和【v-bind】指令中使用，格式如下：

<!-- 在两个大括号中 -->
{{ name | myfilters }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

<body>
    <div id="app">
        <h2>{{name | myfilter}}</h2>
        <!-- 渲染结果
            <h2>ppaym</h2>
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                name:'myapp'
            },
            filters:{
                myfilter(value){
                    return value.split('').reverse().join('');
                }
            }
        })

    </script>
</body>

上述代码中定义了一个myfilters的过滤器，功能是将插值进行反转后输出

多个过滤器可以串联使用，下面实例是在一个插值中使用了两个过滤器：

<body>
    <div id="app">
        <h2>{{name | myfilter | touppercase}}</h2>
        <!-- 渲染结果
            <h2>PPAMY</h2>
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                name:'myapp'
            },
            filters:{
                myfilter(value){
                    return value.split('').reverse().join('');
                },
                touppercase(value){
                    return value.toUpperCase();
                }
            }
        })

    </script>
</body>

7.对于【v-on】和【v-bind】这两个最常使用的指令，vue提供了简写。

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

8.计算属性computed

如果在模板中使用一些复杂的表达式，会让模板显得过于繁重，且后期难以维护。对此，vue.js 提供了计算属性（computed），你可以把这些复杂的表达式写到里面。

<body>
    <div id="app">
        a={{a}}===b={{b}}
        <!-- 渲染结果
            a=1===b=2
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
               a:1
            },
            computed:{
                b:function(){
                    return this.a + 1;
                }
            }
        })

    </script>
</body>

9.缓存是计算属性的一大特点，使用计算属性时，每次获取的值是基于依赖的缓存值，也就是说，当数据源未发生变动时，获取的值将一直是缓存值。

<body>
    <div id="app">
        a={{a}}===b={{b}}
        <!-- 渲染结果
            a=1===b=2
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
               a:1
            },
            computed:{
                b:function(){
                    return this.a + 1;
                }
            }
        })
        vm.b = 8;
    </script>

上述实例中，我们对 b 进行了重新赋值，但是没有改变a的值，因为 b 是依赖于 a 的，所以最终 b 的结果还是2

10.计算属性与methods的区别

计算属性能实现的功能，使用方法（methods）也能实现，但两者还是有本质的不同，区别如下：

计算属性获取的是缓存值，而methods是直接调用函数进行计算所得。
计算属性中的函数在dom加载后马上执行，并将结果显示在页面上。methods中的函数需要一定的触发条件，否则不会执行。

11.vue.js 计算属性有两个方法，分别为 getter 和 setter，当没有指明方法时，默认使用 getter

<body>
    <div id="app">
        a={{a}}===b={{b}}
        <!-- 渲染结果
            a=1===b=2
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
               a:1
            },
            computed:{
                b:{
                    get:function(){
                        return this.a + 1;
                    }
                }
            }
        })
    </script>
</body>

<body>
    <div id="app">
        {{title}}
        <!-- 渲染结果
            hello,javascript
         -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
               title:'hello,html'
            },
            computed:{
                message:{
                    get:function(){
                        return this.title;
                    },
                    set:function(newValue){
                        this.title = newValue;
                    }
                }
            }
        })
        vm.title="hello,javascript"
        // 不设置这一句会输出hello,html
    </script>
</body>