vue 学习第一天

指令------v-model 创建双向数据绑定

v-bind只能实现数据的单项绑定，从model自动绑定到view中，无法实现数据的双向绑定。
使用v-model来实现数据表单元素和我们的model中的数据的双向绑定。
注意：
v-model只能应用在表单元素中（input （radio，text,address,email ） select ,textare 等等）

完成案例使用v-model 来是实现计算器
定义两个输入，操作符，在定义一个计算的方法。实现该方法。

eval 将字符串解析执行 但是有些投机取巧的嫌疑，正式开发中，尽量少用

vue中的样式使用

第一种使用方式，直接传递一个数组,需要使用v-bind绑定数据
在数据中使用三元表达式，但是可读性不太友好，在数据中使用对象，来代替三元表达式，可以将style包装成一个类，再将判断条件传入，提高可读性
最后可以将所有的属性包装成一个对象，给他设置true或者false，同样可以添加样式

使用内联样式：
属性如果有短线，必须使用引号将属性引住。‘font-size’:200 但是像color之类的直接定义 color：red

vue中的 v-for循环普通数组

v-for(item,i) 可以获取list中的每个值，和下标索引。

可以遍历普通数组，对象数组 ，对象的键值对属性，迭代数字。

在遍历对象身上的键值对的时候，除了有val key 在第三个位置还有一个索引

如果使用v-for迭代数字，count值从1开始。

v-for中key属性的注意事项：
2.20+的版本里，当在组件中使用v-for的时候，key现在是必选的。

需要将key值绑定唯一的一个值。
1.key属性只能使用number或者string
2.key在使用的时候必须使用v-bind属性绑定的形式，制定key 的值

vue中的v-if 和v-show 的使用

v-if的是特点：
每次都会重新删除或者创建元素
v-show
每次不会dom的删除和创建操作，只是切换了元素的display：none样式
在性能方面的比较：
v-if有较高的切换性能消耗。v-show有较高的初始渲染消耗
如果元素涉及频繁的切换，最好不要使用v-if，推荐使用v-show
如果元素可能永远也不会被显示出来给用户看到，则推荐使用v-if

复习总结

1、mvc和mvvm的区别
后端和前端的叫法不同，mvc modelview controller 将整个前端分为 mvvm ：model view vm
vm是一个整体，提供双向数据绑定
2、开发的基本代码的结构
3、基本指令
插值表达式 v-cloak v-text v-bind（缩写:）v-on(缩写:@) v-model v-for v-if v-show
4、事件修饰符 .stop .prevent .capture .self .once
5、el 指定要控制的区域 data 是个对象 指定了控制区域要用到的数据 methods：虽然带个s但是是个对象，这里可以自定义方法
6、在vm实例中，如果要访问data 上的数据，或者methods的方法 需要使用this
7、在v-for中要会使用key属性（只能使用 number和string）
8、 v-model 只能应用于表单元素
9、在vue中绑定样式：v-bind:class v-bind:style