Vue全家桶之Vue基础(2)

日期：2020-06-02 浏览：93 评论：0

核心提示：目录1. Vue常用特性1.1 表单输入绑定1.2 自定义指令1. Vue常用特性1.1 表单输入绑定在 Vue全家桶之Vue基础(1) 一文中我们已经学习过 v-model 的用法。我们可以用 v-model 指令在表单、

及 <select> 元素上创建 双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些javascript</div><div id="content"><div class="content" id="article"> 
<h3>目录</h3> 
<ul> 
 <li>1. Vue常用特性</li> 
 <ul> 
 <li>1.1 表单输入绑定</li> 
 <li>1.2 自定义指令</li> 
 <li>1.3 计算属性</li> 
 <ul> 
 <li>1.3.1 基本使用</li> 
 <li>1.3.2 计算属性缓存 vs 方法</li> 
 </ul> 
 <li>1.4 侦听属性及侦听器</li> 
 <ul> 
 <li>1.4.1 基本使用</li> 
 </ul> 
 <li>1.5 过滤器</li> 
 <ul> 
 <li>1.5.1 基本使用</li> 
 </ul> 
 <li>1.6 音乐播放器</li> 
 <ul> 
 <li>1.6.1 功能演示</li> 
 <li>1.6.2 前置知识</li> 
 <li>1.6.3 示例代码</li> 
 </ul> 
 </ul> 
 <li>2. 综合案例</li> 
 <ul> 
 <li>2.1 前置知识-数组</li> 
 <ul> 
 <li>2.1.1 概念</li> 
 <li>2.1.2 元素</li> 
 <li>2.1.3 定义数组</li> 
 <li>2.1.4 数组元素的输入和输出</li> 
 <li>2.1.5 数组元素的添加和删除</li> 
 <li>2.1.6 length属性</li> 
 <li>2.1.7 prototype属性</li> 
 <li>2.1.8 数组的添加和删除</li> 
 <li>2.1.9 设置数组的排列顺序</li> 
 <li>2.1.10 获取某段数组元素</li> 
 <li>2.1.11 数组转换成字符串</li> 
 <li>2.1.12 高阶函数</li> 
 </ul> 
 <li>2.2 Vue之数组更新检测</li> 
 </ul> 
</ul> 
 
<h1>1. Vue常用特性</h1> 
<h2>1.1 表单输入绑定</h2> 
在 Vue全家桶之Vue基础(1) 一文中我们已经学习过 <code>v-model</code> 的用法。我们可以用 <code>v-model</code> 指令在表单 <code><input></code>、<code><textarea></code> 及 <code><select></code> 元素上创建 <code>双向数据绑定</code>。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 
<code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将 <code>Vue</code> 实例的数据作为数据来源。你应该通过 <code>JavaScript</code> 在组件的 <code>data</code> 选项中声明初始值。如下图所示： <img src="/file/upload/2020/6/zyeEJn.png" class="aligncenter"> <code>v-model</code> 在内部为不同的输入元素使用不同的 <code>property</code> 并抛出不同的事件： 
<ol> 
 <li>text 和 textarea 元素使用 <code>value</code> property 和 <code>input</code> 事件</li> 
 <li>checkbox 和 radio 使用 <code>checked</code> property 和 <code>change</code> 事件</li> 
 <li>select 字段将 <code>value</code> 作为 prop 并将 <code>change</code> 作为事件</li> 
</ol> 
对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 <code>v-model</code> 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 <code>input</code> 事件。 <img src="/file/upload/2020/6/f6zUne.png" class="aligncenter"> 在后续关于表单输入绑定操作中用到的 <code>js</code> 代码如下： 
<pre><code><script src="js/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 data: {
 message: "", //文本以及多行文本
 checked: false, //单个复选框绑定到bool值
 checkedNames: [], //多个复选框绑定到同一个数组
 picked: "", //单选按钮
 selected: "", //选择框单选
 selected2: [], //选择框多选
 selected3: "A", //动态渲染选项
 options: [{
 text: 'One',
 value: 'A'
 }, {
 text: 'Two',
 value: 'B'
 }, {
 text: 'Three',
 value: 'C'
 }]
 }
 });
</script>
</code></pre> 
文本： 
<pre><code>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/2MvMJj.gif" class="aligncenter"> 多行文本： 
<pre><code><span>Multiline message is:</span>

<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/3YVfQz.gif" class="aligncenter"> 在文本区域插值 <code><textarea>{{text}}</textarea>)</code> 并不会生效，应用 <code>v-model</code> 来代替。 
单个复选框，绑定到布尔值： 
<pre><code><input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/fuQfiu.gif" class="aligncenter"> 多个复选框，绑定到同一个数组： 
<pre><code><input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/VNbYZv.gif" class="aligncenter"> 单选按钮： 
<pre><code><input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/bURrIj.gif" class="aligncenter"> <code>补充：</code> 
<ol> 
 <li><code><label></code> 标记用于在表单元素中定义标签，这些标签可以对其他一些表单控件元素(如单行文本框、密码框等)进行说明。</li> 
 <li><code><label></code> 标记可以指定 <code>id/style/class</code> 等核心属性，也可以指定 <code>onclick</code> 等事件属性。除此之外，<code><label></code> 标记还有一个 <code>for</code> 属性，该属性指定 <code><label></code> 标记与哪个表单控件相关联。</li> 
 <li>虽然 <code><label></code> 标记定义的标签只是输出普通的文本，但 <code><label></code> 标记生成的标签还有一个另外的作用，那就是当用户单击 <code><label></code> 生成的标签时，和该标签关联的表单控件元素就会 <code>获得焦点</code>。也就是说，当用户选择元素所生成的标签时，浏览器会自动将焦点转移到和该标签相关联的表单控件元素上。</li> 
 <li>使标签和表单控件相关联主要有两种方式： 
 <ol> 
 <li>隐式关联 使用 <code>for</code> 属性，指定 <code><label></code> 标记的 <code>for</code> 属性值为所关联的表单控件的 <code>id</code> 属性值。</li> 
 <li>显式关联 将普通文本、表单控件一起放在标记内部即可。</li> 
 </ol> </li> 
</ol> 
选择框单选时： 
<pre><code> <select v-model="selected">
 <option disabled value="">请选择</option>
 <option>A</option>
 <option>B</option>
 <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/mea2ui.gif" class="aligncenter"> 如果 <code>v-model</code> 表达式的初始值未能匹配任何选项，<code><select></code> 元素将被渲染为 <code>未选中</code> 状态。在 <code>iOS</code> 中，这会使用户无法选择第一个选项。因为这样的情况下，<code>iOS</code>不会触发 <code>change</code> 事件。因此，更推荐像上面这样提供一个 <code>值为空的禁用选项</code>。 
多选时(绑定到一个数组)： 
<pre><code>
<select v-model="selected2" multiple style="width: 50px;">
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected: {{ selected2 }}</span>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/yeEBRf.gif" class="aligncenter"> 用 <code>v-for</code> 渲染的动态选项： 
<pre><code><select v-model="selected3">
	<option v-for="option in options" v-bind:value="option.value">
	 {{ option.text }}
	</option>
