[Vue.js]学习笔记-Vue.js模板语法-参数
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
另: Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
Vue.js的模板语法有如下几种(点击进入各个详情介绍哦): 5. 参数
Vue.js模板语法-参数学习笔记如下:
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性。 通过实例学习下: [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<pre><a v-bind:href="url">苏飞论坛-Vue.js学习笔记</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.sufeinet.com/thread-24026-1-1.html'
}
})
</script>
</body>
</html>
运行如下:
可以看到,页面上市一个a链接
f12查看源码如下: [HTML] 纯文本查看 复制代码 <html><head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><pre><a href="http://www.sufeinet.com/thread-24026-1-1.html">苏飞论坛-Vue.js学习笔记</a></pre></div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.sufeinet.com/thread-24026-1-1.html'
}
})
</script>
</body></html>
通过上面的实例,以及查看源码,可以清晰的看到,此处实现了给a标签, 绑定了一个url地址, 方便点击链接
|