溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue聲明式渲染詳解

發布時間:2020-08-27 18:00:27 來源:腳本之家 閱讀:182 作者:街角小七 欄目:web開發

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、渲染結構:

Vue聲明式渲染詳解

下面看看將文本數據單向綁定到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>

渲染結構:

Vue聲明式渲染詳解

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女