</select>
<span>Selected: {{ selected3 }}</span>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/euEv2y.gif" class="aligncenter"> 修饰符: 在默认情况下，<code>v-model</code> 在每次 <code>input</code> 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 <code>lazy</code> 修饰符，从而转为在 <code>change</code> 事件_之后_进行同步： 
<pre><code>
<input v-model.lazy="msg">
</code></pre> 
如以下例子所示： <img src="/file/upload/2020/6/qeUfy2.png" class="aligncenter"> 演示效果如下： <img src="/file/upload/2020/6/f26nUv.gif" class="aligncenter"> 如果想自动将用户的输入值转为数值类型，可以给 <code>v-model</code> 添加 <code>number</code> 修饰符： 
<pre><code><input v-model.number="age" type="number">
</code></pre> 
这通常很有用，因为即使在 <code>type="number"</code> 时，<code>HTML</code> 输入元素的值也总会返回字符串。如果这个值无法被 <code>parseFloat()</code> 解析，则会返回原始的值。如果要自动过滤用户输入的首尾空白字符，可以给 <code>v-model</code> 添加 <code>trim</code> 修饰符： 
<pre><code><input v-model.trim="msg">
</code></pre> 
<h2>1.2 自定义指令</h2> 
为何需要自定义指令? 
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 <code>Vue2.0</code> 中，代码复用和抽象的主要形式是 <code>组件</code>。然而，有的情况下，你仍然需要对普通 <code>DOM</code> 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下： <img src="/file/upload/2020/6/feyuiq.png" class="aligncenter"> 当页面加载时，该元素将获得焦点 (注意：<code>autofocus</code> 在移动版 <code>Safari</code> 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能： 
<pre><code>//注册一个全局指令focus
Vue.directive("focus", {
 //当被绑定的元素插入到DOM中时
 inserted: function(el) {
 //聚焦元素
 el.focus();
 }
})
</code></pre> 
自定义指令用法： <img src="/file/upload/2020/6/YvmUfi.png" class="aligncenter"> 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： 
<ol> 
 <li><code>bind</code>：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</li> 
 <li><code>inserted</code>：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。</li> 
 <li><code>update</code>：所在组件的 <code>VNode</code> 更新时调用，但是可能发生在其子 <code>VNode</code> 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。</li> 
 <li>componentUpdated：指令所在组件的 <code>VNode</code> 及其子 <code>VNode</code> 全部更新后调用。</li> 
 <li><code>unbind</code>：只调用一次，指令与元素解绑时调用。</li> 
</ol> 
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。 指令钩子函数会被传入以下参数： 
<ol> 
 <li><code>el</code>：指令所绑定的元素，可以用来直接操作 DOM。</li> 
 <li><code>binding</code>：一个对象，包含以下 property： 
 <ol> 
 <li><code>name</code>：指令名，不包括 <code>v-</code> 前缀。</li> 
 <li><code>value</code>：指令的绑定值，例如：<code>v-my-directive="1 + 1"</code> 中，绑定值为 <code>2</code>。</li> 
 <li><code>oldValue</code>：指令绑定的前一个值，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。无论值是否改变都可用。</li> 
 <li><code>expression</code>：字符串形式的指令表达式。例如 <code>v-my-directive="1 + 1"</code> 中，表达式为 <code>"1 + 1"</code>。</li> 
 <li><code>arg</code>：传给指令的参数，可选。例如 <code>v-my-directive:foo</code> 中，参数为 <code>"foo"</code>。</li> 
 <li><code>modifiers</code>：一个包含修饰符的对象。例如：<code>v-my-directive.foo.bar</code> 中，修饰符对象为 <code>{ foo: true, bar: true }</code>。</li> 
 </ol> </li> 
 <li><code>vnode</code>：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。</li> 
 <li><code>oldVnode</code>：上一个虚拟节点，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。</li> 
</ol> 
除了 <code>el</code> 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 <code>dataset</code>来进行。 下面通过一个例子来说明： <img src="/file/upload/2020/6/ZV36ny.png" class="aligncenter"> 演示效果如下： <img src="/file/upload/2020/6/NBRnqe.png" class="aligncenter"> 如果想注册局部指令，组件中也接受一个 <code>directives</code> 的选项： 
<pre><code>directives: {
 focus: {
 // 指令的定义
 inserted: function (el) {
 el.focus()
 }
 }
}
</code></pre> 
<h2>1.3 计算属性</h2> 
<h3>1.3.1 基本使用</h3> 
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： 
<pre><code><div id="example">
 {{ message.split('').reverse().join('') }}
</div>
</code></pre> 
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 <code>message</code> 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用 <code>计算属性</code>。基础例子如下： 
<pre><code><!DOCTYPE html>
<html lang="en">

<body>
 <div id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
 </div>
</body>

</html>
<script src="js/vue.js"></script>
<script> let vm = new Vue({ el: "#example", data: { message: "Hello" }, computed: { //计算属性的getter reversedMessage: function() { //this指向vm实例 return this.message.split("").reverse().join(""); } } }); </script>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/EnMjqu.png" class="aligncenter"> 这里我们声明了一个计算属性 <code>reversedMessage</code>。我们提供的函数将用作 property <code>vm.reversedMessage</code> 的 getter 函数： 
<pre><code>console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
</code></pre> 
你可以打开浏览器的控制台，自行修改例子中的 <code>vm</code>。<code>vm.reversedMessage</code> 的值始终取决于 <code>vm.message</code> 的值。如下图所示： <img src="/file/upload/2020/6/ZnAzye.gif" class="aligncenter"> 你可以像绑定普通 property 一样在模板中绑定计算属性。<code>Vue</code> 知道 <code>vm.reversedMessage</code> 依赖于 <code>vm.message</code>，因此当 <code>vm.message</code> 发生改变时，所有依赖 <code>vm.reversedMessage</code> 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 <code>getter</code> 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。 
<h3>1.3.2 计算属性缓存 vs 方法</h3> 
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果： 
<pre><code><p>Reversed message: "{{ reversedMessage() }}"</p>
</code></pre> 
<code>js</code> 代码如下： 
<pre><code>methods: {
 reversedMessage: function () {
 return this.message.split('').reverse().join('')
 }
}
</code></pre> 
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 <code>message</code> 还没有发生改变，多次访问 <code>reversedMessage</code> 计算属性会立即返回之前的计算结果，而不必再次执行函数。 
这也同样意味着下面的计算属性将不再更新，因为 <code>Date.now()</code> 不是响应式依赖： 
<pre><code>computed: {
 now: function () {
 return Date.now()
 }
}
</code></pre> 
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。 
<h2>1.4 侦听属性及侦听器</h2> 
<h3>1.4.1 基本使用</h3> 
<code>Vue</code> 提供了一种更通用的方式来观察和响应 <code>Vue</code> 实例上的数据变动：<code>侦听属性</code>。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 <code>watch</code>——特别是如果你之前使用过 <code>AngularJS</code>。然而，通常更好的做法是使用 <code>计算属性</code> 命令式的 <code>watch</code> 回调。细想一下这个例子： 
<code>html</code> 核心代码如下： 
<pre><code><body>
 <div id="app">
 <div>
 <span>姓:</span>
 <span>
 <input type="text" v-model="xing">
 </span>
 </div>
 <div>
 <span>名:</span>
 <span>
 <input type="text" v-model="ming">
 </span>
 </div>
 <div>全名: {{xingming}}</div>
 </div>
</body>
</code></pre> 
<code>js</code> 核心代码如下： 
<pre><code><script src="js/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 data: {
 xing: "Amo",
 ming: "Xiang",
 xingming: "Amo Xiang"
 },
 //在这添加一个watch属性
 watch: {
 //watch中的属性 一定是data中已经存在的数据
 //这里的xing对应着data中的xing 当data中xing的值发生改变时 会自动触发watch
 xing: function(val) {
 this.xingming = val + " " + this.ming;
 },
 //这里的ming对应着data中的ming 当data中ming的值发生改变时 会自动触发watch
 ming: function(val) {
 this.xingming = this.xing + " " + val;
 }
 }
 });
</script>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/nUzQJr.gif" class="aligncenter"> 上面代码是命令式且重复的。将它与计算属性的版本进行比较： 
<pre><code><script src="js/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 data: {
 xing: "Amo",
 ming: "Xiang",
 },
 computed: {
 xingming: function() {
 return this.xing + " " + this.ming;
 }
 }
 });
