vue浅析随笔

Evernote Export

MVVM

不须要经过控制器更新视图，而是经过双向绑定，VM作的是进行的处理调度

 

M   modular 数据

VM   调度者

V  dom结构

 

MVC 和MVVM之间的区别：MVC数据流通是单向的，数据须要控制器进行处理分配

                                            MVVM数据流通是双向的，数据不只过VM进行逻辑处理也能够更新视图

 

指令

 

v-text
v-html
v-bind:title="msg" 简写 :title="msg"	绑定标签属性，使属性中能够嵌入js代码     用法：经过类来切换状态 :class="[aa,bb,cc,{aa}]"	简写：
v-on:click="show" 简写： @click
插入符 {{}}	存在网速加载闪烁的状况 配合 v-cloak使用
@input	输入框输入触发，实时触发，中文也能够
v-model	v-model能够实现数据双向绑定，只能运用在表单元素中，能够运用在多选
v-for	<tr v-for ="item in sech(keywoed)" : key ="item.id">
v-if	true的时候会建立渲染元素 false的时候会从dom结构中删除   很耗性能，少用
v-show	false的时候会使元素隐藏   display：none

 

事件修饰符，

能够连写

 

@click.stop=""	阻止冒泡，整个冒泡都不会发生
@click.prevent	阻止浏览器默认行为
@click.capture	捕获机制
@click.self	实现只有点击当前元素才会触发该事件ai，只会阻止自身冒泡行为
@click.prevent.one	只触发一次事件
@keyup.enter   @keyup.13	按enter键的时候触发
@keyup.up	按上键触发
@keyup.left	←
@keyup.right	→
@keyup.down	下

 

new Vue中的this

 

 

 

 

简易计算器代码

 

 

 

过滤器

filters

- `过滤器`:对须要展现的数据进行加工处理后再展现到界面，并不会改变原数据

 

```

Vue.filter('过滤器名称',function(value,arg){

    // value就是须要处理的原始数据

    // 对数据处理的业务逻辑

    return 处理完毕的数据

})

使用方法：原始数据 | 过滤器名称(123)

<th class="" v-text="item.crtime |fiTime"></th>

 

过滤器能够传参，能够串联使用过滤器

### 过滤器只能用在插值符和v-bind 中 ，2.0版本用在其余指令中会报错

 

 

 

 

 

 

 

 

 

自定义指令

 

- `指令`: 其实就是Vue给咱们提供的操做DOM元素的一些方法

 

```

全局写法：

Vue.directive('指令名称',{

    // 指令第一次绑定到元素身上时执行(在内存中绑定到了DOM对象上边)

    bind:function(el,binding,VNode){

        // el: 指令所在的DOM元素对象

        // binging.value 指令等号右边表达式的值

        // binging.expression 指令等号右边表达式

        // VNode.context 当前指令所在托管区域对于的Vue实例对象

    },

    // 当前指令所在元素插入到父节点时调用(不保证DOM已经渲染完毕)

    inserted:function(){},

    // 指令绑定的值发生变化时会去执行

    update:function(){},

    // 指令所在的组件值更新完毕时调用

    componentUpdated:function(){},

    // 自定义指令从当前元素解绑时调用

    unbind:function(){}

})

 

简易写法：当该指令只须要bind和inserted钩子函数，且两个函数作一样的事情的时候可用

directives: {

ref:function (le,binding) { }

}

生命周期函数

 

beforeCreate：   --在元素未建立以前，在实例未建立完成前就调用

created：     实例化完成后被执行

 

 

beforemounte：dom在内存中渲染完成

mounted：  真实dom元素已完成

 

//

beforeUpdate：当data数据在内存中发生改变时

updated ：date中的数据发生改变，而且在界面上发生改变时

 

## [vue实例的生命周期]( https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)

+ 什么是生命周期：从Vue实例建立、运行、到销毁期间，老是伴随着各类各样的事件，这些事件，统称为生命周期！

