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 数据绑定与指令的主要内容,如果未能解决你的问题,请参考以下文章

02-vue常用指令的基本使用

vue 3.x基础入门:vue 的指令与过滤器

(Vue -05) v-model指令 + 绑定事件 + 深度响应式

02-Vue单向数据绑定与双向数据绑定

02-Vue单向数据绑定与双向数据绑定

02-Vue单向数据绑定与双向数据绑定