视频地址 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(只执行一次)
5.
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