VUE3（一）初体验

引入vue的方法：

//通过CDN引入
<script src="https://unpkg.com/vue@next"></script>
//保存源码从本地引入
<script src="../js/vue.js"></script>

Vue的源码中有一个Vue的实例，可以直接使用：

直接使用这个实例并调用createApp方法可以得到一个app的实例：

const app=Vue.createApp(...); //传入的参数为一个json
//template：通过一个字符串来定义vue需要帮助我们渲染的模板信息
//data：通过一个函数来返回数据，在html中使用双大括号使用，在js中使用this访问
//methods：通过一个json来定义要使用的方法

并将这个app实例挂载到一个标签中：

<div id="app"></div>
<script>
        const why={
            template:"<h2>hello world</h2>"
        }
        const app=Vue.createApp(why);
        app.mount("#app");
    </script>

整合的写法：

        Vue.createApp({
            template: `
                <div>
                    <h2>{{message}}</h2>
                    <h2>{{counter}}</h2>
                    <button @click="increment">+1</button>
                    <button @click="decrement">-1</button>
                </div>
            `,
            data: function () {
                return {
                    message: "hello world",
                    counter: 100
                }
            },
            methods: {
                increment() {
                    console.log("点击了+1");
                    this.counter++;
                },
                decrement() {
                    console.log("点击了-1");
                    this.counter--;
                }
            }
        }).mount("#app");

原生的js开发是命令式编程，vue是声明式编程。

两种方式将template中的元素抽取出来：

使用x-template

//通过x-template写入，有提示、无高亮
    <script type="x-template" id="why">
        <div>
            <h2>{{message}}</h2>
            <h2>{{counter}}</h2>
            <button @click="increment">+1</button>
            <button @click="decrement">-1</button>
        </div>
    </script>
    <script>
        Vue.createApp({
            // template以#开头，会被用作querySelector，并使用匹配元素的innerHTML来填充模板
            template:"#why",
            data: function () {
                return {
                    message: "hello world",
                    counter: 100
                }
            },
            methods: {
                increment() {
                    console.log("点击了+1");
                    this.counter++;
                },
                decrement() {
                    console.log("点击了-1");
                    this.counter--;
                }
            }
        }).mount("#app");
    </script>

使用template

<!-- html原生的，不会被渲染，只用于JavaScript -->
    <template id="why">
        <div>
            <h2>{{message}}</h2>
            <h2>{{counter}}</h2>
            <button @click="increment">+1</button>
            <button @click="decrement">-1</button>
        </div>
    </template>
    <script>
        Vue.createApp({
            template:"#why",
            data: function () {
                return {
                    message: "hello world",
                    counter: 100
                }
            },
            methods: {
                increment() {
                    console.log("点击了+1");
                    this.counter++;
                },
                decrement() {
                    console.log("点击了-1");
                    this.counter--;
                }
            }
        }).mount("#app");
    </script>