vue-基础和动态绑定
一. 邂逅Vuejs 基础
1.1. 认识Vuejs
let(变量)/const(常量)
字符串*数字=NAN
1.2. 安装Vue
CDN引入
开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
下载引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
npm安装
后续通过webpack和CLI的使用，我们使用该方式。
1.3. Vue的初体验
Hello Vuejs
mustache -> 体验vue响应式
{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。
Vue列表展示
v-for
后面给数组追加元素的时候, 新的元素也可以在界面中渲染出来
Vue计数器小案例
事件监听: click -> methods
1.4. Vue中的MVVM
1.5. 创建Vue时, options可以放那些东西
el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
生命周期函数
二.插值语法
mustache语法
v-once
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
v-html
如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
v-text
v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
v-pre: {{}}
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如下面的代码：
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}
v-cloak: 斗篷
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
三. v-bind
前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
3.1. v-bind绑定基本属性
v-bind:src
:href
在开发中，有哪些属性需要动态进行绑定呢？
还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
3.2. v-bind动态绑定class
绑定方式：对象语法
对象语法: 对象语法的含义是:class后面跟的是一个对象。
用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
绑定方式：数组语法
数组语法的含义是:class后面跟的是一个数组。
数组语法有下面这些用法：
用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
3.3. v-bind动态绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式。
在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
对象语法:
:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性
数组语法:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型
多个值以，分割即可
四. 计算属性
案例一: firstName+lastName
我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
案例二: books -> price
