0
点赞
收藏
分享

微信扫一扫

Vue 3.0js的新API和方法

汤姆torn 2022-01-31 阅读 30
<!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>reactive方法和watchEffect方法</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <post-item :post-content="content"></post-item>
    </div>
    <script>
        //创建组件;
        const { reactive, watchEffect } = Vue;
        //创建常量;
        const state = reactive({ count: 0 });
        //函数方法;
        watchEffect(() => {
            document.body.innerHTML = `商品库存为:${state.count}`
        });
    </script>
</body>

</html>

ref方法的使用

<!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>ref方法</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <post-item :post-content="content"></post-item>
    </div>
    <script>
        const { ref, watchEffect } = Vue;
        //创建函数
        const state = ref(0)
        watchEffect(() => {
            document.body.innerHTML = `商品库存为:${state.value}`
        });
    </script>
</body>

</html>

computed方法的使用

<!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>computed方法</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <p>原始字符串:{{msg}}</p>
        <p>反转后的字符串:{{revmsg}}</p>
    </div>3VrzcxJNG YYYYFUO[[PONPOPIWDAEWZSW55z[,[,
    
    ]]]]
    <script>
        const { ref, computed } = Vue;
        const vm = Vue.createApp({
            setup() {
                const msg = ref('人世几回伤往事');
                const revmsg = computed(() =>
                    msg.value.split('').reverse().join(''));
                return {
                    msg,
                    revmsg
                }
            }
        });
        vm.mount('#app');
    </script>
</body>

</html>
举报

相关推荐

0 条评论