Vue学习笔记之应用创建和基础知识
1、安装方式
CDN方式安装：
2、创建应用
使用Vue内置对象创建一个应用，基本代码结构如下：
id为app的div元素，代表vue应用绑定的dom元素，vue对内部数据的操作都会直接影响dom的数据更新；
data：响应式数据均定义在data内部
methods：自定义函数定义在区域
mounted：DOM元素挂在应用后，可再此执行初始化操作，使用this对象操作data数据
computed：计算属性定义在此区域，一般只涉及读操作，基于响应式数据组合为一个新属性，提供给DOM元素渲染，也支持修改计算属性，但不建议这么做。
3、插值语法
使用两个{{}}大括号表示，如在data部分定义返回属性count，
{{count}}
3、v-if,v-else判断指令
cansee为真时展示v-if的p元素，否则展示v-else的p元素
can see me!
you can't see me!
4、v-on事件指令
v-on：click代表绑定onclick事件，在methods区域定义了事件处理函数，将响应式数据count执行加1操作，如下所示：
{{count}}
5、嵌套对象的使用
可以使用嵌套对象语法给DOM元素绑定数据，如下所示：
{{obj.nested.count}}
6、计算属性的使用
计算属性基于响应式数据组合新的数据，计算属性的 getter 应只做计算而没有任何其他的副作用，不要改变其他状态、在 getter 中做异步请求或者更改 DOM。另外，避免直接修改计算属性的值。
Has published books:
{{isPublishedBooks}}
总指导是：{{fullName}}
6、类的绑定
使用vue将class绑定到DOM元素有以下5种方式：
1)单属性语法赋值class方式，：class="{active:isActive,'text-danger':hasError}"，isActive为真将绑定active类，hasError为真将绑定text-danger类，同时为真将绑定两者
2)使用对象直接赋值class方式，:class="classObj"，直接绑定classObj中所有为真的类
3)使用计算表达式方式赋值，:class="classObj2"，classObj2是一个计算表达式，如下代码所示，也是绑定计算表达式返回对象中所有为真的class
4)使用数组方式赋值class，:class="[activeClass,errorClass]"，直接绑定activeClass和errorClass所对应的class
5)基于条件判断+数组的混合方式赋值class，:class="[{active:isActive},errorClass]"，如isActive为真，将绑定active和errorClass属性对应的class，否则只会绑定errorClass属性对应的class
单属性赋值class方式
多属性对象赋值class方式
计算表达式赋值class方式
class赋值数组对象方式
class赋值数组对象带条件判断方式
6、内联样式的绑定
使用vue将内联元素绑定到DOM元素有以下3种方式：
1)单属性语法赋值style方式，:style="{color:activeColor,fontSize:fontSize+'px'}"，绑定颜色和字体大小两个内联元素
2)使用对象直接赋值style方式，:class="styleObj"，直接绑定styleObj中所有的内联元素
3)使用数组方式赋值style方式，:class="[styleObj,styleObj2]"，将合并数组中所有对象下的内联元素
内联样式直接赋值方式
内联样式使用对象赋值方式
内联样式使用数组对象赋值方式