Vue-笔记(2)

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。

发布了76 篇原创文章 · 获赞 26 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/qq_29326717/article/details/93369555