vue基础知识学习

1、 事件和属性

1. 事件

1.1 事件简写

v-on:click="" 简写为 @click=""

1.2 事件对象$event

包含事件相关信息，如事件源（target）、事件类型（type）、偏移量（offsetx）

1.3键盘事件

回车：@keydown.13 或@keydown.enter

上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，能够自定义键盘事件，也称为自定义键码或自定义键位别名

1.3 事件修饰符

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

2. 属性

2.1 属性绑定和属性的简写

v-bind 用于属性绑定， v-bind:属性="" 简写成 v-bind:src="" 简写为 :src=""

2、 模板

1. 简介

Vue.js使用基于HTML的模板语法，能够将DOM绑定到Vue实例中的数据 模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法

2. 数据绑定的方式

a.双向绑定

v-model

b.单向绑定

方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可使用v-cloak解决

方式2：使用v-text、v-html

3. 其余指令

v-once 数据只绑定一次

v-pre 不编译，直接原样显示

3、 过滤器

1. 简介

用来过滤模型数据，在显示以前进行数据处理和筛选 语法：{{ data | filter1(参数) | filter2(参数)}}

2. 关于内置过滤器

vue1.0中内置许多过滤器，如：

currency、uppercase、lowercase
limitBy
orderBy
filterBy

vue2.0中已经删除了全部内置过滤器，所有被废除,如何解决：

a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等

b.使用自定义过滤器

3. 自定义过滤器

分类：全局过滤器、局部过滤器

3.l 自定义全局过滤器

使用全局方法Vue.filter(过滤器ID,过滤器函数)

3.2自定义局部过滤器

4、 发送AJAX请求

1. 简介

vue自己不支持发送AJAX请求，须要使用vue-resource、axios等插件实现 axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时再也不对vue-resource进行更新和维护

参考：GitHub上搜索axios，查看API文档

2. 使用axios发送AJAX请求

2.1 安装axios并引入

npm install axios -S

也可直接下载axios.min.js文件

2.2 基本用法

axios([options])
axios.get(url[,options]);

传参方式：
    1.经过url传参
    2.经过params选项传参
    axios.post(url,data,[options]);
    axios默认发送数据时，数据格式是Request Payload，并不是咱们经常使用的Form Data格式，
因此参数必需要以键值对形式传递，不能以json形式传参
传参方式：
    1.本身拼接为键值对
    2.使用transformRequest，在请求发送前将请求数据进行转换
    3.若是使用模块化开发，可使用qs模块进行转换

axios自己并不支持发送跨域的请求，没有提供相应的API，做者也暂没计划在axios添加支持发送跨域请求，因此只能使用第三方库

3. 使用vue-resource发送跨域请求

3.1 安装vue-resource并引入

cnpm install vue-resource -S

3.2 基本用法

使用this.$http发送请求

this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])

5、Vue生命周期

vue实例从建立到销毁的过程，称为生命周期，共有八个阶段

6、计算属性

1. 基本用法

计算属性也是用来存储数据，但具备如下几个特色：

a.数据能够进行逻辑处理操做

b.对计算属性中的数据进行监视

2.计算属性 vs 方法

将计算属性的get函数定义为一个方法也能够实现相似的功能

区别：

a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化

b.计算属性是缓存的，只要相关依赖没有改变，屡次访问计算属性获得的值是以前缓存的计算结果，不会屡次执行

3. get和set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性 默认只有get，若是须要set，要本身添加

7、 vue实例的属性和方法

1. 属性

vm.$el

vm.$data

vm.$options

vm.$refs

2. 方法

vm.$mount()

vm.$destroy()

vm.$nextTick(callback)

vm.$set(object,key,value)

vm.$delete(object,key)

vm.$watch(data,callback[,options])

8、自定义指令

分类：全局指令、局部指令

1. 自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)

2. 自定义局部指令

9、过渡(动画)

1. 简介

Vue 在插入、更新或者移除 DOM 时，提供多种不一样方式的应用过渡效果 本质上仍是使用CSS3动画：transition、animation

2. 基本用法

使用transition组件，将要执行动画的元素包含在该组件内

<transition>
    运动的元素
</transition>

过滤的CSS类名：6个

3. 钩子函数

8个

4. 结合第三方动画库animate..css一块儿使用

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight"> <p v-show="flag">网博</p> </transition>

5. 多元素动画

<transition-group>