前端开发核心篇——Vue

网友投稿 676 2022-05-29

1. Vue简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.Vue.js 目录结构

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等。

components: 目录里面放了一个组件文件，可以不用。

App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

main.js: 项目的核心文件。

3. Vue语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

           {{ message }}     

    var app = new Vue({           el: '#app',           data: {                 message: 'Hello Vue!'           }         methods:add(){                })

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。改动全部在以上指定的 div 内，div 外部不受影响。data 用于定义属性。methods 用于定义的函数，可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。

1) 插值

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。

使用 v-html 指令用于输出 html 代码。

2）指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用  v-on 监听事件，并对用户的输入进行响应。

条件判断使用 v-if 指令。可以用 v-else 指令给 v-if 添加一个 "else" 块。

使用 v-show 指令来根据条件展示元素。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

3）计算属性

计算属性关键词是 computed。例子如下：

           

Original message: "{{ message }}"

      

Computed reversed message: "{{ reversedMessage }}"

    
               var vm = new Vue({               el: '#example',               data: {                 message: 'Hello'       },         computed: {    // 计算属性的 getter         reversedMessage: function () {      // `this` 指向 vm 实例           return this.message.split('').reverse().join('')         }       }     })

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

4）监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化。

前端开发核心篇——Vue

5）样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。为 v-bind:class 设置一个对象，从而动态的切换 class。

6）条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。另一个根据条件展示元素的选项是 v-show 指令。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

7） 事件处理

v-on 可以接收一个定义的方法来调用。

                   Add 1           

The button above has been clicked {{ counter }} times.

            var example1 = new Vue({               el: '#example-1',               data: {                     counter: 0           }         })

在事件处理程序中调用一些非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.stop、.prevent、.capture、.self、.once、

.passive。

                                                                                         ...

                 ...
                 

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。Vue 提供了绝大多数常用的按键码的别名：.enter

.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right。

8）表单数据绑定

v-model 指令在表单控件 、