</script>
</code></pre> 
好得多了，不是吗？虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 <code>watch</code> 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时 <code>执行异步</code> 或 <code>开销较大</code> 的操作时，这个方式是最有用的。<code>html</code> 结构如下： 
<pre><code><body>
 <div id="app">
 <span>用户名: </span>
 <span>
 
 <input type="text" v-model.lazy="uname">
 </span>
 <span>{{tip}}</span>
 </div>
</body>
</code></pre> 
<code>js</code> 代码如下： 
<pre><code><script src="js/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 data: {
 uname: "",
 tip: ""
 },
 methods: {
 checkName: function(uname) {
 // 调用接口，但是可以使用定时任务的方式模拟接口调用
 // 因为定时器内部的this是指向window的 所以这里要使用一个变量来存储this指向的vm实例
 let that = this;
 setTimeout(function() {
 if (uname == "admin") {
 that.tip = "用户名已经存在，请更改....";
 } else {
 that.tip = "用户名可以使用";
 }
 }, 2000);
 }
 },
 watch: {
 uname: function(val) {
 this.checkName(val); //调用函数校验用户名的合法性
 this.tip = "正在检验用户名是否可用...."
 }
 }
 });
</script>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/aI3amm.gif" class="aligncenter"> 当需要监听一个对象的改变时，普通的 <code>watch</code> 方法无法监听到对象内部属性的改变，只有 <code>data</code> 中的数据才能够监听到变化，此时就需要 <code>deep</code> 属性对对象进行深度监听 请看下面这个例子：<code>html</code> 结构如下： 
<pre><code><body>
 <div id="app">
 <input type="text" v-model="personInfo.name">
 <h3>{{personInfo.name}}</h3>
 </div>
</body>
</code></pre> 
<code>js</code> 代码如下： 
<pre><code><script src="js/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 data: {
 personInfo: {
 name: "Amo",
 age: 18,
 isBoy: true
 }
 },
 watch: {
 personInfo: function(value) {
 console.log("监听成功");
 }
 }
 });
</script>
</code></pre> 
演示效果如下： <img src="/file/upload/2020/6/EBjmM3.gif" class="aligncenter"> 从上面的结果我们可以看出，是没有监听成功的，我们只需要将上面 <code>js</code> 代码中 <code>watch</code> 部分更改一下即可，如下： <img src="/file/upload/2020/6/JBnUFf.png" class="aligncenter"> 演示效果如下： <img src="/file/upload/2020/6/6FNbUf.gif" class="aligncenter"> 
<h2>1.5 过滤器</h2> 
所谓的 <code>过滤器</code>，大家可以这样理解类似于我们家里的 <code>净水器</code>，<code>净水器</code>是按对 <code>水</code> 的使用要求对<code>水质</code>进行深度过滤、净化处理，<code>Vue</code> 中则是按照对<code>数据</code>的使用要求进行过滤处理，其本质就是对数据的处理，而在 <code>Vue</code> 中数据都是绑定到 <code>Vue</code>实例的 <code>data</code> 属性中，即过滤器处理 <code>data</code> 属性中的数据然后将其返回。 
<h3>1.5.1 基本使用</h3> 
<code>Vue.js</code> 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值 和 <code>v-bind</code> 表达式 (后者从 2.1.0+ 开始支持)。<code>过滤器</code> 应该被添加在 <code>JavaScript</code> 表达式的尾部，由 <code>管道</code> 符号指示： 
<pre><code>
{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>
</code></pre> 
你可以在一个组件的选项中定义本地的过滤器： 
<pre><code>filters: {
 capitalize: function (value) {
 if (!value) return ''
 value = value.toString()
 //return必须写，charAt(0):获取字符串中第一个字符
 //toUpperCase():将小写字母转换为大写字母
 //slice(1): 表示字符串从索引1开始截取到最后的子串
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}
</code></pre> 
或者在创建 <code>Vue</code> 实例之前全局定义过滤器： 
<pre><code>Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
 // ...
})
</code></pre> 
注意： 
<ol> 
 <li>当全局过滤器和局部过滤器重名时，会采用局部过滤器。</li> 
 <li>全局注册时是 <code>filter</code>，没有 <code>s</code> 的。而局部过滤器是<code>filters</code>，是有 <code>s</code> 的</li> 
</ol> 
下面这个例子用到了 <code>capitalize</code> 过滤器： <img src="/file/upload/2020/6/ZnQzye.gif" class="aligncenter"> 通过上述 <code>gif</code> 演示的效果图，大家可以看出 <code>过滤器</code> 不改变真正的 <code>data</code>，而只是改变渲染的结果，并返回过滤后的版本。核心代码如下： <img src="/file/upload/2020/6/UJbaee.png" class="aligncenter"> 过滤器函数总接收表达式的值(之前的操作链的结果)作为第一个参数。在上述例子中，<code>capitalize</code> 过滤器函数将会收到 <code>message</code> 的值作为第一个参数。过滤器可以串联： 
<pre><code>{{ message | filterA | filterB }}
</code></pre> 
在这个例子中，<code>filterA</code> 被定义为接收单个参数的过滤器函数，表达式 <code>message</code> 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 <code>filterB</code>，将 <code>filterA</code> 的结果传递到 <code>filterB</code> 中。过滤器是 <code>JavaScript</code> 函数，因此可以接收参数： 
<pre><code>{{ message | filterA('arg1', arg2) }}
</code></pre> 
这里，<code>filterA</code> 被定义为接收三个参数的过滤器函数。其中 <code>message</code> 的值作为第一个参数，普通字符串 <code>'arg1'</code> 作为第二个参数，表达式 <code>arg2</code> 的值作为第三个参数。格式化日期例子，核心代码如下： 
<pre><code><!DOCTYPE html>
<html lang="en">

