站在月亮上Da ...

Vue常用的指令

v-text ：主要用来更新 textContent，可以等同于 JS的innerText属性。

v-html : 输出真正的HTML v-html="变量" （它等同于JS的innerHtml属性）

v-if , v-else , v-else-if ：判断

条件为真渲染 dom节点

条件为假则不渲染dom节点

v-for : 循环

v-for=”value in array”

v-for=”(value,index) in array”

v-model : 创建双向数据绑定（用于表单元素上）

v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

v-show :

条件为真显示有dom

条件为假隐藏有dom style:"dispaly:nond"

v-bind : v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等简写为：

:class=' ' / : style=' ' / :src=' ' / :属性名=' '

v-once ：能执行一次性地插值，当数据改变时，插值处的内容不会更新。

v-on : 事件名

列：v-on:click=”事件名(参数)” 简写：@click=”事件名(参数)”

Vue常用修饰符

事件修饰符 . . .

              .stop   : 阻止点击事件冒泡

                .prerent : 防止执行预设行为

              .capture : 阻止捕获事件

              .selt         : 只出发自己范围时间不包含子元素

              .once : 只执行一次

  键盘修饰符 . . .

up     上

              .down   下

              .left   左

         .right 右

              .esc    退出

                .enter 回车

                .tab    制表符

                .space 空格

    v-model 修饰符 . . .

               v-model.lazy   使用 change 事件进行同步(按下回车)

               number 自动将用户的输入值转为数值类型

                trim   自动过滤用户输入的首尾白字符

v-on可以监听多个方法吗？

v-on 是可以监听多个方法的

列 :

同一事件 . . .

< button v-on:click = ' one( ) , two( ) ' /> 我是按钮

不同事件 . . .

< button v-on:click = ' { click : one , mouserover : two } ' /> 我是按钮

< button v-on:click = ' one( ) ' v-on:mouserover = ' two( ) ' /> 我是按钮

vue中key值的作用

v-for需要key给每一个节点, 做一个唯一的标识符 , ( 他就能根据key值去判断某个是否修改，重新渲染这一项 ) ( 会牵扯到 diff 算法 )

虚拟 dom 的 diff 算法

a.两个相同的组件产生类似的dom结构，不同的组件产生不同的dom结构

b.同一层级的一组节点，可以通过唯一的id进行区分（在v-for 的 key 不就是唯一 id嘛~）

c.当一层有很多相似的节点的时候，也就是列表节点时，diff算法的更新过程会默认遵循寻以上规则

Vue组件中的data为什么必须是函数

为什么呢？这是因为每一个Vue 组件都是一个实列 , 通过 new Vue ，实例化引用用一个对象，假如data 是对象的化，那么一旦修改某一组件的数据，那么其他组件相同数组也就会随着改变。所以必须是函数，是函数的话，那么Vue组件的data 它都将拥有一个属于自己的作用域，互不干扰 . . .

前端面试题 (三) :