西瓜皮儿

起步

2021/11/10

# 入门网址

# 基础指令

  • v-model：表单输入和应用状态之间的双向绑定
    • .number
    • .lazy
    • .trim
  • v-on：绑定事件，简写【@】
    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    • .passive


 
 




















<body>
    <div id="app">
        <input type="text" v-model="message">
        <button @click="getData">按钮</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    message: '消息',
                }
            },
            methods: {
                getData(e) {
                    console.log(this.message);
                }
            }
        })
    </script>
</body>

  
        复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 组件化

  • 注册组件分为全局组件和局部组件，Vue.component是注册的全局组件
  • 每个组件必须只有一个根元素 (vue3没有这个限制)




 
 
 
 
 




 
 
 
 
 
 
 
 
 
 
 
 
 
 







<body>
    <div id="app">
        本组件
        <hr>
        注册组件：
        <list></list>
        <hr>
        复用：
        <list></list>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('list', {
            template: `
            <div id="child">
                <ul>
                    <li v-for="name in students" :key="name">{{name}}</li>
                </ul>
            </div>
            `,
            data() {
                return {
                    students: ['hdy', '小赵', '张三'],
                }
            }
        })

        const app = new Vue({
            el: '#app',
        })
    </script>
</body>

  
        复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 生命周期

# data/computed/watch

  • 为什么不直接用对象，而用函数返回对象？

由于VUE组件是可以复用的，那么多个组件复用的时候，需要肯定不能用相同的数据。就利用function返回新的对象，让相同组件之间都拥有自己的data



 
 








 
 
 
 
 








<body>
    <div id="app" v-once>
        <comp></comp>
        <comp></comp>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('comp', {
            template: `
            <div>{{message}}</div>
            `,
            data() {
                return {
                    message: Math.floor(Math.random() * 100),
                }
            }
        })

        const app = new Vue({
            el: '#app',
        })
    </script>
</body>

  
        复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# class/style

  • 动态绑定方法：
<div v-bind:class="{ active: isActive }"></div>

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

<div v-bind:class="[activeClass, errorClass]"></div>

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

  
        复制成功
1
2
3
4
5
6
7
  • 可以用计算属性返回对象的形式计算动态class


 







 
 
 
 
 
 





<body>
    <div id="app">
        <div :class="box"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            computed: {
                box() {
                    return {
                        peek: true,
                        dark: +new Date().getHours() > 18 || +new Date().getHours() < 5
                    }
                }
            }
        })
    </script>
</body>

  
        复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 数组

  • 要使用唯一的key值
  • 不能使用下标更改，数组监听只是重写了下面的方法
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()

# Event

  • 可以用 v-on / @ 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码或函数
  • 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
<!-- 执行JS代码 -->
<button v-on:click="counter += 1">Add 1</button>

<!-- 函数默认接收event参数 -->
<button v-on:click="greet">Greet</button>

<!-- 函数传值 -->
<button @click="getMoney(10)">转换美元</button>

<!-- 又想传值又想传事件 -->
<button @click="getMoney(10, $event)">转换美元</button>

  
        复制成功
1
2
3
4
5
6
7
8
9
10
11

# 插槽

  • 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

父模板能向子模板的slot传值，但编译过程是在父模板走的，子模板拿到的只是编译后的值替换掉对应的slot标签。



 






 
 
 



 










 






<body>
    <div id="app">
        <home>{{name}}</home>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const home = {
            template: `
            <div>我的名字是：
                <slot />
            </div>
            `,
            data() {
                return {
                    name: '儿子',
                }
            }
        };
        const app = new Vue({
            el: '#app',
            components: {
                home
            },
            data() {
                return {
                    name: '爸爸',
                }
            }
        })
    </script>
</body>

  
        复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 混入

  • 定义一些可直接复用的方法、生命周期事情。
  • 混入对象的钩子将在组件自身钩子之前调用。
  • methods和data重名以组件本地的为准。







 
 
 

 
 
 





 
 
 
 




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

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const mixin = {
            created() {
                console.log('created');
            },
            methods: {
                say() {
                    console.log('mixin');
                }
            }
        }

        const app = new Vue({
            el: '#app',
            mixins: [mixin],
            mounted() {
                this.say();
            }
        })
    </script>
</body>

  
        复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 自定义指令

  • 对普通 DOM 元素进行底层操作
  • 可执行钩子：
    • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    • update：所在组件的 VNode 更新时调用
    • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind：只调用一次，指令与元素解绑时调用。
  • 入参：
    • el
    • binding = { name, value, expression, oldValue, arg, modifiers }
    • vnode
    • oldVnode
上次更新: 6/13/2025

组件间通信

Powered By Valine
v1.4.16