<body>
 <div id="app">
 <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript"> Vue.filter('format', function(value, arg) { function dateFormat(date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date$(\d+)$\/)/); if (mts && mts.length >= 3) { date = parseInt(mts[2]); } } date = new Date(date); if (!date || date.toUTCString() == "Invalid Date") { return ""; } var map = { "M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; format = format.replace(/([yMdhmsqS])+/g, function(all, t) { var v = map[t]; if (v !== undefined) { if (all.length > 1) { v = '0' + v; v = v.substr(v.length - 2); } return v; } else if (t === 'y') { return (date.getFullYear() + '').substr(4 - all.length); } return all; }); return format; } return dateFormat(value, arg); }) var vm = new Vue({ el: '#app', data: { date: new Date() } }); </script>
</body>
</html>
</code></pre> 
这里，<code>format</code> 被定义为接收二个参数的过滤器函数。其中 <code>date</code> 的值作为第一个参数，普通字符串 <code>'yyyy-MM-dd hh:mm:ss'</code> 作为第二个参数。程序结果为： <img src="/file/upload/2020/6/Ybe6Zv.png" class="aligncenter"> 
<h2>1.6 音乐播放器</h2> 
<h3>1.6.1 功能演示</h3> 
 
音乐播放器小案例.mp4 
 
<h3>1.6.2 前置知识</h3> 
在 <code>HTML5</code> 中，新增了两个元素——<code>video</code> 元素与 <code>audio</code> 元素。<code>video</code> 元素专门用来播放网络上的视频或电影，而 <code>audio</code> 元素专门用来播放网络上的音频数据。使用这两个元素，就不再需要使用其他任何插件了，只要使用支持 <code>HTML5</code> 的浏览器就可以了。这两个元素的使用方法都很简单，本文使用到的是<code>audio</code>，所以这里 <code>audio</code> 元素为例，只要把播放音频的 <code>URL</code>给指定元素的 <code>src</code> 属性就可以了，<code>audio</code> 元素使用方法如下所示。 
<pre><code><audio src="./Music/麦小兜-下山.flac">您的浏览器不支持audio元素！</audio>
</code></pre> 
通过这种方法，可以把指定的音频数据直接嵌入在网页上，其中 <code>您的浏览器不支持audio元素！</code> 为在不支持 <code>audio</code> 元素的浏览器中所显示的替代文字。本案例用到的属性及事件介绍如下： 
<ol> 
 <li><code>src</code> 属性用于指定媒体数据的 <code>URL</code> 地址。</li> 
 <li><code>autoplay</code> 属性用于指定媒体是否在页面加载后自动播放。使用方法如下：<pre><code><audio src="./Music/汪苏泷-小星星.flac" autoplay></audio>
</code></pre> </li> 
 <li><code>controls</code> 属性指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。使用方法如下：<pre><code><audio src="./Music/汪苏泷-小星星.flac" controls></audio>
</code></pre> </li> 
 <li><code>ended</code> 事件：播放由于媒介结束而停止</li> 
</ol> 
<h3>1.6.3 示例代码</h3> 
<code>html</code> 结构如下： 
<pre><code><body>
 <div id="app">
 <audio :src="currentSrc" controls autoplay @ended="handleEnded"></audio>
 <ul>
 <li :class="{active:index===currentIndex}" v-for="(item,index) in musicData" :key="item.id" @click="handle(item,index)">
 <h2>{{item.id}}--歌名:{{item.name}}</h2>
 <p>{{item.author}}</p>
 </li>
 </ul>
 <button @click="handlePre">上一首</button>
 <button @click="handleNext">下一首</button>
 </div>
</body>
</code></pre> 
<code>js</code> 代码如下： 
<pre><code><script>
 const musicData = [{
 id: 1,
 name: '下山',
 author: '麦小兜',
 songSrc: './Music/麦小兜-下山.flac'
 }, {
 id: 2,
 name: 'Please Dont Go',
 author: 'Joel Adams',
 songSrc: './Music/Joel Adams - Please Dont Go.mp3'
 }, {
 id: 3,
 name: '小星星',
 author: '汪苏泷',
 songSrc: './Music/汪苏泷-小星星.flac'
 }, {
 id: 4,
 name: '芒种',
 author: '赵方婧',
 songSrc: './Music/音阙诗听,赵方婧-芒种.flac'
 }];
 let vm = new Vue({
 el: "#app",
 data: {
 musicData,
 currentSrc: "./Music/麦小兜-下山.flac",
 currentIndex: 0
 },
 methods: {
 handle(item, index) {
 this.currentSrc = item.songSrc;
 this.currentIndex = index;
 },
 handleEnded() {
 this.handleNext();
 },
 handlePre() {
 this.currentIndex--;
 if (this.currentIndex < 0) {
 this.currentIndex = this.musicData.length - 1;
 }
 this.currentSrc = this.musicData[this.currentIndex].songSrc;
 },
 handleNext() {
 this.currentIndex++;
 if (this.currentIndex === this.musicData.length) {
 this.currentIndex = 0;
 }
 this.currentSrc = this.musicData[this.currentIndex].songSrc;
 }
 }
 });
</script>
</code></pre> 
<h1>2. 综合案例</h1> 
<h2>2.1 前置知识-数组</h2> 
<code>数组</code> 是 <code>JavaScript</code> 中的一种复合数据类型。变量中保存单个数据，而数组中则保存的是多个数据的集合。<code>数组</code> 与 <code>变量</code> 的比较效果如下图所示： <img src="/file/upload/2020/6/riQfYr.png" class="aligncenter"> 
<h3>2.1.1 概念</h3> 
数组 <code>(Array)</code> 就是一组数据的集合。数组是 <code>JavaScript</code> 中用来存储和操作有序数据集的数据结构。可以把数组看作一个单行表格，该表格的每一个单元格中都可以存储一个数据，即一个数组中可以包含多个元素，如下图所示。 <img src="/file/upload/2020/6/juee63.png" class="aligncenter"> 由于 <code>JavaScript</code> 是一种弱类型的语言，所以在数组中的每个元素的类型可以是不同的。数组中的元素类型可以是 <code>数值型/字符串型/布尔型</code> 等，甚至也可以是一个 <code>数组</code>。 
<h3>2.1.2 元素</h3> 
数组是数组元素的集合，在上图中，每个单元格里所存放的就是数组元素。例如，一个班级的所有学生就可以看作是一个数组，每一位学生都是数组中的一个元素。再比如，一个酒店的所有房间就相当于一个数组，每一个房间都是这个数组中的一个元素。 
每个数组元素都有一个 <code>索引号</code>(数组的下标)，通过 <code>索引号</code> 可以方便地引用数组元素。数组的下标从 <code>0</code> 开始编号，例如，第一个数组元素的下标是 <code>0</code>，第二个数组元素的下标是 <code>1</code>，以此类推。 
<h3>2.1.3 定义数组</h3> 
在 <code>JavaScript</code> 中数组也是一种对象，这种对象被称为数组对象。因此在定义数组时，也可以使用 <code>构造函数</code>。<code>JavaScript</code> 中定义数组的方法主要有4种。如下所示： 
<pre><code><script>
 // 第一种定义数组的方式:
 let arr = new Array(); //定义一个空数组
 arr[0] = "Amo"; //向数组中添加第一个数组元素
 arr[1] = "Paul"; //向数组中添加第二个数组元素
 arr[2] = "Jerry"; //向数组中添加第三个数组元素
 console.log(arr);
 // 在上述代码中定义了一个空数组，此时数组中元素的个数为0。在为数组的元素赋值后，数组中才有了数组元素。

