Vue基础语法

简介: Vue基础语法



前端框架很多,无论选择哪个框架,对于前端处理的事情依旧是模板渲染、处理用户数据交互、事件的绑定等,只不过每个框架的理念和写法不同而已。Vue通过声明一个唯一的页面实例new Vue({…})来标记当前页面的HTML结构、数据展示及相关事件的绑定。

模板语法

Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM与底层Vue实例的数据进行绑定。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,Vue能够智能地计算出最少需要重新渲染多少组件,并把DOM操作次数减到最少。

简单地说:Vue模板语法实现前端渲染,前端渲染即是把数据填充到html标签中。数据(来自服务器)+模板(html标签)=前端渲染(产物是静态html内容)。

插值

插值就是将数据插入html文档中,包含文本、html元素、元素属性等。

文本插值

文本插值中用得最多的就是用双大括号的形式插入文本

使用v-once指令插值

在上面代码中页面只会呈现I LOVE YOU,当改变data中的message属性值时,页面将不再刷新。

HTML插值

双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML,需要使用v-html。使用v-html指令将数据解释成HTML代码

属性插值

Mustache语法不能作用在HTML attribute上,遇到这种情况应该使用v-bind:指令。

在开发的时候,有时属性不是固定不变的,有可能根据我们的一些数据动态地决定,例如图片标签(img )的src属性,我们可能从后端请求了一个包含图片地址的数组,需要将地址动态地绑定到src上,这时就不能简单地将src固定为某个地址。还有一个例子就是a标签的href属性。这时可以使用v-bind:指令。其中,v-bind:可以缩写成冒号:使用v-bind:指令绑定属性

服务器请求过来的数据,我们一般都会在data那里中转一下,中转过后再把需要的变量绑定到对应的属性上面。

v-bind除了可以在开发中用在有特殊意义的属性外(src、href等),也可以绑定其他一些属性,如与class和style绑定,如例

既然是一个对象,那么该对象内的属性就可能不唯一,但只要有一项为真,对应的类名就会存在。通过v-bind更新的类名和元素本身存在的类名不冲突,可以优雅地共存,

插值中使用JavaScript表达式

迄今为止,在模板中,我们一直都只绑定简单的property键值。但实际上,对于所有的数据绑定,Vue.js都提供了完全的JavaScript表达式支持

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制需要注意,每个绑定只能包含单个表达式,所以下面的表达式不会生效,代码如下:

指令

指令在上面已经使用过了,例如v-bind:和v-html,指令就是指这些带有v-前缀的特殊属性。指令属性的值预期是单一JavaScript表达式(除了v-for)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。

1.参数

有一些指令能够接收一个“参数”,在指令名称之后以冒号表示。如v-bind指令可以用于响应式地更新HTML attribute,代码如下:

在这里href是参数,告知v-bind指令将该元素的href attribute与表达式url的值绑定。

2.动态参数

从版本2.6.0开始,可以用方括号将JavaScript表达式作为一个指令的参数括起来,响应式使得Vue更加灵活多变,其动态参数也有其含义,代码如下:

这里的attributeName会被作为一个JavaScript表达式进行动态求值,求得的值将作为最终的参数使用。例如,如果Vue实例有一个data属性attributeName,其值为’href’,那么这个绑定将等价于v-bind:href。

同样地,可以使用动态参数作为一个动态的事件名绑定并处理函数,格式代码如下:

同样地,当eventName的值为’focus’时,v-on:[eventName]等价于v-on:focus。

当然动态参数的值也有约束,动态参数预期会求出一个字符串,异常情况下此值为null。这个特殊的null值可以被显性地移出绑定。任何其他非字符串类型的值都会触发一个警告。

3.修饰符

修饰符(Modifiers)是以半角句号“.”指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault(),代码如下:

在后面章节对v-on和v-for等功能的探索中,将会看到修饰符的其他例子。

3.1.3 过滤器

过滤器是对即将显示的数据做进一步的筛选和处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。

过滤器分全局过滤器和局部过滤器,全局过滤器在项目中使用频率非常高。

1.定义过滤器

· 全局过滤器

Vue.filter('过滤器名称',function(value1[,value2,...]){
    //逻辑代码
    })
· 局部过滤器
    new Vue({
            filters:{
         '过滤器名称':function(value1[,value2,...]){
           //逻辑代码

过滤器使用的地方

Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+版开始支持)。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示,格式代码如下:

目录
打赏
0
2
2
0
196
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
155 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
69 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
77 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
81 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

相关实验场景

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等