Vue基础教程(三) - 博客详情

你看到的 v-bind 特性被称为指令。指令带有前缀 v- 除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

例如：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Title</title>
</head>

<body>
    <!-- id标识vue作用的范围 -->
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
   -->
    <div id="app" v-bind:title="mytitle">
        <!-- {{}} 插值表达式，绑定vue中的data数据 -->
        {{msg}}
    </div>
    <!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       // 创建一个vue对象
       let vm = new Vue({
            el: '#app',//绑定vue作用的范围,el是element的简写。
            data: {//定义页面中显示的模型数据或者说为属性
               msg:'Hello,Vue!',
               mytitle:'move your mouse here! 现在是:'+new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

当然鼠标经过id=app的div节点，显示如下效果：

v-bind指令，也可以简写为一个：冒号。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Title</title>
</head>

<body>
    <!-- id标识vue作用的范围 -->
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
   -->
    <!--v-bind指令，也可以简写为一个：冒号。-->
    <div id="app" :title="mytitle">
        <!-- {{}} 插值表达式，绑定vue中的data数据 -->
        {{msg}}
    </div>
    <!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       // 创建一个vue对象
       let vm = new Vue({
            el: '#app',//绑定vue作用的范围,el是element的简写。
            data: {//定义页面中显示的模型数据或者说为属性
               msg:'Hello,Vue!',
               mytitle:'move your mouse here! 现在是:'+new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>