插值语法实现
<div id="root">
姓：<input type="text" value='张'><br/>
名: <input type="text" value='san'><br/>
姓名：<span>???</span>
</div>
- 这样就是输入框里面有写死的初始值value，但vue没有工作；
- 所以这个值不应该是写死的，是vue把他读出来的；
vue读初始值
<div id="root">
姓：<input type="text" v-model='firstName'><br/>
名: <input type="text" v-model='lastName'><br/>
全名：<span>{{firstName}}-{{lastName}}</span>
</div>
<script>
new Vue({
el:'#root',
data:{
firstName:'张'，
lastName:'三'
}
})
</script>
- 如果value前面没有用冒号绑定的话，
value输入框里显示的是“firstName”，“lastName”； - value前用v-bind冒号绑定的话，
:value就是读取js语句显示的是“张三” - 因为当输入框里面的内容变化时，后台也要收集数据，所以要用
v-model:value,简写形式：v-model;
methods实现
函数后面加不加小括号的区别:
- 当调用一个函数时，例如点击事件时，fullname后加不加（）都一样；
- 当插值法时，
<span>{{fullname}}</span>,fullname不加括号是把这个函数插入这里面； - 当有括号时，是把这个函数的返回值插进去
<span>{{fullname()}}</span>,
<div id="root">
姓：<input type="text" v-model='firstName'><br/>
名: <input type="text" v-model='lastName'><br/>
全名：<span>{{firstName}}-{{lastName}}</span>
</div>
<script>
new Vue({
el:'#root',
data:{
firstName:'张'，
lastName:'三'
},
methods:{
fullname(){
return this.firstName + this.lastName
}
}，
})
})
</script>
- data 中的任何数据发生变化时，例如firstName变化，vue模板里的内容，都会重新解析一遍；
- 如果直接用到这个firstName,模板中则会更新，如果没有用到，就不会变；
- 如果是调用的函数用到firstName,不知道返回值，和之前的是否一样，所以会重新调用fullName()函数，
