（一）Vue2基础知识，Vue入门

目录

一，基础知识

二，事件修饰符

三，按键修饰符：

四.表单域修饰符

一，基础知识

1.防止插值表达式(支持基本的运算) { {   } } 渲染时出现闪烁问题：v-cloak或v-text或v-html

2.v-text和v-html和v-pre区别：不识别标签；识别html标签；显示原始信息，跳过编译过程。

3.v-once只执行一次的插值[当数据改变时，插值处的内容不会继续更新即使data里面定义了msg 后期我们修改了，仍然显示的是第一次data里面存储的数据。

4.v-model数据双向绑定即-----当数据发生变化的时候，视图也就发生变化；当视图发生变化的时候，数据也会跟着同步变化。v-model是一个指令，限制在 `<input>、<select>、<textarea>、components中使用。

5.v-bind 单向数据绑定；也可以用来动态改变(处理)标签的属性。属性绑定，便于操作属性。

v-bind:value=" "简写成 :value=" "

6.v-bind和v-model的区别

v-bind:单向数据绑定，页面上的数据变化，vue中的数据也变化；
       vue中的数据变化，页面上数据也变化。

v-model:双向数据绑定：页面上的数据变化，vue中的数据不变化；
       vue中的数据变化，页面上数据也变化。

7.MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VMViewModel

           M：model    数据层Vue中数据层 都放在 data 里面.

           v ：view视图    Vue中 view即我们的HTML页面 

           vm（view-model）    控制器将数据和视图层建立联系     

           vm 即 Vue 的实例就是vm

8.v-on绑定事件，简写@，如v-on:click<===>@click

9.v-on事件中传入参数：

        （1）如果事件直接绑定函数名称fn，那么默认会传递事件对象作为事件函数的第一个参数。          （2）如果事件绑定函数调用fn(a,b,$event)，那么事件对象必须作为最后一个参数显示传递，事件对象的名称必须是$event.函数中fn(event),fn(a,b,event).

9.样式绑定class (1)对象表示法v-bind:class=’{active:isActive}’ active为css的类名，isActive的值在data中定义，值默认为true。(2)数组表示法 在data中以键值对的形式定义变量，变量值为css类名，v-bind:class=’[data中的变量]’       对象和数组结合使用[....{}]       默认的class会被保留

10.内联样式绑定

不用绑定显示的时候，style中样式之间用“;”分号分隔。绑定的时候用逗号“，”分隔。

         (1)v-bind:style=’{border:borderStyle}’ borderStyle样式在data中定义。                                             (2)v-bind:style=’objStyle’ 样式，以对象形式在data中定义                                               

        (3)v-bind:style=’[objStyle,objStyle2]’ 样式，以对象形式在data中定义     

11. v-show(是否显示，但是已经渲染) 和 v-if(是否渲染)的区别，两者可以实现同样的效果。

       （1） v-show本质就是标签display设置为none，控制隐藏（DOM元素已渲染），v-show只编译一次，后面其实就是控制css。

      （2）而v-if不停的销毁和创建，故v-show性能更好一点。v-if（属性为布尔值）是动态的向DOM树内添加或者删除DOM元素

12. v-for中key的作用：帮助vue区分不同元素，从而提高性能

(1)遍历数组:<li :key=’item.id’  v-for=’(item,index) in list’>{{item}}</li> 

(2)遍历对象:<li :key=’item.id’  v-if=’value==12’  v-for=’(value,key,index) in obj’>{{value+key+i}} </li>

 <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>  </div>

二，事件修饰符

1.事件修饰符：

示例：@click.stop="  "

         （1）阻止默认行为（页面重载）.prevent,如<a>标签跳转

        （2）阻止冒泡stop

        （3）.self 设置此修饰符后，只有直接点击才会触发

        （4）事件修饰符可以串联v-on:click.stop.prevent=”handle”.冒泡和默认行为均阻止。

        （5）.once  只触发一次

    （6）使用修饰符时，顺序很重要；不同书写顺序导致执行结果不同。如：用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.原生js：event.preventDefault()` 或 `event.stopPropagation()`

三，按键修饰符：

      示例：  @keyup.enter=’handle()’

      （1）  .tab => tab键

       （2） .delete (捕获“删除”和“退格”按键) =>  删除键

       （3） .esc => 取消键

       （4） .space =>  空格键

     （5）自定义：config.keyCodes例：Vue.config.keyCodes.f1 (自定义修饰符的名称)= 112(event对应的keycode);

四.表单域修饰符

（1）number：转化成数字；

（2）trim: 去除两侧空格 ；

（3）lazy：将input事件转化成change事件  (失去焦点触发)

示例：<input type=”text” v-model.number =’age’>