Vue学习笔记一

谁践踏了优雅 2022-06-09 10:56 183阅读 0赞

#### v-once ####

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

#### v-html ####

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

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

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

#### 修饰符的使用 ####

阻止表单默认事件

#### 计算属性 ####

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

<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>