Vue声明式渲染

　　Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，也就是将模板中的文本数据写进DOM中，使用  {{data}}  的格式写入。此代码都是Vue.js官网上的实例。

1、首先导入Vue.js 

 <script type="text/javascript"  src="vue.js"></script>

2、html和js代码

<body>

    <div id="id">  //id为实例中el的属性
        {{message}}
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#id",
        data:{
            message:'渲染到html中的数据！'
        }
    })
</script>

3、渲染结构：

　　下面看看将文本数据单向绑定到DOM元素属性上，将这个元素节点的title 属性和 Vue 实例的 message 属性保持一致，代码如下

<body>
    <div id="id">
        <span v-bind:title="message"> <!--绑定实例中的数据-->
        <!-- <span :title="message"> 简写-->
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#id",
        data:{
            message:'页面加载的时间'+new Date()
        }
    })
</script>

 

渲染结构：

 

 

　



 

posted @ 2017-05-16 14:10  街角小七  阅读(1377)  评论(0)  编辑  收藏  举报