1、模板语法
在标记内通过模板语法：{{}}进行数据的绑定。
{{}}内支持变量，方法名，计算属性，表达式，不支持语句。
{{}}将数据解析为纯文本，如果需要解析为html，需要在标记上增加v-html指令。
2、属性绑定
在标记上，为标记属性绑定Vue数据时，不允许用模板语法，如下方式是不合法的。
<!-- 错误写法 -->
<a href="{{url}}">百度</a>
属性绑定需要使用vue指令v-bind实现
v-bind:属性名="data属性" :属性名=“data属性” <!-- 完整写法 --> <a v-bind:href="baidu">百度1</a> <!-- 简化写法 --> <a :href="baidu">百度1</a>
3、指令
3.1 v-bind 主要用于属性绑定，单向绑定
v-bind:属性名="data属性"
:属性名=“data属性”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 完整写法 -->
<a v-bind:href="baidu">百度1</a>
<!-- 简化写法 -->
<a :href="baidu">百度1</a>
</div>
<script type="text/javascript">
var app = new Vue({
// 挂载元素 - 作用范围
el: ‘#app‘,
// vue数据
data: {
baidu:‘http://www.baidu.com‘
},
});
</script>
</body>
</html>
3.2
原文地址：https://www.cnblogs.com/feihusurfer/p/12248641.html
时间： 2024-10-12 03:36:32