自学vue（尚硅谷）
1.vue的配置和基础
vue的配置相当简单，说白了就像是在js里使用jQuery一样。只需要在head中引用vue.js即可.
配置完成可以去谷歌商店里下载一个vue的插件便于后续开发的使用
2.vue基础语法
创建容器
点击查看代码
插值语法{{name}} , 你年龄是 {{age}}
插值语法和指令语法
插值语法{{name}} , 你年龄是 {{age}}
数据绑定
单向数据绑定：
双向数据绑定：
简写
- v-bind 可以简写成 ：
- v-model:value可以简写成v-model
其他写法
// el 的两种写法 第一种 直接再vue下写el：'#root'; 第二种 通过v.$mount('#root') 挂载;
// data的两种写法。
// 第一种 对象式：
data:{
}
第二种 函数式
data:function(){
return{
name : 'lzy'
}
}
mvvm原理
我不想写太复杂，就拿最好理解的话来描述
简单来说就是vue帮我们写了一个中间层 VM。
我们写在vue实例中的所有的数据，都被vue用数据代理或者劫持的形式，放在了vm中。
这里就是我们的vm，里面不仅仅有我们在data中定义的数据，vue贴心的用数据代理的方法放在vm里。
想要比较通透的了解vm的工作原理，先了解一下数据代理
关于数据代理
这个是一个比较有趣的知识点，可惜在学校没有老师讲过这个
数据代理并非一个复杂难懂的东西，只是it届尽喜欢取一些让人望而生畏的专业名词。
简单来说：数据代理就是一个对象对另一个对象的属性进行操作（读/写）
比如我们定义一个person的对象。
let person = {
name : 'lzy',
sex:'男',
}
我们在原生js中通过 Object.defineProperty方法来对它进行数据代理的操作。
Object.defineProperty(person,'age',{
// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log("有人读取了age");
return number
},
set(value){
console.log("有人修改了age,改成了:",value);
number = value;
}
})
我们并没有在person这个对象中直接添加age，而是通过 Object.defineProperty对age进行实时的“监视”。
有人读取或者是修改age时，这个属性会随之被动态的变化。
我们将读取age时访问get()得到返回值这一动作叫做getter；
同理将修改age时访问set()这一动作叫做setter;
这样一来，我们不难理解，vue做了一系类复杂的工作，将我们需要用到的vue实例中的东西放在了vm中，方便我们随时调用。
所以，当我们在html中需要调用vue中的数据时，一定要再三的从vm中去寻找数据，而不是在我们的vue实例中。
事件处理
我个人觉得事件处理在逻辑上不难理解，毕竟在开发过程中事件一旦被定义，就不要去修改。
因此，我们需要用到什么事件，再去查找该事件的语法即可。
事件处理
事件处理
计算属性
计算属性（computed）很容易和函数（methods）混淆
怎么说呢，我之前在数据代理中说到，vue会贴心的将我们在实例中定义的数据给实现数据代理。
也就是我们在data中定义的数据，被代理后已经有了getter和setter，但是methods却没有。
我们不难看出这里是一个函数的标记。也就是不可被修改。
那么问题来了，如果有个需求，是我们要实时计算，我们是使用methods还是computed呢？
姓名案例：
输入姓和名，自动拼接一个 姓-名 的结果。
实际上这个案例，我们用简单的插值语法也能实现。用methods当然实现的更好。那么computed和methods区别在哪里。
当我们写完methods时，需要计算的地方会自动调用methods。那么如果我们的工程里有许多地方需要用到这个计算结果，我们用几次就需要调用几次，这样一来vue的工作量实在是太大了。
我们来看一下computed，你会发现里面有get()和set()。
computed: {
fullname: {
// get() 什么时候调用？ 1.初次读取fullname时 2.所依赖的数据发生改变时 （firstName / lastName）
get() {// 此时get中的this 已经指向了vm，所以可以直接拿vm里面的参数
return this.firstName + '-' + this.lastName;
},
// set() 什么时候调用？ 只有当fullname被修改的时候才会调用
set(){
}
}
}
// data经过数据代理之后在vm里成了属性
// computed经过数据代理之后在vm里成了计算属性
如果我们使用计算属性（computed），我只有第一次使用时会调用，之后会自动缓存下来，其他地方直接拿缓存的值。
如果计算所依赖的数据发生变化时，会重新调用一边computed（getter）。
计算属性的简写
既然你都用到了计算属性，你当然是不会去修改计算属性，所以我不用每次都写getter和setter。
计算属性默认的就是getter。只需要在计算属性下定义一个函数，在vm中就是拥有getter的计算属性
computed:{
fullname:function(){ //function 默认就是getter的形式，且 this已经指向 vm
return this.firstName+"-"+this.lastName;
}
}