首页 php教程 PHP开发 VueJS全面解析

VueJS全面解析

Dec 07, 2016 am 11:32 AM
vuejs

Vue.js是什么

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架。

1.VueJS 目的:

VueJs的产生核心是为了解决:

a: 解决数据绑定的问题,

b: vue框架产生的主要目的是为了开发大型单页面应用,

c: 它还支持组件化,也就是可以将页面封装成若干个组件,采用积木式进行编程,这样使页面复用性达到最高(支持组件化)。

2.VueJS 特性:

I: MVVM模式(数据变量(model)发生改变 视图(view)也改变, 视图(view)改变,数据变量(model)也发生改变)

使用MVVM模式有几大好处:

  1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

  2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。

  3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

  4. 可测试性。可以针对ViewModel来对界面(View)进行测试

II: 组件化

III 指令系统

IIII: vue2.0开始支持虚拟dom

vue1.0是操作的是真的dom元素而不是虚拟的

虚拟dom:可以提升页面的刷新速度

虚拟DOM有利也有弊。

A:大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是,Vue.js 2.0 依旧比 较小(当前版本 21.4kb),并

且也正在删除很多东西。

B: 内存 -同样,虚拟DOM需要将现有的DOM拷贝后保存在内存中,这是一个在DOM更新速度和内存使用中的权衡。

C: 并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢?这样的任何

DOM更新都将会使虚拟DOM带来无意义的预计算。

V: 通过变量模型

VueJS表达式:

步骤:

1引用

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
登录后复制

2.声明一段HTML被框架管理

<div id="myapp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
登录后复制

3.初始化vue 填写vue参数

I.属性:el 声明vuejs管理的边界 拓展:ng-app 类似(这个是 AngularJS中的)

II.属性:data 数据(状态 || 属性),专门存储一些数据的属性,数据一定是对象格式

<script type="text/javascript">
var vm = new Vue({
el:"#myapp",
data:{hello:"hello word vue app!",
message:"wyx",
result:{name:&#39;xinxin&#39;,password:&#39;123&#39;}
}
});
</script>
登录后复制

4.表达式:通过{{}}形式将我们data里面数据显示在页面中,

比如:

data:{{message:'xxxxx'}}

view中:{{message}}

<div id="myapp">
<ul>
<li>{{hello}}</li>
<li>{{message}}</li>
<li>{{result.name}}</li>
</ul>
</div>
登录后复制

view中:{{message}} 代码中绑定key 而在页面中显示的是value

data 核心作用是 存放显示在页面中的数据(model)(对获取的model与页面上要显示的内容产生了一种映射关系),就是说,如果我们实现前后端交互只要将得到的数据存放在data中,页面就会自动绑定,这样就实现了从 model------> view 的数据流向。

3.VueJS 指令:

指令:其实指的就是vue定义了以v-开头的自定义属性,每个不同的属性都有各自的意义和功能,

指令的用法:v-指令名称=“表达式判断或者是model属性或者是事件”

v-model :

作用:接收用户输入的一些数据,直接就可以将这些数据 挂载到data属性里面

语法:v-model ="属性值" {属性值:文本值}

在data中的处理:最好在data中也定义这个这个属性值,不然开始时会报错

v-if:

作用:通过判断加载固定的内容,若为真 加载,为假时删除元素

用在什么地方:用在权限管理,页面模块条件加载

语法:v-if=" 判断表达式 " 使用方式和if一样的

特点:控制元素插进来或者删除并不是隐藏

v-show:

元素会始终渲染并保持在dom中,并且安全性没有v-if高,因为v-show 用法和v-if相同,只是v-show将元素display设置成none,并不是将元素直接移除。

v-ifVS. v-show

一般来说,v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show较好,如果在运行时条件不大可能改变则使用v-if较好。

v-else

元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。

v-bind:

缩写::

{{}}表达式绑定数据的时候,可以直接将数据显示在页面中(html)里面,

v-bind img src 属性,

作用:v-bind 给页面中html属性进行绑定

语法:v-bind:图片里面src属性=“data 中的图片地址”

如:

<img
v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:&#39;red&#39;,fontSize:&#39;30px&#39;}
}
登录后复制

缩写形式:

<img :src="img" />
<div :style="styles">style</div>
登录后复制

v-bind添加的style样式是添加在内联中的。

v-on:

缩写形式:v-on:click ---- >@click

@+事件

作用:对页面中的事件进行绑定 vue自定义了一套事件机制

angularjs中对pc端支持比较良好,对移动端支持一般,vue主要支持移动端,也支持pc端

事件开发中,事件 v-on: 绑定在页面(view)中,再vue实例里面,在methods中去监听

在页面中 我们做的行为: v-on:click="函数名称"

函数应该写在vue实例的methods属性里面

methods也要写成对象:

methods:{
clickBtn:function(){
}
}
登录后复制

例:

