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(
实现只有点击当前元素的时候,才会触发事件处理函数)
- prevent (
- 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对象,返回唯一的对象,不要和其他组件共用一个对象.
转载于:https://juejin.im/post/5cffb4416fb9a07ee742d66b