// 第二种定义数组的方式:在定义数组的同时可以指定数组元素的个数。此时并没有为数组元素赋值，所有数组元素的值都是undefined。
 let arr2 = new Array(3);
 arr2[0] = 1; //为第一个数组元素赋值
 arr2[1] = 2; //为第二个数组元素赋值
 arr2[2] = 3; //为第三个数组元素赋值
 console.log(arr2);

// 第三种定义数组的方式: 在定义数组的同时可以直接给出数组元素的值。此时数组的长度就是在括号中给出的数组元素的个数。
 let arr3 = new Array("电商172", "电商173", "市营171"); //定义一个包含3个元素的数组
 console.log(arr3);

// 第四种定义数组的方式: 直接将数组元素放在一个中括号中，元素与元素之间用逗号分隔。
 let arr4 = ["Python高级", "Vue框架技术", "JavaSE基础"]; //直接定义一个包含3个元素的数组
 console.log(arr4);
</script>
</code></pre> 
<h3>2.1.4 数组元素的输入和输出</h3> 
数组是一系列元素的集合，在对数组进行操作时，实际上是对数组元素进行输入和输出的操作。数组元素的 <code>输入</code> 即为数组中的元素 <code>进行赋值</code>，数组元素的 <code>输出</code> 即获取 <code>数组中元素的值并输出</code>，示例代码如下： 
<pre><code><script>
 console.log("-------------数组对象的输入如下:-------------");
 //1.在定义数组对象时直接输入数组元素(前提:确定数组元素的情况下)
 let arr1 = new Array("a", "b", "c", "d", "e");
 //2.使用下标赋值或者是修改数组中的元素
 let arr2 = new Array(3);
 arr1[0] = "f"; //为下标为1的数组元素赋值
 arr1[0] = "g"; //修改下标为1的数组元素的值为g
 //3.利用for语句向数组对象中输入数组元素(批量)
 let num = 7;
 let arr3 = new Array();
 for (let i = 0; i < num; i++) {
 arr3[i] = i;
 }
 console.log("-------------数组对象的输出如下:-------------");
 //1.用下标获取指定元素值 获取arr1数组中的'd'
 console.log(arr1[3]); //d
 let str = "";
 //2.用for语句获取数组中的元素值
 for (let i = 0; i < 5; i++) {
 //将各个数组连接在一起
 str += arr1[i];
 }
 console.log(str); //gbcde
 //3.用数组对象名输出所有元素值
 console.log(arr1);
</script>
</code></pre> 
<h3>2.1.5 数组元素的添加和删除</h3> 
在定义数组时虽然已经设置了数组元素的个数，但是该数组的元素个数并不是固定的。可以通过添加数组元素的方法来增加数组元素的个数。添加数组元素的方法非常简单，只要对新的数组元素进行赋值就可以了。 例如，定义一个包含两个元素的数组，然后为数组添加3个元素，最后输出数组中的所有元素值，代码如下： 
<pre><code><script>
 let arr1 = new Array("Amo", "Jerry");
 console.log(arr1);
 arr1[2] = "Paul"; //添加新的数组元素
 arr1[3] = "Ben"; //添加新的数组元素
 arr1[4] = "Jason"; //添加新的数组元素
 console.log(arr1);
</script>
</code></pre> 
运行结果为： <img src="/file/upload/2020/6/ZfEB3q.png" class="aligncenter"> 另外，还可以对已经存在的数组元素进行重新赋值。例如，定义一个包含两个元素的数组，将第二个数组元素进行重新赋值并输出数组中的所有元素值，代码如下： 
<pre><code><script>
 let arr = new Array("Vue框架技术", "Python基础"); //定义数组
 console.log(arr); //输出数组
 arr[1] = "JavaSE基础"; //为下标为1的数组元素重新赋值
 console.log(arr); //输出重新赋值后的新数组
</script>
</code></pre> 
运行结果为： <img src="/file/upload/2020/6/RJF3im.png" class="aligncenter"> 使用 <code>delete</code> 运算符可以删除数组元素的值，但是只能将该元素恢复为未赋值的状态，即 <code>undefined</code>，而不能真正地删除一个数组元素，数组中的元素个数也不会减少。例如，定义一个包含 <code>3个</code> 元素的数组，然后应用 <code>delete</code>运算符删除 <code>下标为1</code> 的数组元素，最后输出数组中的所有元素值。代码如下： 
<pre><code><script>
 let arr = new Array("Vue框架技术", "Python高级", "JavaSE基础"); //定义数组
 console.log(arr);
 delete arr[1]; //删除下标为1的数组元素
 console.log(arr); //输出删除元素后的数组
 console.log(arr[1]); 
</script>
</code></pre> 
运行结果为： <img src="/file/upload/2020/6/IJFbym.png" class="aligncenter"> 注意：应用 <code>delete</code> 运算符删除数组元素之前和删除数组元素之后，元素个数并没有改变，改变的只是被删除的数组元素的值，该值变为 <code>undefined</code>。 
<h3>2.1.6 length属性</h3> 
该属性用于返回 <code>数组的长度</code>。例如，获取已创建的数组对象的长度。代码如下： 
<pre><code><script>
 let arr = new Array(1, 2, 3, 4, 5, 6, 7, 8); //定义数组
 console.log(arr.length); //输出数组的长度 8
</script>
</code></pre> 
例如，增加已有数组的长度。代码如下： 
<pre><code><script>
 let arr = new Array(1, 2, 3, 4, 5, 6, 7, 8); //定义数组
 arr[arr.length] = arr.length + 1; //为新的数组元素赋值
 console.log(arr.length); //输出数组的新长度 9
</script>
</code></pre> 
将 <code>福建/江西/四川</code> 三省的省份名称、省会城市名称以及 <code>3个</code> 城市的旅游景点分别定义在数组中，应用 <code>for循环语句</code> 和 <code>数组的length</code> 属性，将省份、省会以及旅游景点循环输出在表格中。代码如下： 
<pre><code><table cellspacing="1" bgcolor="#CC00FF">
 <tr height="30" bgcolor="#FFFFFF">
 <td align="center" width="50">序号</td>
 <td align="center" width="100">省份</td>
 <td align="center" width="100">省会</td>
 <td align="center" width="260">旅游景点</td>
 </tr>
 <script type="text/javascript">
 let province = new Array("福建省", "江西省", "四川省"); //定义省份数组
 let city = new Array("福州市", "南昌市", "成都市"); //定义省会数组
 let tourist = new Array("三坊七巷 福州国家森林公园 金山寺", "滕王阁 鄱阳湖 凤凰沟风景区",
 "天府广场 峨眉金顶 乐山大佛"); //定义旅游景点数组
 for (let i = 0; i < province.length; i++) { //定义for循环语句
 document.write("<tr height=26 bgcolor='#FFFFFF'>"); //输出<tr>开始标记
 document.write("<td align='center'>" + (i + 1) + "</td>"); //输出序号
 document.write("<td align='center'>" + province[i] + "</td>"); //输出省份名称
 document.write("<td align='center'>" + city[i] + "</td>"); //输出省会名称
 document.write("<td align='center'>" + tourist[i] + "</td>"); //输出旅游景点
 document.write("</tr>"); //输出</tr>结束标记
 }
 </script>
 </table>
