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>