整理vue学习笔记

1.vue简介，vue是一个构建用户界面的框架。是一个轻量级mvv框架，和angular一样是所谓的双向数据绑定，数据驱动和组件化的前端开发，通过简单的api

实现响应式的数据绑定和组合试图组件，容易上手，小巧。

2.安装vue-devtools插件，便于在chrome中调试vue，配置是否允许vue-devtools检查代码，方便调试，生产环境设置为false，vue.config.devtools = false;

vue.config.productionTip=false;阻止启动生产消息。

3.常用指令。

v-model 双向数据绑定，一般用于表单元素。

v-for 对数组或对象进行循环操作，使用是v-for 不是v-repeat 

v-on 用来绑定时间，用法：v-on :时间 = ‘函数’

v-show/v-if 用来显示或隐藏元素，v-show 是通过display实现，v-if 是每次删除后在创建

4.事件和属性

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

$event 事件对象，里面包括事件相关信息，如事件源，时间类型，偏移量等

事件冒泡，原生js方式，依赖于事件对象，vue方式，不依赖于事件对象，@click.stop 来阻止事件冒泡；

键盘事件：@keydown.13 或keydown.enter  

事件修饰符  .stop  调用event.stopPropagation();

v-bind 用于属性绑定,用法 v-bind:属性=“”   举例 v-bind:src="" 简写  ：src=""

5。模板

vue.js 使用基于html的模板语法，将dom绑定到vue实例中的数据模板就是{{}}  用来进行绑定数据显示在页面中

双向绑定  v-model 

单项绑定  {{}} 可能会出现闪烁问题， 也可以使用v-text  v-html

其他指令  v-once 数据绑定一次  v-pre 不变异，直接原样显示

6.过滤器

用来过滤模型数据，在显示之前进行数据对的处理和筛选

语法： {{data | filter（参数） |filter（参数）}}

内置过滤器，2.0之后都删掉，如果使用可以借助第三方库  如lodash data-fns 日期格式化 accounting.js 货币格式化以及自定义

7.发送ajax请求

vue本身不支持发送ajax请求，需要使用vue-resourc axios等插件实现，建议使用axios

axios是一个基于promise的http请求客户端，用来发送请求

基本用法：

axios.get(url[,options]);  传参方式，url或者params传参

axios.post(url,data,[options]);

注意：axios默认发送数据时，数据格式是request payload，并非我们床用的form data格式，所以参数必须要以键值对像是传递

，不能以json形式传参

传参的方式： 自己拼接键值对，使用transformrequst 在请求发送前将请求数据进行转换，或者使用qs模块进行转换

axios不支持跨域请求，可以使用vue-resource 发送跨域请求。

跨域发送请求： this.$http.get(url,[options]);    this.$http.post(url,[options]);

8.vue生命周期

vue实例从创建到销毁过程成为生命周期

9。计算属性

计算属性也是用来存储数据，具有这俩个特点：数据可以进行逻辑处理操作，对计算属性中的数据进行监视。

10.vue实例属性和方法

属性 vm.$el  vm.$data vm.$options vm.$refs

方法 vm.$mount()  vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm.$watch(data,callback)

11,自定义指令

自定义全局指令   vue.directive （指令id，定义对象）

12.过度（动画）

vue在插入更新或一处dom时，提供多种不同方式应用过程，本质还是使用css动画，

基本用法： 使用transition组件，将要执行动画的元素保函在改组件内

结合第三方动画库  animater.css 一起使用

 
       

显示内容

     

13.组件

组件是vue最强大的功能之一，组件可狂战html元素，封装重用代码，组件是自定义元素对象。

定义组件方式，a>先创建组件构造器，然后由组件构造器创建组件。b>直接创建

引用模板讲组件内容放在模板