</code></pre> 
运行结果如下图所示。 <img src="/file/upload/2020/6/eQbyya.png" class="aligncenter"> 
<h3>2.1.7 prototype属性</h3> 
该属性可以为数组对象添加自定义的属性或方法。 
<pre><code>Array.prototype.name=value
</code></pre> 
例如，利用 <code>prototype</code> 属性自定义一个方法，用于显示数组中的最后一个元素。代码如下： 
<pre><code><script>
 Array.prototype.outLast = function() { //自定义outLast()方法
 console.log(this[this.length - 1]); //输出数组中最后一个元素
 }
 let arr = new Array(1, 2, 3, 4, 5, 6, 7, 8); //定义数组
 arr.outLast(); //调用自定义方法 8
 let arr2 = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9); //定义数组
 arr2.outLast(); //调用自定义方法 9
</script>
</code></pre> 
<h3>2.1.8 数组的添加和删除</h3> 
数组的添加和删除可以使用 <code>concat()、push()、unshift()、pop()、shift()和splice()</code> 方法实现。如下： 
<pre><code><script>
 //1.concat()方法: 该方法用于将其他数组连接到当前数组的末尾
 let arr1 = [1, 2];
 let arr2 = [3, 4];
 let newArr = arr1.concat(arr2, 5, 6);
 console.log(newArr); //[1, 2, 3, 4, 5, 6]

//2.push()方法: 该方法向数组的末尾添加一个或多个元素，并返回添加后的数组长度。
 let arr3 = [1, 2];
 console.log(arr3); // [1, 2]
 console.log(arr3.push(3, 4)); //4
 console.log(arr3); //[1, 2, 3, 4]
 //3.unshift()方法: 该方法向数组的开头添加一个或多个元素。
 let arr4 = [1, 2];
 console.log(arr4); // [1, 2]
 console.log(arr4.unshift(3, 4)); //4
 console.log(arr4); //[3, 4, 1, 2]

//4.pop()方法: 该方法用于把数组中的最后一个元素从数组中删除，并返回删除元素的值。
 let arr5 = [1, 2, 3, 4, 5, 6];
 console.log(arr5); // [1, 2, 3, 4, 5, 6]
 console.log(arr5.pop()); //6
 console.log(arr5); //[1, 2, 3, 4, 5]
 //5.shift()方法: 该方法用于把数组中的第一个元素从数组中删除，并返回删除元素的值。
 let arr6 = [1, 2, 3, 4, 5, 6];
 console.log(arr6); // [1, 2, 3, 4, 5, 6]
 console.log(arr6.shift()); //1
 console.log(arr6); //[2, 3, 4, 5, 6]

//6.splice()方法: 可以删除数组中指定位置的元素，还可以向数组中的指定位置添加新元素。
 // arrayObject.splice(start,length,element1,element2,…)
 // 1.arrayObject：必选项，数组名称。
 // 2.start：必选项，指定要删除数组元素的开始位置，即数组的下标。
 // 3.length：可选项，指定删除数组元素的个数。如果未设置该参数，则删除从start开始到原数组末尾的所有元素。
 // 4.element：可选项，要添加到数组的新元素。
 let arr7 = new Array("a", "b", "c", "d"); //定义数组
 arr7.splice(1); //删除第2个元素和之后的所有元素
 document.write(arr7 + " "); //输出删除后的数组
 let arr8 = new Array("a", "b", "c", "d"); //定义数组
 arr8.splice(1, 2); //删除数组中的第2个和第3个元素
 document.write(arr8 + " "); //输出删除后的数组
 let arr9 = new Array("a", "b", "c", "d"); //定义数组
 arr9.splice(1, 2, "e", "f"); //删除数组中的第2个和第3个元素，并添加新元素
 document.write(arr9 + " "); //输出删除后的数组
 let arr10 = new Array("a", "b", "c", "d"); //定义数组
 arr10.splice(1, 0, "e", "f"); //在第2个元素前添加新元素
 document.write(arr10 + " "); //输出删除后的数组
</script>
</code></pre> 
<h3>2.1.9 设置数组的排列顺序</h3> 
将数组中的元素按照指定的顺序进行排列可以通过 <code>reverse()</code> 和 <code>sort()</code> 方法实现。如下： 
<pre><code><script>
 //1.reverse()方法: 该方法用于颠倒数组中元素的顺序
 let arr1 = new Array("Amo", "Jerry", "Paul");
 console.log(arr1); //["Amo", "Jerry", "Paul"]
 arr1.reverse();
 console.log(arr1); // ["Paul", "Jerry", "Amo"]
 //2.sort()方法: 该方法用于对数组的元素进行排序
 
 let arr2 = new Array("HTML", "CSS", "JavaScript");
 console.log(arr2); //["HTML", "CSS", "JavaScript"]
 arr2.sort();
 console.log(arr2); //["CSS", "HTML", "JavaScript"]
 
 //定义一个包含4个元素的数组，将数组中的元素按从小到大的顺序进行输出
 let arr3 = new Array(9, 6, 10, 5); //定义数组
 console.log(arr3); //输出原数组
 function ascOrder(x, y) { //定义比较函数
 if (x > y) { //如果第一个参数值大于第二个参数值
 return 1; //返回1
 } else {
 return -1; //返回-1
 }
 }
 arr3.sort(ascOrder); //对数组进行排序
 console.log(arr3); //输出排序后的数组
</script>
</code></pre> 
<h3>2.1.10 获取某段数组元素</h3> 
获取数组中的某段数组元素主要用 <code>slice()</code> 方法实现。slice()方法可从已有的数组中返回选定的元素。 
<pre><code>arrayObject.slice(start,end)
</code></pre> 
参数说明： 
<ol> 
 <li><code>start</code>：必选项。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，<code>-1</code> 指最后一个元素，<code>-2</code> 指倒数第二个元素，以此类推。</li> 
 <li><code>end</code>：可选项。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 <code>start</code> 到数组结束的所有元素。如果这个参数是负数，那么它将从数组尾部开始算起。</li> 
 <li>返回值：返回截取后的数组元素，该方法返回的数据中不包括 <code>end</code> 索引所对应的数据。</li> 
</ol> 
例如，获取指定数组中某段数组元素。代码如下： 
<pre><code><script>
 let arr = new Array("a", "b", "c", "d", "e", "f"); //定义数组
 document.write("原数组：" + arr + " "); //输出原数组
 //输出截取后的数组
 document.write("获取数组中第3个元素后的所有元素：" + arr.slice(2) + " ");
 document.write("获取数组中第2个到第5个元素：" + arr.slice(1, 5) + " "); //输出截取后的数组
 document.write("获取数组中倒数第2个元素后的所有元素：" + arr.slice(-2)); //输出截取后的数组
