Vue介绍

发布时间:2022-12-20 09:30

一、vue介绍

1.Vue.js是用于构建交互式的 Web 界面的库。

2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲,Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。

3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架,Vue.js 更容易上手。

4.Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。

Vue介绍_第1张图片

5.内核生成:Es6和--->类和继承

6.Model:js对象。

 View:html视图。

 通过事件驱动去监听视图的变化,方法和指令,监听视图对象的方法。

 双向绑定(v-model);

 DOM事件:JS;

7.Css\js\html\-->js类,模式:MVC模式(虚拟DOM),单向数据流,js的角度封装

8.vue是单独拿出来,MVVM模式(分开的,用事件去监听DOM),双向数据流,采用指令(标记中的一个属性)

二、 Vue的实例

1.构造器:

每个 Vue.js应用都是通过构造函数Vue创建一个 Vue的根实例启动的

var Vm = new vue({

                //选项

             })

2.在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项.

3.属性和方法:

Var data={a:1}

Var vm=new vue({

   data:data

})

Data是存在动态属性和对象的,相当于react里的state。

4.el:#id-----是将vue的动态信息绑定在dom结构上,相当于react-dom里的render方法.

注意:搭环境的时候添加:Mode:”develoads”

5.

(1)在模板中绑定表达式是非常便利的,但是它们实际上只用于见简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。

(2)为了不让模板过重我们都是使用计算属性:

1)Vue中data放定义的数据内容。

2)Computed放计算的属性内容。

6.计算缓存methods:(展示存在的东西

1.我们可以将同一函数定义为一个 method而不是一个计算属性。对于最终的结果,两种方式确实是相同的.

2.不同的是计算属性是基于它们的依赖进行缓存的。

3.计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问reversedMessag计算属性会立即返回之前的计算结果,而不必再次执行函数

4.只要发生重新渲染,method调用总会执行该函数。

通过事件完成的功能,调用方法,用完重新计算

7.模板语法------缩写

V- 前缀在模板中是作为一个标示Vue特殊属性的明显标识。当你使用Vue.js为现有的标记添加动态行为时,它会很有用,但对于一些经常使用的指令来说有点繁琐。同时,当搭建Vue.js管理所有模板的SPA时,V-前缀也变得没那么重要了。因此, Vue.js为两个最为常用的

指令提供了特别的缩写:

v-bind缩写:

V-on缩写

8.计算侦听-watch

Vue提供了一种更通用的方式来观察和响应 Vue实例上的数据变动:侦听属性。

应用:通常用在数据变化时执行异步或开销较大的操作时,特殊的方式会用到,实时监听,占缓存比较大,开销比较大。

如果操作比较简单,一般用的computed。

三、 Vue的生命周期

Vue介绍_第2张图片

Vue介绍_第3张图片

Vue介绍_第4张图片

初始化的注入:里面是一个事件系统,created,架构

是否指定"el":没有的话要DOM结构上绑定对象

是否具有模板:是的话进行虚拟DOM,渲染模板。不是的话进行真实的DOM,输出在html中。

模板之后创建实例化对象,渲染实例,相当于willmount

函数封装:(内核原理)

在底层的实现上,Vue将模板编译成虚拟 DOM渲染函数。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM 操作上。

文本

数据绑定最常见的形式就是使用"Mustache" 语法(双大括号)的文本插值:

Message: {{ msq }}

通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。

四、条件渲染

1.v-if有两种用法,可以使用在文本里,也可以在模板里。

节点模板使用方式v-if.html

2.v-else给v-if添加一个else块。

v-else.html

3.v-else-if:vue2.0新增的模块。

v-else-if.html

4.v-show:根据条件展示元素

v-show 的元素始终会被渲染并保留在DOM中。v-show是简单地切换元素的CSS属性 display。

v-if:多  根据里面的条件去判断里面的DOM结构是否加载。

v-show:少   始终被渲染,只是改变里面的 display:none属性。

index.html:

Vue介绍_第5张图片

index.js:

Vue介绍_第6张图片

5.v-for  指令需要以item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。(遍历对象的语法)--------例如:v-for.html

6.在模板中使用:v-for模板.html

7.迭代对象:v-for对象.html

8.迭代对象加属性:index:下标,key关键字,value:值,位置不能变化,名字可以随意起

9.v-for属性加参数.htm

index.html:

Vue介绍_第7张图片

index.js:

Vue介绍_第8张图片

10.循环整数:v-for整数.html

index.html:

Vue介绍_第9张图片

index.js:

Vue介绍_第10张图片

效果图:

Vue介绍_第11张图片

11.使用v-on监听dom事件

使用方式:v-on:事件名称  例如v-on:click,监听单击事件

例如:监听dom事件:v-on-dom.html

       方法事件:v-on-function.html

当逻辑处理较复杂的时候,可以定义一个方法处理,v-on可以接受一个方法。

内联处理器方法:v-on-内联.html

12.Vue.js为 v-on提供了事件修饰符来处理 DOM 事件细节:

.stop: 阻止单击事件冒泡

.prevent:阻止默认事件

.capture:事件捕获

.self :事件本身

.once :事件只触发一次(2.1.4版本新增)

13.阻止单击事件冒泡:

提交事件不再重载页面:

修饰符可以串联:

只有修饰符:

添加事件侦听器时使用事件捕获模式:

...

只当事件在该元素本身(而不是子元素)触发时触发回调:

...

14.基础用法:

vue.js的v-model在表单控件上实现双向绑定.

v-model会根据控件类型自动选取正确的方法来更新元素.

v-model并不关心表单控件初始化所生成的值。因为它会选择 Vue实例数据来作为具体的值,使用指令进行绑定,双向绑定.

index.html:

Vue介绍_第12张图片

index.js:

Vue介绍_第13张图片

效果图:

index.html:

Vue介绍_第14张图片

index.js:

Vue介绍_第15张图片

效果图:

Vue介绍_第16张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号