文档章节

Vue.js学习系列(十九)--常用指令(二)

博为峰教研组
 博为峰教研组
发布于 2017/03/15 18:33
字数 344
阅读 9
收藏 1

2.带参数的指令

一些指令能接受一个“参数”,在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:

<a v-bind:href="url"></a>

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

示例代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

 <pre><a v-bind:href="url">百度</a></pre>

</div>   

<script>

new  Vue({

  el:'#app',

  data:{

    url:'http://www.baidu.com'

  }

})

</script>

</body>

</html>

运行结果如下:

点击百度进入到百度首页。

 

3.v-on指令

另一个例子是 v-on 指令,它用于监听 DOM 事件:

下面的示例在用户点击按钮后对字符串进行反转操作:

<a v-on:click=" reverseMessage "> 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

 <p>{{message}}</p>

 <button v-on:click="reverseMessage">反转字符串</button>

</div>   

<script>

new  Vue({

  el:'#app',

  data:{

    message:"vue.js"

  },

  methods:{

    reverseMessage:function () {

      this.message=this.message.split('').reverse().join('');

    }

  }

})

</script>

</body>

</html>

 

 

点击反转字符串按钮,显示界面如下:

 

 

Vue.js 为两个最为常用的指令提供了特别的缩写:

v-bind缩写

<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

v-on缩写

<!-- 完整语法 -->

<a v-on:click="reverseMessage"></a>

<!-- 缩写 -->

<a @click=" reverseMessage "></a>

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue 全站缓存之 vue-router-then :前后页数据传递

连续预告了好几天,总算写到这篇了。 系列篇1:Vue 全站缓存之 keep-alive : 动态移除缓存 系列篇2:Vue 全站缓存二:如何设计全站缓存 本篇为系列篇3:Vue 全站缓存之 vue-router-then :前...

wanyaxing
2018/08/02
0
0
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
2018/07/11
0
0
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现...

依乐祝
2018/11/28
0
0
Vue 系列一 之 Vue 基础

Create by jsliang on 2018-11-8 13:34:30 Recently revised in 2019-1-12 19:23:17 Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 推荐通...

jsliang
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部