</script>
</code></pre> 
运行程序，会将原数组以及截取数组中元素后的数据输出，运行结果如下图所示。 <img src="/file/upload/2020/6/63QzEn.png" class="aligncenter"> 
<h3>2.1.11 数组转换成字符串</h3> 
将数组转换成字符串主要通过 <code>toString()</code>、<code>toLocaleString()</code> 和 <code>join()</code> 方法实现。如下： 
<pre><code><script>
 //1.toString()方法: 该方法可把数组转换为字符串，并返回结果。
 let arr1 = new Array(1, 2, 3);
 console.log(Array.isArray(arr1)); //true
 console.log(Array.isArray(arr1.toString())); //false
 console.log(arr1.toString());
 //2.该方法将数组转换成本地字符串。
 console.log(arr1.toLocaleString());
 //3.join()方法: 
 
 let arr2 = new Array(1, 2, 3);
 console.log(arr2.join()); //1,2,3
 console.log(arr2.join("*")); //1*2*3
</script>
</code></pre> 
<h3>2.1.12 高阶函数</h3> 
<h2>2.2 Vue之数组更新检测</h2></div>
</div>
<div class="b20 c_b"> </div>
<div class="keytags">
标签：
<a href="https://www.youqizhuangbei.com/news/search-htm-kw-%E6%96%87%E7%AB%A0%E6%A0%87%E7%AD%BE%EF%BC%9A.html" target="_blank" class="b">文章标签：</a>
<a href="https://www.youqizhuangbei.com/news/search-htm-kw-javascript.html" target="_blank" class="b">javascript</a>
<a href="https://www.youqizhuangbei.com/news/search-htm-kw-vue.html" target="_blank" class="b">vue</a>
<a href="https://www.youqizhuangbei.com/news/search-htm-kw-js.html" target="_blank" class="b">js</a>
</div>
<div class="award"><div onclick="Go('https://www.youqizhuangbei.com/member/award.php?mid=21&itemid=17212');">打赏</div></div> <div class="b20"> </div>
  本文转载自：网络 <div class="b20"> 所有权利归属于原作者，如文章来源标示错误或侵犯了您的权利请联系微信13520258486 </div>
 
 
 <div class="b20"> </div>
<div class="head-txt"><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多></a>最近资讯中心</div>
<div class="related">
 <table width="100%">
<tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17210.html" title="jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（一）">• jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17209.html" title="最简单的理解前端开发">• 最简单的理解前端开发</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17208.html" title="jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（二）">• jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17211.html" title="女朋友要我教她CSS，我就写了这一篇长文，感动哭了？">• 女朋友要我教她CSS，我就写了这一篇长文，感动</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17207.html" title="canvas笔记-画一片星空">• canvas笔记-画一片星空</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17206.html" title="JSTL常用标签">• JSTL常用标签</a></td>
</tr></table>
 <table width="100%">
<tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据 配合蓝牙模块 实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据 配合蓝牙模块 </a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td>
</tr></table>
 </div> 
 <div class="b20"> </div>
<div class="head-txt"><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多></a>最新资讯中心</div>
<div class="related"><table width="100%">
<tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据 配合蓝牙模块 实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据 配合蓝牙模块 </a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35500.html" title="STM32查询式按键输入[直接用寄存器]">• STM32查询式按键输入[直接用寄存器]</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35499.html" title="Ubuntu系统 USB设备端口绑定">• Ubuntu系统 USB设备端口绑定</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35498.html" title="2021-04-14 第四次 按键输入实验">• 2021-04-14 第四次 按键输入实验</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35497.html" title="Flutter扫码功能完美实现">• Flutter扫码功能完美实现</a></td>
</tr></table>
</div>
 <div class="b20"> </div>
