前端开发核心篇——Vue

网友投稿 756 2022-05-29

1. Vue简介

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

2.Vue.js 目录结构

前端开发核心篇——Vue

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

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 来响应数据的变化。

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 指令在表单控件 、