Vue3.0学习笔记-Vue初体验

最新推荐文章于 2022-12-06 10:22:23 发布

petit_wu

最新推荐文章于 2022-12-06 10:22:23 发布

阅读量113

点赞数

分类专栏： vue 文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/petit_wu/article/details/114298468

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

常见指令和函数

template：

mount（#app）

data（）

methods（）

mounted

v-on:click=""

v-if=""

v-for="(item,index) of list"

v-model="" //双向数据绑定

组件和动态组件

const app=

app,mount(#app)

app.component()

v-bind:list="list"

Demo1.html

<!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>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>
</html>

Demo2.html

<!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>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                counter: 1
            }
        },
        mounted() {
            console.log('页面加载完成后-自动执行')
            setInterval(() => {
                //this.counter += 1
                this.$data.counter += 1
            }, 1000)
        },
        template: '<div>{{counter}}</div>'
    }).mount("#app")
</script>
</html>

Demo3.html

<!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>华强北美食城</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                content: '华强北美食城',
                setMeal: 'A套餐 B套餐 C套餐',
                isShowMeal: false
            }
        },
        methods: {
            welcomeBtnClick() {
                this.content = '欢迎您的光临,招呼贵宾一位!'
            },
            byeBtnClick() {
                this.content = '欢迎下次光临,祝您健康!'
            },
            showOrHideBtnClick() {
                this.isShowMeal = !this.isShowMeal
            }
        },
        template: '<div><div>{{content}}</div>' +
            '<button v-on:click="welcomeBtnClick"> 有贵客到 </button> &nbsp;' +
            '<button v-on:click="byeBtnClick"> 贵客离开 </button>' +
            '<div>' +
            '<div v-if="isShowMeal"> {{setMeal}} </div>' +
            '<button v-on:click="showOrHideBtnClick"> 显示/隐藏套餐 </button>' +
            '</div>' +
            '</div>'
    }).mount("#app")
</script>
</html>

Demo4.html

<!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>华强北美食城</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                list: ['员工一', '员工二', '员工三'],
                inputValue: ''
            }
        },
        methods: {
            handleAddItem() {
                //this.list.push("新人");
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        },
        template: '<input v-model="inputValue"/>' +
            '<button v-on:click="handleAddItem">增加新人</button>' +
            '<ul>' +
            '<li v-for="(item,index) of list">[{{index+1}}]{{item}}</li>' +
            '</ul>'
    }).mount("#app");
</script>
</html>

Demo5.html

<!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>华强北美食城</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                list: ['员工一', '员工二', '员工三'],
                inputValue: ''
            }
        },
        methods: {
            handleAddItem() {
                //this.list.push("新人");
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        },
        template: '<my-title />' +
            '<input v-model="inputValue"/>' +
            '<button v-on:click="handleAddItem">增加新人</button>' +
            '<ul>' +
            //'<my-list v-for="(item,index) of list" v-bind:item="item" v-bind:index="index"></my-list>' +
            '<my-list v-bind:list="list"></my-list>' +
            '</ul>'
    });
    app.component('my-title', {
        template: '<h1 style="text-align:center">华强北美食城</h1>'
    });
    app.component('my-list', {
        //props: ['item', 'index'],
        props: ['list'],
        //template: '<li >[{{index+1}}]{{item}}</li>'
        template: '<li v-for="(item,index) of list">[{{index+1}}]{{item}}</li>'
    });
    app.mount('#app');
</script>
</html>