前端知识总结之Vue篇

1. vue有哪些特性?

• 双向数据绑定
• 组件化开发
• 数据驱动视图-修改数据-视图修改 不须要操做dom
• 使用MVVM开发思想

2. 双向数据绑定原理

• Vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法从新定义了对象获取属性值(get)和设置属性值(set)的操做来实现的.

3. vue选项

• el: 指定管理的视图区域,指定方式-->经过选择器或者dom对象,不能指定html/body标签做为视图

• data: 指定vm实例中的响应式数据,数据使用时必须提早在data中申明

• methods: 定义函数,提供给vm实例去使用,fn(){}推荐写法,不推荐使用箭头函数,函数中的this就是vm实例

• 在vm实例中,想要获取data上的数据,或者向调用methods中的方法,必须通过this.属性名 或者this.方法名来进行访问,this就是new出来的vm实例对象

4. vue经常使用的指令

• v-text/v-html
  • 以上两个指令都是替换元素内容,text是纯文本输出,html是格式内容的输出,v-html容易形成危险(XSS跨站脚本攻击)
• v-on
  • 绑定事件,语法:v-on:事件名.事件修饰符="fn()",v-on可简写为@,若是须要使用事件对象,固定的写法为@event
  • 事件修饰符:
    • prevent (阻止默认事件),
    • once(事件只触发一次),
    • stop(阻止冒泡),
    • capture(实现捕获触发事件的机制),
    • self(实现只有点击当前元素的时候,才会触发事件处理函数)
• v-for
  • 遍历数组和对象,在每一项数据追加一个属性:key="惟一标识",若是有ID使用ID,没有使用索引i
  • 数组语法 v-for=(item,i) in list
  • 对象语法 v-for=(v, k, i) in obj
• v-if/v-show
  • 切换元素的显示和隐藏
  • 区别: v-show是切换元素的display: none CSS属性,v-if是移除或者添加
  • 应用场景: v-if一次渲染的时候时使用,v-show频繁切换时使用
• v-model
  • 提供给表单元素进行数据双向绑定
  • 这是一个语法糖,原理经过v-bind绑定的input属性,监听input事件触发时,获取input的值再去修改data中的数据
• v-bind
  • 给任何属性绑定动态数据,可简写为 :
• v-bind之绑定class
  • 语法:class="数据",数据能够是数组,也能够是对象
  • 数组格式: ['类名','类名']添加 加一项,移除 去除这一项
  • 对象格式: {'类名':'布尔值'}false 表示移除,true表示添加
• v-bind之绑定style
  • 语法:style="数据",数据能够是数组,也能够是对象
  • 数组格式:[{css属性的键值对},{css属性的键值对}]
  • 对象格式:{css属性:css属性的值,...}
• v-cloak
  • 在视图未渲染以前隐藏插值表达式区域,当视图渲染完毕vue会去除v-cloak属性,视图显示(在使用vue绑定数据的时候,渲染页面时会出现变量闪烁问题,用v-cloak解决)
  • 设置css样式: [v-cloak]{display: none}
• v-once
  • 使用该指令的元素只会渲染一次

5. v-on能够监听多个方法么?

• 能够监听多个方法,可是同一种事件类型的方法,只能够监听一次,不然会报错

6.Vue组件中的data为何必须是函数?

• 由于一个组件是能够共享的,但他们的data是私有的,因此每一个组件都要return一个新的data对象,返回惟一的对象,不要和其余组件共用一个对象.