当前位置: 首页 > Web前端 > vue.js

WEB前端(五)--Vue

时间:2023-03-31 19:01:41 vue.js

Vue概念Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同,Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层,不仅易于使用,而且易于与第三方库或现有项目集成。另一方面,当与现代工具链和各种支持库相结合时,Vue也完全有能力为复杂的单页应用程序提供支持。学习vue必须要有扎实的前端基础知识,否则会相当吃力!!!MVVM框架与传统框架的区别在于Vue采用了最新的MVVM框架。它最大的特点就是我们本来是在页面上操作的,页面和页面中的数据是混合在一起的。MVVM框架体系引入了后端已经根深蒂固的分层思想,是对MVC架构的扩展,实现了数据和页面的分离。页面布局完成后,我们就只能对数据进行操作了。当数据发生变化时,页面上的内容会自动随之变化,不需要开发者开发专门的代码来改变,比如之前ajax技术实现的局部刷新。MVVM是一种设计思想,增强了早期的web前端开发,将前端代码按职责划分为三个部分:界面(View)部分:由html+css组成,允许在html中直接访问,css使用变量、表达式、语句等。模型部分(Model):一般是JSON格式的对象,用于存放视图中需要的数据和功能。视图模型(ViewModel):负责自动维护模型对象中的变量和界面中的变量的同步。因为ViewModel的存在,数据可以自动同步到界面,几乎避免了很多重复的编码!Vue设计思想(ObserverDesignPattern)观察者模式(Observer):常被称为发布-订阅者模式。它定义了一对多的依赖关系,即当一个对象的状态发生变化时,所有依赖它的对象都会得到通知并自动更新,解决了主体对象和观察者之间的功能耦合。Vue基本用法实例化Vue每个Vue应用程序都需要通过实例化Vue来实现。varvm=newVue({//option})对象参数el:绑定到指定的html标签(挂载点)data:绑定的数据和视图中的数据实现双向绑定(data)方法:bind方法绑定到视图(方法)中的事件方法mounted:表示在Dom完全加载时执行函数方法。模板语法插值最常见的数据绑定形式是使用{{...}}(双花括号)

{{message}}

的文本插值
HTML使用v-html命令输出html代码
属性绑定HTML属性值应该使用v-bind指令如果为true使用class1类的样式,否则不要使用该类修改颜色

v-bind:class指令
表达式完全支持JavaScript表达式{{5+5}}
{{ok?'是':'否'}}
{{message.split('').reverse().join('')}}支持JavaScriptVue特性命令html中的v-bind如果想让元素的属性值跟随程序可以用v-bind或者:代替,它的基本语法是:也可以使用它的简化形式,它的基本语法是:案例分析:hellov-showv-show是控制元素显示和隐藏的特殊指令,其基本语法为:当Vue对象扫描到v-show时,""中的变量或js表达式会被立即执行。如果变量或js表达式的值为真,则什么也不做,元素保持原样显示。如果变量或js表达式的值为false,newVue()会自动将display:none添加到当前元素。示例关键代码如下:显示×v-if和v-elsev-if和v-else是在html中实现分支控制,选择两者之一的实现,使用时,v-if和v对应的两个元素-else必须并排写!中间不能插入其他元素,基本语法为:示例关键代码如下:欢迎,叮叮|注销登录|register/div>v-else-ifv-else-if特别与v-if配合使用,控制显示多个元素的特殊命令其基本语法为:......注意v-if和v-else-if和v-else必须连续写,不能插入其他元素.示例关键代码如下:=90">Excellent=80">Good=70">通过通过v-forv-for是一种特殊的方法,根据重复生成多个相同结构的元素数组指令的内容。其语法为:<待重复生成的元素v-for="(当前元素值,当前位置)数组">示例关键代码如下:
    {{i+1}}-{{t}}
v-for也可以遍历对象属性,例如:
    {{key}}:{{value}}
v-for也可以计数,例如:
    {{i}}
v-onv-on是专门绑定事件处理函数的命令,其基本语法为:v-on也可以用@符号代替,其基本语法结构为:对于页面中定义的任何事件处理函数,都必须在其中添加对应的函数实体示例键码methodsinnewVue()成员如下:d1d2v-html如果{{}}绑定到HTML片段,它不会be交给浏览器分析。相反,HTML片段的内容按原样显示-与DOM中的textContent相同。如果要解析html,可以使用v-html代替{{}}。它的基本语法结构是:这个位置显示变量内容示例关键代码如下:

{{msg}}

v-textv-text是一条特殊指令,可以代替{{}}绑定元素内容,用于设置元素内部的文字内容,可以防止{{}}因为网络延迟暂时显示。其语法为:示例关键代码如下:v-modelv-model用于实现双向绑定指令,不仅可以自动将程序中的变化更新到页面(model->view),还可以将页面中的变化更新回程序中的变量(view->model)。基本语法为:示例关键代码如下:更新的双向绑定无线电操作:无线电操作的值是一个硬编码的固定替代值!当用户切换不同radio之前的selected状态时,真正改变的是radio的checked属性的值。因此,如果要使用双向绑定获取当前选中radio的值,应该绑定checked属性:示例代码如下:Gender:

你选择的性别是:{{sex==1?"Male":"Female"}}

select的双向绑定element一个select包含多个option元素。所有替代值都分布在每个选项上。但是每个替代值也是硬编码的。每次用户选择不同的选项时,select元素实际上将所选选项的值修改为select的value属性。其语法为:xxx............示例代码为如下:北京上海杭州
axios对ajax的支持封装的比较好,尤其是在异步处理方面,Vue中推荐使用axios(ajax输入输出系统)