1. vue有哪些特性?

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

2. 双向数据绑定原理

Vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的.
当你访问对象属性的时候,会自动触发get方法,设置时触发set方法,把data中的所有属性通过Object.defineProperty()进行遍历,对属性进行加工处理,页面到数据使用事件绑定v-on,数据到页面使用数据绑定v-bind.

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对象,返回唯一的对象,不要和其他组件共用一个对象.