Vue 初体验

点击标题超链接可跳转到对应的html界面

01_Vue3的引入-CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h2>world</h2>
    </div>
    <script src="https://npm.elemecdn.com/vue@3.0.11/dist/vue.global.js"></script>
    <script>
        const why = {
            template: '<h2>hello</h2>',
        }

        const app = Vue.createApp(why)
        app.mount("#app")
    </script>

</body>
</html>

02_Vue3的引入-local

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

    <script src="../js/vue.js"></script>
    <script>
        Vue.createApp({
            template: '<h2>hello Vue.js! 你好</h2>',
        }).mount("#app")
    </script>

</body>
</html>

03_计数器案例-原生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<h2 class="counter"></h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>


<script>
    // 1.获取所有的元素
    const counterEl = document.querySelector('.counter');
    const incrementEl = document.querySelector('.increment');
    const decrementEl = document.querySelector('.decrement');

    // 2.定义变量
    let counter = 100;
    counterEl.innerText = counter;

    // 3.监听按钮的点击
    incrementEl.addEventListener('click', () => {
        counter++;
        counterEl.innerText = counter;
    });
    decrementEl.addEventListener('click', () => {
        counter--;
        counterEl.innerText = counter;
    });

</script>
</body>
</html>

04_计数器案例-Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

    <script src="../js/vue.js"></script>
    <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 {
                    counter: 10 ,
                    message: "hello Vue.js!"
                }
            },
            methods: {
                increment() { //语法糖 写法
                    this.counter++;
                    console.log("increment")
                    console.log(this.counter)
                },
                decrement: function() { //ES5 写法
                    this.counter--;
                    console.log("decrement")
                    console.log(this.counter)
                }
            }
        }).mount("#app")
</script>
</body>
</html>

05_template写法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

    <script type="x-template" id="code">
        <div>
            <h2>{{message}}</h2>
            <h2>{{counter}}</h2>
            <button @click='increment'>+1</button>
            <button @click='decrement'>-1</button>   
        </div>
    </script>

    <script src="../js/vue.js"></script>
    <script>
        Vue.createApp({
            template: '#code', // # 号开头的时候, 就是id. 不是class 会执行 querySelector(#why)
            data: function() {
                return {
                    counter: 100 ,
                    message: "hello Vue.js!"
                }
            },
            methods: {
                increment() { //语法糖 写法
                    this.counter++;
                    console.log("increment")
                    console.log(this.counter)
                },
                decrement: function() { //ES5 写法
                    this.counter--;
                    console.log("decrement")
                    console.log(this.counter)
                }
            }
        }).mount("#app")
</script>
</body>
</html>

06_template写法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

    <template id="code">
        <div>
            <h2>{{message}}</h2>
            <h2>{{counter}}</h2>
            <button @click='increment'>+1</button>
            <button @click='decrement'>-1</button>   
        </div>
    </template>

    <!-- 可以用div 但是会渲染两边. 原始的数据会被保留 -->
    <!-- 也就是 code 里面的内容在解析的时候被显示一次 被 Vue 解析之后, 在 app 中又被渲染一次-->

    <script src="../js/vue.js"></script>
    <script>
        Vue.createApp({
            template: '#code', // # 号开头的时候, 就是id. 不是class 会执行 querySelector(#why)
            data: function() { // vue 2 中 也可以传入一个对象(虽然官方推荐是一个函数) [vue3 中不能传入对象, 否则会报错(只能传函数 返回一个对象)]
                return { 
                    counter: 100 ,
                    message: "hello Vue.js!"
                    // data 中的数据会被 vue 中劫持
                }
            },
            methods: { // 这里不可用箭头函数, 因为箭头函数中的 this 指向的是父组件, 而不是当前组件
                increment() { //语法糖 写法
                    this.counter++;
                    // this 这种就是指向 vue 实例
                    // 可以修改或者获取 , 可以直接访问
                    console.log("increment")
                    console.log(this.counter)
                },
                decrement: function() { //ES5 写法
                    this.counter--;
                    console.log("decrement")
                    console.log(this.counter)
                }
            }
        }).mount("#app")
</script>
</body>
</html>