vue零碎记忆

Vue 零碎总结

1:什么事Vue?

Vue是一个渐进式的框架(可以一步一步的,有阶段性的使用vue,js,不必在开始就使用所有的设备)

2:Vue的特点?

* 解耦数据与视图
* 组件复用
* 前端路由
* 状态管理
* 虚拟DOM     

3:比较传统?

万金油操作: jQuery + RequireJS(SeaJS) + artTemplate(doT) + Gulp(Grunt)
现在: 出现了React、 Angular 目的是为了满足使用心得开发需求,像单页面富应用, 提升开发效率,降低维护成本,组件解耦。 

4: Vue的实例数据?

    存储在实例方然data选项中,所有应用到的数据都会预先在data内生命,用来保证不至于将数据散落在业务逻辑中。

5:Vue的生命周期?

created: 在实例创建完成后调用,此阶段主要是完成数据的观测,但是还没有挂载,$el还不能使用,需要初始化处理一些数据时会比较有用。
mounted: el已经挂载到实例上使用了,一般我们的第一个业务逻辑会在这里使用。
beforeDestory: 实例销毁之前调用, 主要解绑一些使用addEventListener监听的事件等。

{{date}}



注意: link的内容会被渲染成一个具体的点击功能的a标签,而不是一个纯文本, 如果将用户产生的内容使用v-html直接输出,有可能出现XSS攻击(跨站脚本攻击)

        在vue中只支持{{}}插值或者尾部添加一个管道符号| 不支持语句和流程控制,在表达式中,不能使用用户自定义的全局变量, 只能使用Vue白名单内的全局变               量,例如Math,Date

6:关键字
v-pre [如果想显示{{}}标签, 而不进行替换, 使用v-pre即可跳过这个元素和它的子元素的编译过程】

          实例:{{ 这里的内容是不会被编译的 }}
v-cloak[解决初始化慢导致页面闪动的最佳实践]
            [它不需要表达式, 它会在Vue实例结束编译的时候从绑定的HTML元素上面移除,经常与CSS的display:none联合使用。]
v-once [作用是定义它的元素或者组件值渲染一次, 包括元素或者组件的所有子集]
            [首次渲染后,不再随着数据的变化而重新渲染,将被视为静态内容,不随数据的变化重新渲染被视为静态数据]
v-if  v-else-if  v-else  [主要用于条件渲染]
v-show [主要用于条件渲染][简单的CSS属性切换]
            注意: v-show只是简单地CSS属性切换, 无论条件是否是真与否, 都会被编译, 相比之下, v-if更适合条件不经常改变的场景,因为它的切换开销相对
             较大, 而v-show适应于频繁切换条件。 
v-for [数据遍历【迭代数组、迭代对象、迭代一个整数等】]

{{message}}


[v-cloak] {

display: none

}

7: 过滤器
用法: 支持在{{}}插值的尾部添加一个管道符 " | "

{{ date | formDate }}



过滤器还可以串联, 而且可以接收参数,例如:
{{message | filterA | filterB}}
过滤器还可以接受参数【这里的字符串arg1和arg2将分别传给过滤器的第二个和第三个参数,因为第一个参数是数据本身】
{{message | filterA('arg1', 'arg2')}}
8: 计算属性

每一个计算属性都包含一个getter和setter通常情况下,我们只会用默认的getter方法来读取一个计算属性。


{{reversedText}}



计算属性是给予它的依赖缓存的,一个计算属性所依赖的数据发生的时候他会重新取值。
9:数据绑定

9.1: class绑定【对象绑定,数组绑定】
    



注意: 如果直接在定义的组件上使用class或者:class,样式规则会直接应用到这个组件的根元素上面
10: 数据监测?

数组监测:
        Vue监测数组的变化的时候,,并不是直接重新渲染整个列表,而是最大化的复用DOM元素,替换的数组中,含有相同元素的项是不会被重新渲染, 因此
        可以大胆的用新数组替换旧数组。

app.books = app.books.filter((item) => {

return item.name.match(/javascript/);

})
11: 事件与修饰符?

* .stop
* .prevent
* .capture
* .self
* .once

阻止事件冒泡

提交事件不再重复加载

修饰符串联

添加事件监听器使用事件捕获模式

...
只有事件在元素本身(而不是子元素)触发时出发回调

...
只是触发一次,组件同样适用


事件修饰符【可以使用按键修饰符】


@keyup.enter
@keyup.tab
...
@keyup. delete/esc/space/up/down/left/right

可以自己配置具体按键
Vue.config.keyCodes.f1 = f12
可以配合鼠标按键

@click.ctrl alt/shift/meta......
12: v-model双向数据绑定

v-mode绑定的数据,用中文输入法输入中文,一般在没有选定词前也就是在拼音阶段Vue是不会数据更新的,在敲下汉字的时候才会更新
             [如果是实时更新可以使用@input]
v-model可以使用一些修饰符:
              1: v-model.lazy  [.lazy会转换为在change事件中同步]
              2: v-model.number [.number会将输入转换为Number类型,否则虽然你输入的是数字,但它的数据类型是String]
              3: v-model.trim [.trim可以自动过滤输入的首位空格]

单选【v-model与value配合使用】






当前选择的项是: {{[picked}}


注意: 数据picked的值与value值是一样的时候才会被选中。

多选[v-mode与value配合使用]






当前选择的项是: {{[checked }}



下拉菜单 [v-model与value配合使用]


选择的项是:{{ selected }}


你可能感兴趣的:(vue.js)