02 vue 数据绑定与指令
Posted feihusurfer
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了02 vue 数据绑定与指令相关的知识,希望对你有一定的参考价值。
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
以上是关于02 vue 数据绑定与指令的主要内容,如果未能解决你的问题,请参考以下文章