1、 Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别
MVC --> 后端的分层开发概念;
MVVM --> 前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel。
2、指令、事件绑定、数据绑定
v-cloak --> 解决插值表达式闪烁的问题。
v-text --> 默认无闪烁问题,覆盖元素中原本的内容。
插值表达式 --> 替换自己的这个占位符,不会把 整个元素的内容清空。
v-bind --> 绑定属性,简写为 ":",即":要绑定的属性",v-bind 中可写合法的JS表达式。只能实现单向数据绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定。
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
v-on --> 事件绑定机制。
<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')">
v-model --> 只能运用在 表单元素中,可实现双向数据绑定。
input(radio, text, address, email....) select checkbox textarea
3、在 VM实例中,若要获取 data 上的数据或调用 methods 中的方法,必须通过 this.数据属性名 或 this.方法名 来进行访问,this表示VM 实例对象。
4、事件修饰符
<input type="button" value="戳他" @click.stop="btnHandler">
@click.stop --> 阻止冒泡
@click.prevent --> 阻止默认行为
@click.capture --> 实现捕获触发事件的机制
@click.self --> 实现只有点击当前元素时候,才会触发事件处理函数。只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为。
@click.once --> 只触发一次事件处理函数
5、样式
(1)直接传递一个数组,class 需用 v-bind 做数据绑定。
<h1 :class="['thin', 'italic']">...</h1>
(2)在数组中使用三元表达式。
<h1 :class="['thin', 'italic', flag?'active':'']">...</h1>
(3)在数组中使用 对象来代替三元表达式,提高代码的可读性。
<h1 :class="['thin', 'italic', {'active':flag} ]">...</h1>
(4)class 用 v-bind 绑定 对象时,对象的属性是类名, 属性的值 是一个标识符。
<h1 :class="classObj">...</h1>
(5)绑定到 style 中
<h1 :style="[ styleObj1, styleObj2 ]">...</h1>
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
6、循环
(1)循环普通数租
<p v-for="(item, i) in list">...</p>
(2)循环对象数组
<p v-for="(user, i) in list">...</p>
(3)循环对象
<p v-for="(val, key, i) in user">...</p>
(4)迭代数字
<p v-for="count in 10">...</p> <!-- count 值从 1 开始 -->
(5)关于 v-for 循环时的 key 属性
<p v-for="item in list" :key="item.id"> <input type="checkbox">XXXX </p>
注:v-for 循环的时候,key 属性只能使用 number获取string。
key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值
在组件中,使用v-for循环或一些特殊情况,若 v-for 有问题,则使用 v-for 的同时,指定唯一的 字符串/数字 类型 :key 值。
7、v-if、v-show
v-if --> 每次都会重新删除或创建元素,有较高的切换性能消耗。
v-show --> 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式,有较高的初始渲染消耗。
如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show。
如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if。