Vue学习笔记一

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>