前端开发核心篇——Vue

网友投稿 708 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) 插值

前端开发核心篇——Vue

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

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