vue学习1

初试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>

    <script src="https://unpkg.com/vue@next"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

</head>

<body>
    <div id="app">
        <span>Counter: {{ Counter }}</span>
        <button v-on:click="Add">加10</button> <button v-on:click="min">减10</button>
        <hr>
        <span>teststr: {{ teststr }}</span>
        <hr>
        <input v-model="teststr" />
        <hr>
        <span v-if="show">show</span>
        <button v-on:click="show=!show">影藏显示</button>
        <hr>

        <ol>
            <li v-for="item in items">
                {{item.value}}
            </li>
        </ol>
        <ol>
            <li v-for="item in List">
                {{item.txt}}
            </li>
        </ol>

        <hr>
        <input v-bind="prop">
        <!-- <span><p v-text="counter"></p></span>  -->

        <ol>
            <!-- 使用组件 固定-->
            <component_li></component_li>
            <component_li></component_li>
        </ol>
        <ol>
            <!-- 使用组件 参数 -->
            <component_li2 v-for="componentdata in componentdatas" :id="componentdata.id" :key="componentdata.id"
                :title="componentdata.name" v-bind:data="componentdata"></component_li2>
        </ol>
        <ol>
            <!-- 使用组件 参数 使用组件参数-->
            <component_li3 v-for="componentdata in componentdatas" :id="componentdata.id" :key="componentdata.id"
                :title="componentdata.name" v-bind:data="componentdata">
            </component_li3>
        </ol>
    </div>

    <script>
        // 组件定义
        const component_li = {
            template: '<li>item1</li>'
        };
        // 组件定义2 -传参数
        const component_li2 = {
            // 参数 父组件传递
            props: ['data'],
            template: '<li>{{data.name}}</li>',
        };
        // 组件定义3-组件定义data
        const component_li3 = {
            // 参数 父组件传递
            props: ['data'],
            template: '<li v-on:click="show($event)">{{data.name}}--{{component_li3_value}}</li>',
            data() {
                return {
                    component_li3_value: "aaa"
                }
            },
            methods: {
                show(a) {
                    // 点击或当前对象的内容  调用参数：show($event)
                    console.log(a);
                    console.log(a.target);
                    console.log(a.target.id);
                    console.log(a.target.innerHTML);
                },
            }

        };
        const app = {
            data() {
                return {
                    Counter: 0,
                    show: true,
                    teststr: 'teststrvalue',
                    items: [
                        { value: "a" },
                        { value: "b" },
                        { value: "c" },
                    ],
                    List: [
                        { txt: 1 },
                        { txt: 12 },
                    ],
                    componentdatas: [
                        { id: 1, name: "张三" },
                        { id: 2, name: "李四" },
                        { id: 3, name: "王五" }
                    ],
                    prop: { id: 'id', class: 'class' },
                }
            },
            methods: {
                Add() {
                    this.Counter += 10;
                },
                min() {
                    this.Counter -= 10;
                }

            },
            // 组件
            components: {
                component_li,
                component_li2,
                component_li3
            },

            mounted() {
                setInterval(() => {
                    this.Counter++
                }, 1000)

            },

            beforeCreate() {
                console.log("beforeCreate...");
            },

            created() {
                console.log("created...");
            },
            beforeMount() {
                console.log("beforeMount...");
            },




        }

        Vue.createApp(app).mount('#app');
    </script>

</body>

</html>

 

posted @ 2023-10-17 15:21  i_mengli  阅读(2)  评论(0)  编辑  收藏  举报