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]"，将合并数组中所有对象下的内联元素

    
内联样式直接赋值方式
    
内联样式使用对象赋值方式
    
内联样式使用数组对象赋值方式