v-bind指令 -- 对属性的数据绑定

<template>
<view>
    i am {{student.age + 1}} years old.<br/> 
</view>
<navigator url="../hello/hello">
      <view>
          i am {{student.age >=18 ? '成年' : '未成年'}} <br/>    *********数据展示*********
      </view>
</navigator>
</template>
------------------------------------------------------------------------
<script>
data(){
    return {
        student:{
            age:18   
        }
    }
}
</script>

我们一直做的数据展示都是在标签之外，而没有放在<navigator>标签里

如果要使 navigator 动态绑定的话
先在data(){}中添加URL

data() {
            return {
                title: 'Hello',
                student:{
                    age:17
                },
                skill:["Java","HTML","css","springcloud","vue"],
                url:"../hello/hello"    ************************
            }
        },

标签里不能使用mustache表达式， <navigator url="{{url}}">，否则无法编译
当我们想要在标签内部使用数据绑定的时候，我们要使用v-bind:组件的属性名这样一个指令

v-bind:组件的属性名
缩写：:组件的属性名

后面组件的属性名可以是url，可以是class，可以是name，可以是id
所有的属性名都是包含在我们标签里面的
v-bind:组件属性名就表示它要与data中标签进行数据绑定

<navigator v-bind:url="url"><!-- 错误写法：url="{{url}}" --> *******或者使用缩写:url:url********
        <view>
            i am {{student.age >= 18? '成年' : '未成年'}} years old. <br/>
            i have skills such as {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}}
        </view>
</navigator>
--------------------------------------------------
data() {
            return {
                title: 'Hello',
                student:{
                    age:17
                },
                skill:["Java","HTML","css","springcloud","vue"],
                url:"../hello/hello"    ************************
            }
        },

• 所以在标签外部数据绑定用{{mustache表达式}}
• 标签内部用v-bind:组件的属性名

data中定义了一张图片，我们希望把这张图片渲染到页面上

利用v-bind进行渲染

<image v-bind:src="img"></image>

缩写成

<image :src="img"></image>