创建Vue实例传入的options
在创建Vue实例的时候，传入了一个对象options。
◼ el:
◼ 类型：string | HTMLElement
◼ 作用：决定之后Vue实例会管理哪一个DOM。
◼data:
◼ 类型：Object | Function （组件当中data必须是一个函数）
◼ 作用：Vue实例对应的数据对象。
◼ methods:
◼ 类型：{ [key: string]: Function }
◼ 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
Mustache
◼如何将data中的文本数据，插入到HTML中呢？
◼我们已经学习过了，可以通过Mustache语法(也就是双大括号)。
◼Mustache: 胡子/胡须.
◼我们可以像下面这样来使用，并且数据是响应式的
v-once
◼但是，在某些情况下，我们可能不希望界面随意的跟随改变
◼这个时候，我们就可以使用一个Vue的指令
◼v-once:
◼该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
◼该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
v-html
◼ 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
◼ 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
◼ 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
◼ 如果我们希望解析出HTML展示
◼ 可以使用v-html指令
◼ 该指令后面往往会跟上一个string类型
◼ 会将string的html解析出来并且进行渲染
v-text
◼ v-text作用和Mustache比较相似：都是用于将数据显示在界面中
◼ v-text会将接收到的值以字符串的形式展示到界面中
v-pre
◼ v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
◼ 比如下面的代码：
◼ 第一个h2元素中的内容会被编译解析出来对应的内容
◼ 第二个h2元素中会直接显示{{message}}
v-cloak
◼ 在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
◼ cloak: 斗篷
v-bind
动态绑定属性：
◼ 比如动态绑定a元素的href属性
◼ 比如动态绑定img元素的src属性
◼ 这个时候，我们可以使用v-bind指令：
◼ 作用：动态绑定属性
◼ 缩写：:
◼ 预期：any (with argument) | Object (without argument)
◼ 参数：attrOrProp (optional)
◼ v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
◼ 比如通过Vue实例中的data绑定元素的src和href，
v-bind语法糖
◼ v-bind有一个对应的语法糖，也就是简写方式
◼ 在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
v-bind绑定class（一）
◼ 很多时候，我们希望动态的来切换class，比如：
◼ 当数据为某个状态时，字体显示红色。
◼ 当数据另一个状态时，字体显示黑色。
◼ 绑定class有两种方式：
◼ 对象语法
◼ 数组语法
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>
v-bind绑定class（三）
◼ 绑定方式：数组语法
◼ 数组语法的含义是: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>
v-bind绑定style（一）
◼ 我们可以利用v-bind:style来绑定一些CSS内联样式。
◼ 在写CSS属性名的时候，比如font-size
◼ 我们可以使用驼峰式 (camelCase) fontSize
◼ 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
◼ 绑定class有两种方式：
◼ 对象语法
◼ 数组语法
v-bind绑定style（二）
◼ 绑定方式一：对象语法
◼ 绑定方式二：数组语法
:style="{color: currentColor, fontSize: fontSize + ‘px’}"
◼ style后面跟的是一个对象类型
➢ 对象的key是CSS属性名称
➢ 对象的value是具体赋的值，值可以来自于data中的属性
计算属性的应用
计算属性的setter和getter
◼ 每个计算属性都包含一个getter和一个setter
◼ 在上面的例子中，我们只是使用getter来读取。
◼ 在某些情况下，你也可以提供一个setter方法（不常用）。
◼ 在需要写setter的时候，代码如下：
计算属性的缓存
◼ 我们可能会考虑这样的一个问题：
◼ methods和computed看起来都可以实现我们的功能，
◼ 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
事件监听
◼ 在前端开发中，我们需要经常和用于交互。
◼ 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
◼ v-on介绍
◼ 作用：绑定事件监听器
◼ 缩写：@
◼ 预期：Function | Inline Statement | Object
◼ 参数：event
v-on基础
◼ 这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用
◼ 下面的代码中，我们使用了v-on:click="counter++”
◼ 另外，我们可以将事件指向一个在methods中定义的函数
◼ 注：v-on也有对应的语法糖：
◼ v-on:click可以写成@click
v-on参数
◼ 当通过methods中定义方法，以供@click调用时，需要注意参数问题：
◼ 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
◼ 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进
去
◼ 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
v-on修饰符
◼ 在某些情况下，我们拿到event的目的可能是进行一些事件处理。
◼ Vue提供了修饰符来帮助我们方便的处理一些事件：
◼ .stop - 调用 event.stopPropagation()。
◼ .prevent - 调用 event.preventDefault()。
◼ .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
◼ .native - 监听组件根元素的原生事件。
◼ .once - 只触发一次回调。
v-if、v-else-if、v-else
◼ v-if、v-else-if、v-else
◼ 这三个指令与JavaScript的条件语句if、else、else if类似。
◼ Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或
组件
◼ 简单的案例演示：
◼ v-if的原理：
◼ v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
◼ 也就是根本没有不会有对应的标签出现在DOM中。
v-show
◼ v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
◼ v-if和v-show对比
◼ v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
◼ v-if当条件为false时，压根不会有对应的元素在DOM中。
◼ v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
◼ 开发中如何选择呢？
◼ 当需要在显示与隐藏之间切片很频繁时，使用v-show
◼ 当只有一次切换时，通过使用v-if
v-for遍历数组
◼ 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
◼ v-for的语法类似于JavaScript中的for循环。
◼ 格式如下：item in items的形式。
◼ 我们来看一个简单的案例：
◼ 如果在遍历的过程中不需要使用索引值
◼ v-for=“movie in movies”
◼ 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
◼ 语法格式：v-for=(item, index) in items
◼ 其中的index就代表了取出的item在原数组的索引值。
v-for遍历对象
◼ v-for可以用户遍历对象：
◼ 比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。
组件的key属性
key的作用主要是为了高效的更新虚拟DOM。
检测数组更新
◼ 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
◼ Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
◼ push()
◼ pop()
◼ shift()
◼ unshift()
◼ splice()
◼ sort()
◼ reverse()
过滤器-filters
◼ Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
过滤器-参数问题
◼ 过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到
message 的值作为第一个参数
◼ 过滤器是 JavaScript 函数，因此可以接收参数：
◼ 这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，
表达式 arg2 的值作为第三个参数。
串联-过滤器
◼ 过滤器可以串联：
◼ 在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继
续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
表单绑定v-model
◼ 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
◼ Vue中使用v-model指令来实现表单元素和数据的双向绑定。
◼ 案例的解析：
◼ 当我们在输入框输入内容时
◼ 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，
message发生改变。
◼ 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，
所以DOM会发生响应的改变。
◼ 所以，通过v-model实现了双向的绑定。
◼ 当然，我们也可以将v-model用于textarea元素
v-model原理
◼ v-model其实是一个语法糖，它的背后本质上是包含两个操作：
◼ 1.v-bind绑定一个value属性
◼ 2.v-on指令给当前元素绑定input事件
◼ 也就是说下面的代码：等同于下面的代码：
v-model：radio
◼ 当存在多个单选框时
v-model：checkbox
◼ 复选框分为两种情况：单个勾选框和多个勾选框
◼ 单个勾选框：
◼ v-model即为布尔值。
◼ 此时input的value并不影响v-model的值。
◼ 多个复选框：
◼ 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
◼ 当选中某一个时，就会将input的value添加到数组中。
v-model：select
◼ 和checkbox一样，select也分单选和多选两种情况。
◼ 单选：只能选中一个值。
◼ v-model绑定的是一个值。
◼ 当我们选中option中的一个时，会将它对应的value赋值到mySelect中
修饰符
◼lazy修饰符：
◼默认情况下，v-model默认是在input事件中同步输入框的数据的。
◼也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
◼lazy修饰符可以让数据在失去焦点或者回车时才会更新：
◼number修饰符：
◼默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型
进行处理。
◼但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
◼number修饰符可以让在输入框中输入的内容自动转成数字类型：
◼trim修饰符：
◼如果输入的内容首尾有很多空格，通常我们希望将其去除
◼trim修饰符可以过滤内容左右两边的空格
2651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
