B站学习的回顾总结

视频地址 https://www.bilibili.com/video/av50680998/

1.MVC 和MVVM有什么区别？

　　MVC 是后端开发的概念： Model view controller

　　MVVM是前端开发的概念：Model View VM(核心调度者的角色)

2.vue的基本代码结构：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5   <title>My first Vue app</title>
 6   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7 </head>
 8 
 9 <body>
10   <div id="app" @click="app_click">
11     {{ message }}
12   </div>
13 
14   <script>
15     var app = new Vue({
16       el: '#app',
17       data: {
18         message: 'Hello Vue!'
19       },
20       methods: {
21         app_click(e) {
22           console.log(e);
23         }
24       }
25     })
26   </script>
27 </body>
28 
29 </html>

3.插值表达式( 大胡子表达式 ) {{ msg }} 、 v-text 、v-html 、v-bind（简写为 ‘:’ ）、v-on （简写为'@’）、v-model 、v-for、v-if 、v-show

4.事件修饰符： .stop （阻止冒泡）、 .prevent（阻止默认事件）、.capture（捕获）、.self（自己身上执行）、.once（只执行一次）

　　el 指定要控制的区域

　　data 是个对象，指定了控制区域内用到的数据

　　methods 所有的方法在这里定义

6. 在vm实例中，如果要访问data上的数据，或者要访问methods 中的方法，必须带this ，this的指向就vm实例；

7.在 v-for中要会使用key的属性（只能接受String | Number）类型

8.v-model 只能应用于表单元素

9.vue中绑定样式两种方式

　　v-bind : class // 数组、数组中使用三元运算符、数组中嵌套对象、或者直接使用对象

　　v-bind ：style //直接在元素上使用内联样式、定义到data中，并直接引用到style中、通过数组引用多个data上的样式对象

10. v-if and v-show

　　v-if 有更高的切换消耗（动态创建元素）

　　v-show 有更高的初始渲染消耗（改变元素的样式）

　　结论：若需要有频繁切换用v-show ，若运行时条件不是经常变动，使用 v-if

B站学习的回顾总结

猜你喜欢