[Vue]Vue语法糖

语法糖 :是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发,简化代码是书写。

Vue.js的v-bind和v-on指令都提供了语法糖,也可以说是缩写。

1.v-bind可以省略,直接写一个冒号“:”:

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!--缩写为:-->
<a :href="url">链接</a>
<img :src="imgUrl" />
2.v-on:缩写为“@”:
<button v-on:click="handleClose">点击隐藏</button>
<!--缩写为:-->
<button @click="handleClose">点击隐藏</button>

原文地址:https://www.cnblogs.com/vickylinj/p/9549610.html

时间: 2024-10-09 06:28:01

[Vue]Vue语法糖的相关文章

Vue.js语法糖整理

el:element 需要获取的元素,一定是HTML中的根容器元素 data:用于数据的存储 methods:用于存储各种方法 数据绑定字面量只加载一次{{* msg}} data里面可以进行简单的运算: methods:{ getHome(){ return "早上好" } } -------------------------------------------------- HTML中渲染{{getHome()}} //得到的结果是--->早上好 v-bind绑定属性简写就

vue组件化之模板优化及注册组件语法糖

vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化 在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js进行了初体验,输出了经典的hello world.但是在这个过程遇到了编程最恶心的事情----字符串拼接. enter description here vue.extend函数需要一个对象,这个对象的属性是个模板,这个模板的源码是H5. 模板优化 创建组件构造器 在JavaScript里面写H5代码

vue基础语法

vue基础语法 vue官网链接:https://cn.vuejs.org/  一.Vue简介 Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. Vue.js是一款轻量级的.以数据驱动构建web界面的前端JS框架,它在架构设计上采用了MVVM(Model-View-ViewModel)模式,其中ViewModel是Vue.js的核心,它是一个Vue的实例,而这个实例又作用域页面上的某个HTML元素. 其核心在于通过数据驱动界面的更新

idea 添加 VUE 的语法

1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: @tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v

Vue模板语法(一)

Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. 另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架——它只聚焦于视图层. 因此它非常容易学习,非常容易与其它库或已

前端框架Vue自学之Vue基础语法(二)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue基础语法) 内容:通过官网说明,掌握Vue基础语法. 正文: Vue基础语法 一. 原文地址:https://www.cnblogs.com/xinkuiwu/p/12031107.html

[Vue] vue的一些面试题3

1. vue 组件里的定时器要怎么销毁? 当生命周期销毁后,并没有将组件中的计时器销毁,虽然页面上看不出来,但是如果在控制台打印的话,会发现计时器还在运行,所以要销毁计时器,避免代码一直执行 const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在beforeDestroy钩子可以被清除. this.$once('hook:beforeDestroy', () => { clearInterval(timer

Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数

目录 日考题(知识点)??? 1.http 与 https 2.前端布局 3.orm 大概的大纲?? vue框架??? 1.创建vue实例 2.挂载点 3.data 变量 4.methods 方法 5.插值表达式 6.文本指令 7.事件指令 8.属性指令 9.补充:面向对象js 10.补充:js函数 日考题(知识点)??? 1.http 与 https http 与 tcp : 一个是应用层, 传输层, http 协议传输层采用的是tcp http的特点: 无状态 无连接 先客户端发送请求, 服

python_装饰器_语法糖

什么是高阶函数? -- 把函数名当做参数传给另外一个函数,在另外一个函数中通过参数调用执行 #!/usr/bin/python3 __author__ = 'beimenchuixue' __blog__ = 'http://www.cnblogs.com/2bjiujiu/' def func_x(x): return x * 2 def func_y(y): return y * 3 def func_z(x, y): # 等价于 return func_x(5) + func_y(3) r