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

08-Vue入门实现

时间:2023-03-31 16:09:12 vue.js

一、VUE简介什么是VUE?VUE是一个基于MVVM设计模式的渐进式(集成式)纯前端JS框架。基于这个框架,我们可以让客户端的操作更加简单。如何理解框架?可以理解为已经包含部分核心功能的半成品代码,缺乏个性化定制,主要用于避免重复编码实现。什么场景使用VUE?大多数专注于数据操作(增删改查)的PC或移动端项目都可以用Vue开发,例如:美团、饿了么、淘宝、知乎、大众点评、微博...VUE快速入门官方js文件下载cn.vuejs.org业务及代码实现搭建一个html页面,呈现如下效果,实现点击图中加减按钮时中间数字的变化(需基于vue实现技术)。第一步:定义HTML页面,引入vue.js文件。文档第2步:在html页面的正文中添加以下元素。-{{n}}+div>说明:1)在界面中添加vue对象监听元素,习惯上使用id="app"2)寻找界面中以后可能变化的位置,用{标记出来{变量名}}特殊语法3)在界面中找到可点击的位置并绑定事件处理器。第三步:在html页面的body底部构建JS代码,在JS中创建一个Vue类型的对象来监听页面中的内容。其中:1)el(元素缩写)属性:“selector”,也就是要选择的范围被Vue对象监控。2)页面上的所有变量都必须存储在data属性中,以对象属性的形式存储。3)页面上所有的事件处理函数都必须存放在methods属性中,并以对象方法的形式存放。02-10月8日发布的VUEvue.js中的MVVM设计分析MVVM介绍背景分析在早期的web前端开发中,我们通常将页面组成分为三部分:html用于定义网页结构和呈现web页面内容。css为页面元素添加相关样式。JS为页面添加交互性。在这种开发结构中,由于HTML和CSS不支持变量,不支持分支循环等程序结构,任何地方的任何修改都需要依赖js来实现。导致很多重复的步骤和js中的编码!MVVM设计概述MVVM是一种增强早期web前端开发的设计理念,将前端代码按照职责分为三部分:界面(View)部分:由html+css组成,并允许在html中,直接在CSS中使用变量、表达式、语句等。模型部分(Model):一般是一个JSON格式的对象,用于存放视图中需要的数据和功能。视图模型(ViewModel):负责自动维护模型对象中的变量和界面中的变量的同步。因为ViewModel的存在,数据可以自动同步到界面,几乎避免了很多重复的编码!2.VUE中MVVM实现设计分析VUE前端框架中MVVM的设计,如图:代码实践分析以VUE中MVVM分析为基础,首先分析代码实现??过程,如图图中:3.VUEinInterpolation(插值)语法实现后台分析我们可以在传统的html页面中定义变量吗?当然不是,那么如果我们想通过变量来实现对页面内容的数据操作,也是不行的。当然我们可以在服务端定义html标签库,然后以html为模板,也可以在服务端进行解析,但是这个必须要通过服务端来处理。如何在客户端html页面中实现它?VUE中的插值语法是在html中添加变量,在js程序中使用variable方法与变量值同步,从而简化代码编写。它的基本语法是:{{变量或js表达式}}在{{}}里面可以写:变量、算术计算、三元、访问数组元素、创建对象、调用函数等,总之只要返回的是合法的js变量和表达式即可。但是不能写出没有返回值的程序结构(分支和循环)和js表达式。例如:文档

用户名:{{username}}

性别:{{gender==1?"Male":"Female"}}

小计:¥{{(price*count).toFixed(2)}}

下单时间:{{newDate(orderTime).toLocaleString()}}

今天星期几{{week[newDate().getDay()]}}

三、VUE中常用命令操作后台分析繁体html不支持定义表达式、分支语句、循环语句等结构。为了弥补它的不足,很多前端框架使用模板引擎给html元素添加自定义属性,然后使用解析引擎自动解析html定义需要处理的属性,这样增强html功能的方法就是Vue中常用的命令v-bind。在html中,如果想让元素的属性值随着程序的内容而变化,可以使用v-bind或者:代替。基本语法为:也可以使用其简化形式,其基本语法如下:案例分析:你好
v-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............示例代码为如下:北京上海杭州
总结(Summary)这一段是对vue的简单介绍和实现