+ [生命周期钩子]( https://cn.vuejs.org/v2/api/#选项-生命周期钩子)：就是生命周期事件的别名而已；

+ 生命周期钩子 = 生命周期函数 = 生命周期事件

+ 主要的生命周期函数分类：

- 建立期间的生命周期函数：

      + beforeCreate：实例刚在内存中被建立出来，此时，尚未初始化好 data 和 methods 属性

      + created：实例已经在内存中建立OK，此时 data 和 methods 已经建立OK，此时尚未开始 编译模板

      + beforeMount：此时已经完成了模板的编译，可是尚未挂载到页面中

      + mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

- 运行期间的生命周期函数：

    + beforeUpdate：状态更新以前执行此函数， 此时 data 中的状态值是最新的，可是界面上显示的 数据仍是旧的，由于此时尚未开始从新渲染DOM节点

    + updated：实例更新完毕以后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被从新渲染好了！

- 销毁期间的生命周期函数：

    + beforeDestroy：实例销毁以前调用。在这一步，实例仍然彻底可用。

    + destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

 

vue-resource 

 

get	getInfo() { // get 方式获取数据   this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {     console.log(res.body);   }) }
post	postInfo() {   var url = 'http://127.0.0.1:88{{99/api/post';   // post 方法接收三个参数：   // 参数1： 要请求的URL地址   // 参数2： 要发送的数据对象   // 参数3： 指定post提交的编码类型为 application/x- www-form-urlencoded   this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {     console.log(res.body);   }); }
jsonp	jsonpInfo() { // JSONP形式从服务器获取数据   var url = 'http://127.0.0.1:8899/api/jsonp';   this.$http.jsonp(url).then(res => {     console.log(res.body);   }); }
经过全局配置根路径	Vue.http.options.root = "http://fdsf.io/";   配置过根路径后，请求的路径前面不能加“/”，不然报错
配置全局post请求，编码类型	Vue.http.options.emulateJSON = true;

 

 

 

动画

 

三种定义动画方式不能混用，不然控制权会混淆，形成冲突形成没法正常运行

 

 

 

1.自定义

 

其余元素leave后，实现后面的元素移动的时候实现过渡效果

 

 

 

 

2.使用animate.css类库

<div id="app">

     <input type="button" value="发起请求" @click="getreq" >

    <input type="button" value="法方式" @click="flag=!flag">

    <transition name="" mode="" enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="600">

    <h3 v-show="flag">动画发士大夫</h3>

    </transition>

</div>

 

 

 

3.动画钩子函数

 

### 使用动画钩子函数

1. 定义 transition 组件以及三个钩子函数：

```

<div id="app">

    <input type="button" value="切换动画" @click="isshow = !isshow">

    <transition

    @before-enter="beforeEnter"

    @enter="enter"

    @after-enter="afterEnter">

      <div v-if="isshow" class="show">OK</div>

    </transition>

  </div>

```

2. 定义三个 methods 钩子方法：  

```

methods: {

        beforeEnter(el) { // 动画进入以前的回调

          el.style.transform = 'translateX(500px)';

        },

        enter(el, done) { // 动画进入完成时候的回调

          el.offsetWidth;   // 触发offsetWidth的get方法，這个方法会使界面进行重绘，保证过渡动画可以实时呈现

          el.style.transform = 'translateX(0px)';

          done();   // 当即执行后面周期的函数

        },

        afterEnter(el) { // 动画进入完成以后的回调

          this.isshow = !this.isshow;

        }

      }

```

 

1.钩子函数半场动画执行函数时机：元素从显现到隐藏触发出场函数                                                       元素从隐藏到显现触发入口函数

2.当入场函数和离场动画都须要定义的时候：                                            不须要定义动画操做的钩子函数不要写出来，不然会覆盖默认行为，致使动画没法正常运行                                            同时存在的话不能定义afterEnter函数，也不能定义“done();   // 当即执行后面周期的函数”，不然会改变更画执行

 

 

 

 

 

 

 

组件化

，以不一样的组件来划分不一样的功能模块

 

 

模块化是从代码逻辑的角度去划分的，//通常方便后端代码分层开发，保证功能单一

组件化时从UI界面的角度进行划分   //方便ui功能复用

 

1.组件命名若是为驼峰命名法，则须要在引用使用的时候以小写写出，并以-杠链接

2.template属性的根元素必须且只能惟一

1.

2.简写

3.经过template标签来定义模板结构，方便书写

 

 

 

一个和组件至关于一个vue实例

其中的data属性为函数，data里面的数据用return出来，组件定义的data数据，只能在组件中使用

组件的嵌套

 

 

父向子传值

经过v-bind在子组件上绑定自定义属性传递，在子组件中在属性数组props中获取

父向子传递方法

经过在子组件上用v-on绑定自定义事件传递，在子组件中经过事件触发执行this.$emit("绑定的事件名"，实参1，实参2)

 

 

子向父传值

经过父向子传递方法的原理，触发函数能够传递参数，经过把子组件的数据经过实参传递过去

 

 

ref   获取元素，用来操做元素

 

 

 

 

路由

vue-router.js

 

能够加动画

 

 

 

 

路由传参1.

2.

 

 

 

路由嵌套

 

 

命名视图，视图加name属性，路由的components

 

watch

监听data中的数据变化，一旦数据发生改变就会触发watch中定义的同名函数

监听路由的变化

‘$route.path’路由对象    变化

 

 

计算属性

computed

属性数据的依赖项数据一旦发生改变，属性数据随之发生改变

dom存在多个计算属性，属性函数只会触发一次，获得的数据保存在缓存中，后面的直接引用