vue 学习 1

1.数据绑定 v-bind ，v-model及其缩写：

在new vue的data中创建好元素，然后在标签内可以直接用value = ‘元素名字’绑定，不需要双花括号，单向绑定v-bind，不可修改，双向绑定v-model，可修改

单向数据绑定
双向数据绑定
双向数据绑定

你好

2. 计算属性

在 vue中创建一个computed 的类，类中包含需要进行计算的元素，每个元素也是一个类，里面包含get和set函数，get用于调用该元素，set用于修改该元素

const vm = new Vue({
data(){
return{firstname:'三',lastname:'张'} },
computed:{
fullName:{
//get作用：当读取fullName时，get会被调用，且返回值就用作fullName的值 什么时候被调用？1.初次读取fullName时；所依赖数据发生变化时
get(){
return this.lastname +"-" + this.firstname
},
//set什么时候调用：fullname被修改时
set(value){
console.log('set',value)
const arr = value.split('-')
this.lastname = arr[0]
this.firstname =arr[1]
}
}
}

在前端调用fullName时，不需要打括号，如果是用method方式，则需要，但method方式不如computed快速

姓:


名:


姓名: {{fullName}}