初体验

<body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 0. 创建实例的全局配置对象
        const HelloVue = {
            // 定义数据
            data() {
                return{
                    message: "Hello"
                }
            }
        };
        //1. 创建Vue的实例对象
        const app = Vue.createApp(HelloVue).mount("#app");
        
    </script>
</body>

vue 是响应式的，数据和页面分离，可以在控制台中

app.message = "新内容";

实时无刷新更改页面内容，只解析“#app”内的内容

<body>
    <div id="app">
        <div>{{colleges}}</div>
        <p>---------------</p>
        <ul>
            <li>{{colleges[0]}}</li>
            <li>{{colleges[1]}}</li>
            <li>{{colleges[2]}}</li>
        </ul>
        <p>---------------</p>
        <ul>
            <li v-for="college in colleges">{{college}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 0. 创建实例的全局配置对象
        const listApp = {
            // 定义数据
            data() {
                return{
                    colleges: ["山大-中心","山大-洪楼","山大-软件"]
                }
            }
        };
        //1. 创建Vue的实例对象
        const app = Vue.createApp(listApp).mount("#app");
        
        // app.colleges.push("山大-青岛");
    </script>
</body>

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p>-------------------</p>
<!-- 
        <button v-on:click="msg='山大'">大学</button>
        <button v-on:click="msg='中心'">校区</button>
         -->
        <!-- <button v-on:click="university">大学</button>
        <button v-on:click="campus">校区</button> -->
        <button @click="university">大学</button>
        <button @click="campus">校区</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        
        const app = Vue.createApp({
            data() {
                return {
                    msg: ""
                }
            },
            methods: {
                // 大学
                university(){
                    this.msg= "山大";
                },
                // 校区
                campus(){
                    this.msg = "中心";
                }
            }
        }).mount("#app");
    </script>
</body>