|
[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地址， 方便点击链接
| 
窥视卡
雷达卡
发表于 2018-12-1 12:29:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2018-12-1 12:41:58