methods:{
clickBtn:function(){
alert(&#39;触发了button绑定的事件&#39;);
}
}
登录后复制

   

在事件中传递值,事件中通过$event传递事件列表,在methods里面就可以直接获取事件列表里面的值

当一个行为所触发了一个事件,发生事件交互的时候所产生的一种结果(出现一个事件列表)

vue中的事件列表$event


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使用Vue.js和Kotlin语言开发安卓应用的一些技巧 使用Vue.js和Kotlin语言开发安卓应用的一些技巧 Jul 31, 2023 pm 02:17 PM

使用Vue.js和Kotlin语言开发安卓应用的一些技巧随着移动应用的普及和用户需求的不断增长,安卓应用的开发越来越受到开发者的关注。在开发安卓应用时,选择合适的技术栈至关重要。近年来,Vue.js和Kotlin语言逐渐成为安卓应用开发的热门选择。本文将介绍使用Vue.js和Kotlin语言开发安卓应用的一些技巧,并给出相应的代码示例。一、搭建开发环境在开始

使用Vue.js和Python开发数据可视化应用的一些技巧 使用Vue.js和Python开发数据可视化应用的一些技巧 Jul 31, 2023 pm 07:53 PM

使用Vue.js和Python开发数据可视化应用的一些技巧引言:随着大数据时代的到来,数据可视化成为了一种重要的解决方案。而在数据可视化应用的开发中,Vue.js和Python的组合能够提供灵活性和强大的功能。本文将分享一些使用Vue.js和Python开发数据可视化应用的技巧,并附上相应的代码示例。一、Vue.js简介Vue.js是一款轻量级的JavaSc

Vue.js与Objective-C语言的集成,开发可靠的Mac应用的技巧和建议 Vue.js与Objective-C语言的集成,开发可靠的Mac应用的技巧和建议 Jul 30, 2023 pm 03:01 PM

Vue.js与Objective-C语言的集成,开发可靠的Mac应用的技巧和建议近年来,随着Vue.js在前端开发中的普及和Objective-C在Mac应用开发中的稳定性,开发者们开始尝试将这两者结合起来,以开发出更加可靠和高效的Mac应用程序。本文将介绍一些技巧和建议,帮助开发者正确集成Vue.js和Objective-C,并开发出高质量的Mac应用。一

如何使用PHP和Vue.js实现图表上的数据筛选和排序功能 如何使用PHP和Vue.js实现图表上的数据筛选和排序功能 Aug 27, 2023 am 11:51 AM

如何使用PHP和Vue.js实现图表上的数据筛选和排序功能在网页开发中,图表是一种非常常见的数据展示方式。使用PHP和Vue.js可以轻松实现图表上的数据筛选和排序功能,使用户能够自定义查看图表上的数据,提高数据的可视化效果和用户体验。首先,我们需要准备一组数据供图表使用。假设我们有一个数据表格,包含姓名、年龄和成绩三列,数据如下:姓名年龄成绩张三1890李

使用Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具 使用Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具 Jul 31, 2023 pm 06:43 PM

使用Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具近年来,随着互联网的迅猛发展和数据的日益重要,网络爬虫和数据抓取工具的需求也越来越大。在这个背景下,结合Vue.js和Perl语言开发高效的网络爬虫和数据抓取工具是一种不错的选择。本文将介绍如何使用Vue.js和Perl语言开发这样一个工具,并附上相应的代码示例。一、Vue.js和Perl语言的介

Vue.js与Lua语言的融合,构建游戏开发的前端引擎的最佳实践和经验分享 Vue.js与Lua语言的融合,构建游戏开发的前端引擎的最佳实践和经验分享 Aug 01, 2023 pm 08:14 PM

Vue.js与Lua语言的融合,构建游戏开发的前端引擎的最佳实践和经验分享引言:随着游戏开发的不断发展,游戏前端引擎的选择成为了一个重要的决策。在这些选择中,Vue.js框架和Lua语言都成为了众多开发者的关注点。Vue.js作为一款流行的前端框架具有丰富的生态系统和便捷的开发方式,而Lua语言则因其轻量级和高效性能在游戏开发中得到广泛应用。本文将探讨如何将

如何使用Vue实现仿QQ聊天气泡特效 如何使用Vue实现仿QQ聊天气泡特效 Sep 20, 2023 pm 02:27 PM

如何使用Vue实现仿QQ聊天气泡特效在现如今的社交时代,聊天功能已经成为了手机应用和网页应用的核心功能之一。而聊天界面中最常见的元素之一就是聊天气泡,它可以清晰地将发送者和接收者的信息区分开来,有效地提高了信息的可读性。本文将介绍如何使用Vue实现仿QQ聊天气泡特效,以及提供具体的代码示例。首先,我们需要创建一个Vue组件来表示聊天气泡。组件包含两个主要部分

如何使用Vue.js和Java开发大数据分析和处理的解决方案的步骤和实践经验 如何使用Vue.js和Java开发大数据分析和处理的解决方案的步骤和实践经验 Jul 30, 2023 pm 09:01 PM

如何使用Vue.js和Java开发大数据分析和处理的解决方案的步骤和实践经验大数据分析和处理已经成为现代企业在决策制定和业务发展中不可或缺的重要环节。为了更高效地进行大数据的分析和处理,我们可以利用Vue.js作为前端框架和Java作为后端开发语言来开发一套完整的解决方案。本文将会介绍如何使用Vue.js和Java开发大数据分析和处理的解决方案,并附上代码示

See all articles