Vue.js Hello Word 入門操作

 Vue 入門步驟:

1、提供標籤用於填充數據
2、引入vue.js庫文件
3.使用vue語法 做功能
4、把Vue提供的數據填充到標籤
 

特殊字符參數分析:

<div>{{msg}}</div> //雙括號爲插值表達式  作用是將數據填充到HTML標籤中 支持基本的計算操作如{{1 + 2}}
el: '#app', //選擇id爲app的容器 (元素掛載的位置)
data:{
    msg: 'Hello Word'//模型數據 (值是一個對象)
}

hello word案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<div>{{msg}}</div> //雙括號爲插值表達式  作用是將數據填充到HTML標籤中 支持基本的計算操作如{{1 + 2}}

</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /* Vue 入門步驟:
    1、提供標籤用於填充數據
    2、引入vue.js庫文件
    3.使用vue語法 做功能
    4、把Vue提供的數據填充到標籤
    */

    var vm = new Vue({
            el: '#app', //選擇id爲app的容器 (元素掛載的位置)
            data:{
                msg: 'Hello Word'//模型數據 (值是一個對象)
            }

    });

</script>


</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章