当前位置:网站首页 / 技术杂谈 / 正文

vue基本用法

时间:2019年06月04日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 566次 | 评论 0

第一章 Vue.js是什么?

Vue.js是一套构建用户界面(view)的MVVM框架。Vue.js的核心库只关注视图层,非常容易与其他库或已有的项目整合。

目的

Vue.js的产生核心是为了解决如下三个问题:

  • ① 解决数据绑定的问题;

  • ② Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application)Angular.js中对PC端支持的比较良好,但是对移动端支持就一般。而Vue.js主要支持移动端,也支持PC端。

  • ③ 它还支持组件化。也就是可以将页面封装成若干个组件,采用积木式编程 ,这样是页面的复用度达到最高(支持组件化)。

特性

一、MVVM模式

M: model 业务模型,用处:处理数据,提供数据

V: view 用户界面、用户视图

业务模型model中的数据发生改变的时候,用户视图view也随之变化。用户视图view改变的时候,业务模型model中的数据也可以发生改变。

二、组件化

三、指令系统

Vue.js 2.0开始支持虚拟DOM(Vue.js 1.0 是操作的真是DOM,而不是虚拟DOM,虚拟DOM可以提升页面的刷新速度。

Vue.js指令

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

指令的语法:

v-指令名称=”表达式判断或者是业务模型中属性名或者是事件名”

v-text

作用:操作元素中的纯文本

快捷方式:{{}}

vue基本用法 技术杂谈 第1张

简单方式:

vue基本用法 技术杂谈 第2张

v-html

作用:操作元素中的html

vue基本用法 技术杂谈 第3张

v-bind

作用:v-bind绑定页面中的元素属性。例如:a的href性,img的src、alt和title属性。

语法:

v-bind:元素的属性名 = “data中键名”。

vue基本用法 技术杂谈 第4张

vue基本用法 技术杂谈 第5张

在view模板中,可以使用简单的JS表单式,例如:

vue基本用法 技术杂谈 第6张

v-show

作用:

通过判断,是否显示该内容。如果值为true,则显示。否则就隐藏。

语法:

v-show=”判断表达式”

特点:元素会始终渲染在DOM中,只是被设置了display:none

vue基本用法 技术杂谈 第7张

vue基本用法 技术杂谈 第8张

v-if

作用:判断是否加载固定的内容。如果为真,则加载;为假时,则不加载。

用处:用在权限管理,页面条件加载

语法:v-if=”判断表达式”

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

v-if与v-show的区别:

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

v-else

v-else必须紧跟在v-if后面,否则他不能被识别。表示:当v-if的条件不成立的时候执行。

v-for

作用:控制html元素中的循环,实现诗句列表的生成。

用法:
view:
v-for=”item in 集合”

item: 集合的子项
集合:被遍历的集合,通常为数组。

用处:写在谁上,谁循环。

vue基本用法 技术杂谈 第9张

vue基本用法 技术杂谈 第10张

vue基本用法 技术杂谈 第11张

v-on

作用:对页面中的事件进行绑定

语法: v-on:事件类型=“事件处理函数名”

缩写: @事件类型=“事件处理函数名”

vue基本用法 技术杂谈 第12张

用法:

在view中,用v-on:事件类型=”methods中的方法名字”
在vue实例中,在methods中去监听:也就书写methods的该方法。

vue基本用法 技术杂谈 第13张

v-model

作用:

接受用户输入的一些数据,直接就可以将这些数据挂在到data属性上。这样就产生了双向的数据绑定(当业务模型中的数据发生变化时,用户界面中的数据会发生变化;当用户界面中的数据变化时,业务模型中的数据也会发生变化)。

语法:

v-model = “data中的键名”
在data中,最好也要定义这个属性,不然会报错。

参考链接:

https://cn.vuejs.org/v2/api/

推荐您阅读更多有关于“vue,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。