zoukankan      html  css  js  c++  java
  • 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>

    渲染结构:

     



  • 相关阅读:
    112. Path Sum
    66. Plus One
    258. Add Digits
    268. Missing Number
    275. H-Index II
    274. H-Index
    264. Ugly Number II
    263. Ugly Number
    199. Binary Tree Right Side View
    222. Count Complete Tree Nodes
  • 原文地址:https://www.cnblogs.com/dyfbk/p/6861103.html
Copyright © 2011-2022 走看看