Vue学习笔记一

最新推荐文章于 2024-05-15 01:08:22 发布

原创最新推荐文章于 2024-05-15 01:08:22 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#Vue #学习笔记 #前端框架

前端专栏收录该内容

72 篇文章

订阅专栏

本文是Vue学习笔记的一部分，重点探讨了v-once、v-html、数据绑定的计算方式、修饰符的应用、计算属性及其与方法的区别、watcher的使用以及计算属性的setter。内容涵盖如何避免重复计算、监听数据变化以及如何设置计算属性的更新。

v-once

当name修改的时候，不会改变，只绑定一次，并且会影响到span节点中所有的数据绑定

<span v-once>姓名:{{name}}</span>

v-html

这里讲rawHTML解析为HTML代码，主要使用在后台编辑文章发布的时候

<span v-html="rawHTML"></span>

数据绑定时，也可以计算，但是必须是单个表达式，对于if语句采用三元表达式

例如通过后台获取图片名称

<img v-bind:src=" name+'.png' ">

修饰符的使用

阻止表单默认事件

<form v-on:submit.prevent = "onSubmit"></form>

计算属性

官网推荐只是进行简单的计算，不要进行复杂的计算
简单计算：

<span>{{count+1}}<span>

复杂计算：

<div id="app">
        <p>{{message}}</p>
        <p>{{reverseMessage}}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message: "xiaoD",
            },
            computed:{
                reverseMessage: function(){
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

上面的reverseMessage只是依赖于message。

计算属性 VS 方法

这两种方法实现起来最后的结果是一样的，但是计算属性是基于它们依赖的依赖进行缓存的。只要它的依赖没有改变，那么访问reverseMessage会马上返回结果，不会重新执行函数。如果它没有依赖，只是单纯的返回一个时间，那么就一直不会改变。

watch

对于数据的监听，还有一个watch属性，通常情况下我们使用computed

<div id="app">
        <input type="text" v-model="firstName" v-bind:value="firstName">
        <input type="text" v-model="lastName" v-bind:value="lastName">
        <input type="text" v-model="fullName" v-bind:value="fullName">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                firstName:'',
                lastName:'',
                fullName:''
            },
            watch:{
                firstName: function(val){
                    this.fullName = val + "--" +this.lastName
                },
                lastName: function(val){
                    this.fullName = this.firstName + "--" + val
                }
            }
        })
    </script>

计算属性的setter

在控制台输入app.fullName = ‘xiao D’就会得到结果，这里记住在data中不能够定义fullName，因为fullName是计算属性

<div id="app">
        <input type="text" v-model="firstName" v-bind:value="firstName">
        <input type="text" v-model="lastName" v-bind:value="lastName">
        <span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                firstName:'',
                lastName:'',
            },
            computed:{
                fullName: {
                    get: function(){
                        return this.firstName + ' ' + this.lastName
                    },
                    set: function(newFullname){
                        var names = newFullname.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                }
            }
        })
    </script>