<div class="head-txt"><a href="https://www.youqizhuangbei.com/news/search-htm-kw-%E6%96%87%E7%AB%A0%E6%A0%87%E7%AD%BE%EF%BC%9A.html">更多></a>相关资讯中心</div>
<div class="related"><table width="100%">
<tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17556.html" title="谈谈Spring中的对象跟Bean，你知道Spring怎么创建对象的吗？">• 谈谈Spring中的对象跟Bean，你知道Spring怎么创</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17555.html" title="面试|有关字符串中字符出现重复字符的面试问题，这里都有了">• 面试|有关字符串中字符出现重复字符的面试问题</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17554.html" title="老王的JAVA基础课：第4课 以hello world学习基础语法">• 老王的JAVA基础课：第4课 以hello world学习基</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17553.html" title="配置SpringBoot项目热部署">• 配置SpringBoot项目热部署</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17552.html" title="我的Java学习之路（九）-- 模拟斗地主扑克牌发牌">• 我的Java学习之路（九）-- 模拟斗地主扑克牌发</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17549.html" title="深入浅出的Java面向对象编程，助你深入探索开发世界">• 深入浅出的Java面向对象编程，助你深入探索开发</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17548.html" title="关于blob与流互转的问题">• 关于blob与流互转的问题</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17547.html" title="在Java中MD5、SHA、SHA256、SHA512加密的实现[工具类]">• 在Java中MD5、SHA、SHA256、SHA512加密的实现[</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17545.html" title="Java设计模式---原型模式">• Java设计模式---原型模式</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-17544.html" title="spring boot整合mybatis+druid和多数据源外加druid监视sql执行时间">• spring boot整合mybatis+druid和多数据源外加dr</a></td>
</tr></table>
</div>
<div id="comment_div" style="display:;">
<div class="head-txt"><a href="https://www.youqizhuangbei.com/comment/index-htm-mid-21-itemid-17212.html">0 条</a>相关评论</div>
<div class="c_b" id="comment_main"><div></div></div>
</div>
<script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/comment.js"></script>
 
</div>
<div class="m3r">

<div class="head-sub">推荐图文</div>
<div class="list-thumb"><table width="100%">
</table>
</div>
<div class="head-sub mt20">推荐资讯中心</div>
<div class="list-txt"><ul>
</ul>
</div>
<div class="head-sub mt20">点击排行</div>
<div class="list-rank"><ul>
</ul></div>

<div class="head-sub mt20">最新信息</div>
<div class="list-rank"><ul>
<li>1<a href="https://www.youqizhuangbei.com/sell/show-3.html" title="北京傲云欣欣科技公司专业提供中高压变频器维修电气设备维修">北京傲云欣欣科技公司专业提供中高压变频器维修</a></li>
<li>2<a href="https://www.youqizhuangbei.com/sell/show-70.html" title="太原德力西高压变频器维修">太原德力西高压变频器维修</a></li>
<li>3<a href="https://www.youqizhuangbei.com/sell/show-56.html" title="AMB安邦信高压变频器维修中降低设备故障频次的方法">AMB安邦信高压变频器维修中降低设备故障频次的</a></li>
<li>4<a href="https://www.youqizhuangbei.com/sell/show-51.html" title="石家庄高压变频器维修请找北京傲云电气">石家庄高压变频器维修请找北京傲云电气</a></li>
<li>5<a href="https://www.youqizhuangbei.com/sell/show-21.html" title="AMB安邦信高压变频器维修">AMB安邦信高压变频器维修</a></li>
<li>6<a href="https://www.youqizhuangbei.com/sell/show-65.html" title="Samcovm三垦高压变频器维修中一些小技巧">Samcovm三垦高压变频器维修中一些小技巧</a></li>
<li>7<a href="https://www.youqizhuangbei.com/sell/show-64.html" title="ABB传动ACS6000/ACS800维修中的故障分析方法">ABB传动ACS6000/ACS800维修中的故障分析方法</a></li>
<li>8<a href="https://www.youqizhuangbei.com/sell/show-67.html" title="包头石家庄ABB高压变频器维修">包头石家庄ABB高压变频器维修</a></li>
<li>9<a href="https://www.youqizhuangbei.com/sell/show-45.html" title="攀枝花陕西西门子罗宾康高压变频器维修厂家">攀枝花陕西西门子罗宾康高压变频器维修厂家</a></li>
</ul></div>
 </div>
 
</div>
<div class="c_b"></div>
</div>
<script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/content.js"></script><div class="clear">
</div>
<div class="other_item">
<div class="copyrightbar">
 <div class="wrapper">
<dl class="fore1">
<dt>新手指南</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member/register.php">注册新用户</a></div>
<div><a rel="nofollow" target="_blank" href="">操作指南</a></div>
<div><a rel="nofollow" target="_blank" href="">常见问题</a></div>
</dd>
</dl>
<dl class="fore2">
<dt>采购商服务</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/sell/">找产品</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/company/">找公司</a></div>
<div><a rel="nofollow" target="_blank" href="">找采购</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/news/">看资讯</a></div>
</dd>
</dl>
<dl class="fore3">
<dt>供应商服务</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//home.php">企业商铺</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//grade.php">VIP服务</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//validate.php">认证服务</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/spread/">推广服务</a></div>
</dd>
</dl>
<dl class="fore4">
<dt>交易安全</dt>
<dd>
<div><a target="_blank" href="">买家防骗</a></div>
<div><a target="_blank" href="">卖家防骗</a></div>
<div><a rel="nofollow" href="javascript:SendReport();">投诉举报</a></div>
</dd>
</dl>
<dl class="fore5">
<dt>关注我们</dt>
<dd>
<div>手机网站: <a target="_blank" href="https://www.youqizhuangbei.com/mobile/mobile.php"></a></div>
<div>新浪微博: <a target="_blank" href="http://" rel="nofollow"></a></div>
<div>微信关注: </div>
<div style="margin-top: 5px;">
<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=5fd78221597e88a4af3e2c8512a61d5f1f8dc535171ea7773562452f9042dafd"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="" title=""></a>
</div>
</dd>
</dl>
<div class="hotline">
 13520258486
周一至周五 9:00-18:00
 （其他时间联系在线客服）
<a rel="nofollow" class="btn-line-primary" href="https://www.youqizhuangbei.com/about/contact.html" target="_blank">24小时在线客服</a>
</div>

 </div>
 <div class="wrapper mt20" id="other_item">
<div id="footer">
<div class="links" style="font-size: 14px;margin-bottom: 10px;">
产品按字母分类：
 <a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=a" target="_blank">a</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=b" target="_blank">b</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=c" target="_blank">c</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=d" target="_blank">d</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=e" target="_blank">e</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=f" target="_blank">f</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=g" target="_blank">g</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=h" target="_blank">h</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=i" target="_blank">i</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=j" target="_blank">j</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=k" target="_blank">k</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=l" target="_blank">l</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=m" target="_blank">m</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=n" target="_blank">n</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=o" target="_blank">o</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=p" target="_blank">p</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=q" target="_blank">q</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=r" target="_blank">r</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=s" target="_blank">s</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=t" target="_blank">t</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=u" target="_blank">u</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=v" target="_blank">v</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=w" target="_blank">w</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=x" target="_blank">x</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=y" target="_blank">y</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=z" target="_blank">z</a> 
 </div>
 <div class="links">
 <a href="https://www.youqizhuangbei.com/about/index.html">关于我们</a> | 
<a href="https://www.youqizhuangbei.com/about/contact.html">联系方式</a> | 
<a href="https://www.youqizhuangbei.com/about/agreement.html">使用协议</a> | 
<a href="https://www.youqizhuangbei.com/about/copyright.html">版权隐私</a> | 
 
<a href="https://www.youqizhuangbei.com/sitemap/">网站地图</a>
 | <a href="https://www.youqizhuangbei.com/spread/">排名推广</a> 
 | <a href="https://www.youqizhuangbei.com/ad/">广告服务</a> | <a href="https://www.youqizhuangbei.com/gift/" target="_blank" rel="nofollow">积分商城</a> | <a href="javascript:SendReport();" rel="nofollow">违规举报</a> </div>
<div class="copyright">
<div id="copyright">(c)2008-2023 湖北傲云电气有限公司 All Rights Reserved<script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?20195b23529f03df5cb2789a744df859";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div>
<div><a href="http://www.miibeian.gov.cn" target="_blank" rel="nofollow">鄂ICP备2020021666号-11</a></div></div>
<div class="authentication">
<div class="authentication_bg">
<a rel="nofollow" target="_blank" class="cert-1" href="#" title="网络警察"></a>
<a rel="nofollow" target="_blank" class="cert-2" href="#" title="网警备案"></a>
<a rel="nofollow" target="_blank" class="cert-3" href="#" title="网络工商"></a>
<a rel="nofollow" target="_blank" class="cert-4" href="#" title="浙江省网站信用联盟"></a>
<a rel="nofollow" target="_blank" class="cert-5" href="#" title="可信网站"></a>
<a rel="nofollow" target="_blank" class="cert-6" href="/" title="违法和不良信息举报中心"></a>
<a rel="nofollow" target="_blank" class="cert-7" href="/" title="违法和不良信息举报中心APP下载"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="feedBackWidget">
<div class="ronline"><a href="//wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes" target="_blank" title=""></a></div>
<div class="rweixin"><a href="javascript:Dqrcode();"></a></div>
<div class="feedback"><a href="javascript:SendReport();"></a></div>
<div class="back2top" style="display: none;"><a href="javascript:void(0);" title="返回顶部"> </a></div>
</div><script type="text/javascript">
//全站悬浮右侧
$('.guess').scrollToFixed({
marginTop: $('.small-goods').outerHeight(true) - 345,
limit: function() {
var limit = $('.other_item').offset().top ;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
//右侧到位自动隐藏
function changeScreen() {
var itemTop = document.getElementById("other_item").offsetTop;
if ($(document).scrollTop() > itemTop - 600) {
$(".guess").hide();
} else if ($(window).width() < 1200) {
$(".guess").hide();
} else {
$(".guess").show();
}
}
$(window).scroll(function() {
changeScreen();
});
$(window).resize(function(e) {
changeScreen();
});
</script>
<script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/myjs.js"></script>
<script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/topso.js"></script>
<script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/scrolltofixed.js"></script>
<script type="text/javascript">
</script>
<script>
var _hmt = _hmt || [];
(function() {
 var hm = document.createElement("script");
 hm.src = "https://hm.baidu.com/hm.js?d7f1c93b824c5ee2887566c40d0984af";
 var s = document.getElementsByTagName("script")[0]; 
 s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function(){
 var bp = document.createElement('script');
 var curProtocol = window.location.protocol.split(':')[0];
 if (curProtocol === 'https') {
 bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
 }
 else {
 bp.src = 'http://push.zhanzhang.baidu.com/push.js';
 }
 var s = document.getElementsByTagName("script")[0];
 s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>