Vue初識、el、data

聶一發表於2020-10-20
Vue

2020年10月20日真是痛苦的一天

第一個VUE程式

步驟

  • 匯入開發版本的Vue.js
  • 建立Vue例項物件，設定el屬性和data屬性
  • 使用簡潔的模板語法把資料渲染到頁面上
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="text">
        {{ message }}
    </div>
    <script>
        const text = new Vue({
            el: '#text',
            data: {
                message: '我搞'
            }
        })
    </script>
</body>

el掛載點

作用
設定Vue例項掛載(管理)的元素

Veu例項的作用範圍是什麼
Vue會管理el選項命中的元素及其內部的後代元素

是否可以使用其他選擇器
可以使用其他的選擇器，建議使用ID選擇器

是否可以設定其他的dom元素
可以使用其他的雙標籤，不能使用HTML和BODY

data：資料物件

  • Vue中用到的資料定義在data中
  • data中可以寫複雜型別的資料
  • 渲染複雜型別資料時，遵守js的語法即可
<div id="app">
        {{ message }}
        <h2> {{ school.name }} {{ school.mobile }}</h2>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[3] }}</li>
        </ul>
    </div>
    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好 小黑!",
                school:{
                    name:"黑馬程式設計師",
                    mobile:"400-618-9090"
                },
                campus:["北京校區","上海校區","廣州校區","深圳校區"]
            }
        })
    </script>

相關文章