vue的学习(常用功能

1、介绍vue

MVP和MVVM模式！！！

mvp模式，其中m是模型是ajax请求数据， v是视图层（html），p是控制器，就是使用jq来实现业务逻辑相关操作(DOM操作很多)

MVVM模式，其中M是new实例里面相关操作，v是视图层，vm即vue自己进行操作转化！

首先使用vue（mvvm模式）可以通过两种方式，

第一种：是直接通过引入vue.js的形式，那么这时候的vue直接写在<script></script>里面，这时候的vue是全局注册作为全局变量！我们进行全局注册组件的时候，可以直接引用，如果是进行

<div id="app">
  {{ message }}     =======》》》》V层
   <todo-item></todo-item>
</div>

<script>
//vue中全局注册组件
Vue.component("TodoItem",{
   props:['content'],
   template:"<li>{{content}}</li>",

})

//vue全局实例化

var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'，  =======》》》》M层
      content:"测试全局组件"

    }，
    method：{

    }
})

</script>

2、vue的实例化

3、vue中的基本语法
计算属性（computed）、方法（methods）、事件监听（watch）
computed属性，会有一个缓存机制，计算页面重新加载，只要计算的属性没有发生改变，就不会重复执行computed，而方法methods中，只要页面有重新加载就会被重复执行，
对于监听事件（watch），需要监听的属性有发生变化时才会执行！！也既有缓存机制，但是相比代码量会比computed多！！

computed中的get和set函数！！！

类名跟样式表达式

：class=“{active：isActive}” 这时候，是通过isActive来控制active类名是否要显示

：class=“[actived]” 这个时候activde的值是通过data里面的值来控制的

样式表达式

：style=“styleObejt”  styleObject的值是通过data来赋值==》styleObject：{color：#fff；}

key值标识唯一性

vue虚拟dom中，会有自带缓存复用机制，如果它检测到页面上相同的东西没有发生变化，它就会进行有效的复用！

例如：用户名的时候input的输入值是小明，当你把用户名切换为密码是，input上的值还是小明，这是因为input被复用了

当给下面的两个input加key值，那么这时候input中的元素就不会被有效地复用！

v-for指令

使用该指令的时候，设置key值是不要使用index来赋值，而是使用后端提供的id，这样可以保证唯一性跟提高性能

数组操作

在vue中，对数值进行时不能直接通过下标来增加（删除）数组，通过这种方式增加数组（删除），数据上是变了，但是页面上不会变。

例如list[4]={“id”:4,name:”55″}这时候页面上的list元素还是只有三个！

在vue中如果想操作数组的同时，页面跟着变化。有两种方法。

第一种是使用数组中的7种编译方法来操作数组

 第二种是直接改变list数据的指定空间来改变

 在列表渲染中使用包裹占位符template，来包裹需要循环的列表，这时候template不会被页面渲染出来！！

对象操作

第一点：遍历对象的时候，直接往对象里面加值，这时候页面也是没有跟着变的，同样可以改变对象的引用==》数据指向新的引用对象

第二点：用vue中的set方法方法来改变对象（第一个参数是key，第二个参数是name）和数组（第一个参数是下标，第二个参数是对应的值）

对象：

 

使用vue实例化方法的$set方法！！！！第一个是key，第二个参数是name

 3、组件的使用

第一点：全局组件跟局部组件，和子组件与父组件之间的传值

第二点：使用组件时的一些小细节用法

知识点1：使用table的时候，使用组件会有一个小bug，在渲染的时候table标签下面只能是<tbody></tbody>下面只能是<tr></tr>,所以要是直接用<row>组件，在页面渲染出来的<tr>标签会出现在table外面！这时候在<tr>标签上是使用is=“row”进行组件渲染符合H5规范，同样的ul li标签也适应

知识点2：在组件中使用data，当在跟组件中使用data的时候，data可以是一个对象的形式，因为在根组件中，数据只被调取一次，而在子组件中，数据有可能被调用多次，

这时候，不能data只能用函数，为每个数据都存储不同的空间。

Vue.component("row",{
       data:function(){
               return {
                       content:'this is content'
               }
       }， //在子组件中data必须以函数的形式并且以return的方式返回数据
       template:'<tr><td>{{content}}</td></tr>'
})


var vm = new Vue({
      el:"#app",
      data:{}  //在根组件中是允许以对象的形式这样写的
})

知识点3：

 在vue中，如果遇到复杂的操作需要使用dom操作时，可以使用$refs引用属性来获取dom元素

<div ref=”hello”>测试下ref</div>    ===>>>>alert(this.$refs.hello.innerHTML)  //测试下ref

在组件中使用ref来引用不同的子组件，这是ref指向的是这个组件

知识点4：父子组件传值

父组件向子组件传值都是通过属性的形式传值的（但是页面渲染的时候，属性没有渲染出来）

<counter  count=”0″></counter>  //传值的时候，如果count前面没有加“  ： ” 号，那么这时候传的0是字符串类型

<counter  :count=”0″></counter>  //传值的时候，如果count前面有加“  ： ” 号，那么这时候双引号里面的值是一个js表达式，这时候count传0的是一个数字类型

单项数据流，子组件只能使用父组件传过来的值，而不能直接对该属性值进行直接改变，如果真的要改变，可以在子组件的data里另取一个变量进行赋值修改

 父组件向子组件传count值 

 子组件接收到后count值后，还需要对count的值进行，修改，这时候把count值赋予新变量number，然后在子组件的data里面对number进行修改

知识点5：组件参数验证，在子组件接收父组件传过来的时，props可以对这些值进行一些校验，除了使用自带的基本校验方式，我们还可以自定义validator进行自定义校验！！！

注意：当用props属性接收的时候，改属性不会被渲染出来，如果是没有用props属性接收，那么就是非props属性，

这时候页面会报错，子组件没办法用到content的值，而且这时候子组件渲染成<div content=”hell”></div> content变成了子组件的自定义属性。

知识点6：给组件绑定原生事件

给组件绑定的事件都是自定义事件，这种事件只能从过子组件来触发，如果想直接触发原生事件可以在事件中加native！！

知识点7：非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）

Vue.prototype.bus = new Vue()   ====>>>>表示把bus属性挂载在vue是，这样每个有用到VUE实例的地方都有bus属性，而bus属性又是一个new vue实例，所以也拥有vue的相关属性！！！

触发方：this.bus.$emit=(‘change’,this.content)

接收方：this.bus.$on=(‘change’,function(msg){

})

知识点8：插槽（slot）

父组件向子组件优雅传dom值，使用插槽slot，当子组件中使用插槽slot时，父组件要是有传值，那么solt上的默认值，就不会被显示出来，插槽直接渲染父组件传过来的值，如果没有，默认值就会被显示！

没有给slot取名字的话，slot默认就是父组件插入的所有内容。取名字的话就会对应名字插件进去

 

知识点9：动态组件切换（v-once）

应用场景，例如我们想要通过点击一个按钮，实现不同组件的切换，这时候，我们可以使用两种方法来实现，一种是使用componet的is属性，一种是通过v-if，当我们使用v-if进行组件切换时，会对另一个组件进行销毁，然后切换到的时候再进行创建，但是对于频繁需要切换的静态组件很好耗性能，我们可以加v-once，当这个v-once组件被第一次切换的时候，就会被存在内存里面，第二次使用的时候，就会被拿出来，在使用静态页组件切换时使用可以提高性能！！！

总结父组件跟子组件之间的相互通讯

<v-select :selectType=”selectType”></v-select>
父组件传值给子组件

export default {
      data (){
         return {
             selectType:true;
         }
     }

}

子组件通过props的方式从父级接收数据：

props:{
     selectType:{
           type:Boolean,
           default(){
               return false;
           }

     }

}

在父级中：title是在子级中要用的名字，如果fff前面有：那么后面的tit就是个变量，在data中要去定义。如果没有那么就是普通字符串。

<header :title=”tit”>

子组件传值给父组件

子组件：<div class=”sureBtn” @click=”suremit”></div>

method:{

       suremit:function(){

              this.$emit(‘addShop’,this.select,this.num);

       }     

}

父组件：

<v-select @addShop=”sureAddShop”></v-select>

method:{

       sureAddShop:function(key,num){}    

}

 4、vue中css的动画

知识点1：动画原理

首先，为需要动画的标签外层加一个<transition name=“fade”></transition>,然后可以给其设置一个名字，如果没有设置名字，默认是V

显示的状态流程，默认第一帧是fade-enter，然后下一帧的时候fade-enter就会被销毁，然后fade-enter-active是从第一帧开始就存在，知道结束才销毁，所以可以用该属性监听某个属性的变化，从而使用transition进行动画过度效果

隐藏状态流程，默认第一帧是fade-leave（动画第一瞬间就存在，所以从显示到隐藏状态这个转态就已经有了），下一帧fade-leave销毁，fade-leave-to创建，而fade-leave-active从开始到结束一直存在

知识点2：使用@keyframes（css3动画）和为动画自定义命名

自定义命名 enter-active-class=“active” ！！！

知识点3：animate动画库

 

我们现在的应用场景是点击按钮的时候，动画才会执行，如果想页面一加载就有动画效果，我们可以给transition增加appear属性并且设置appear-active-class=“animated swing”

知识点4：使用animated动画库跟自定义动画并且设置动画时长

type=”transition”来指定动画时长是以哪个动画为准，这边指的是以transition动画时长为准！也可以通过设置：duration来设置自定义时间

 4、vue中js的动画与velocity.js结合

通过js来写动画效果

 

velocity.js实现动画

知识点5：多元素和多组件的切换(状态过度Tween.js)

多元素的切换，使用mode设置多个元素过度（组件）效果，设置key解除缓存效果，出现动画效果

当多个元素是用v-for循环出来的时候，可以使用<transition-group></transition-group>来包裹v-for循环元素！！！

动画封装

<fade  :show=”show”></fade>

 6、去哪儿项目实战

知识点1：单页应用跟多页应用

多页应用：页面的切换是通过请求不同的html页面，首页加载比较快，利于seo，缺点是切换页面比较慢！

单页应用：页面之前的切换是通过js来控制渲染，始终都是在同一个页面，优点是不同页面之间切换速度快，缺点是首页加载比较慢，不利于seo优化！！！

知识点2：路径引用问题(webpack.base.config.js)

在vue中@符号表示的是src目录下的文件

 我们可以在webpack.base.config.js下面进行路径配置 ，在’styles’: resolve(‘src/assets/styles’),设置完，需要重启服务器

知识点3：static文件夹的用法

static文件下的东西是用来放静态的东西，是vue中唯一一个不需要打包编译就可以被外部访问的文件夹（通过相应的路径访问http://localhost:8088/static/mock/index.json），这里我们可以放模拟的数据！！！！

 知识点4：步骤记录

gitignore文件===》用来增加提交不提交到git仓库里

 

 知识点5：<keep-alive>（提高网站性能）

 使用 <keep-alive>包裹在<router-view>来缓存路由，减少每次切换路由的时候，都请求ajax，但是使用这个缓存路由的时候，数据发送改变时也不会被重新请求路由，这时候需要用到keep-alive提供的方法

activated因为只有该生命周期函数会被执行，在里面判断前后数据有没有变，有再重新执行！！

我们可以通过2中方法来使用<keep-alive></keep-alive>来选择缓存不同的路由页面

方法一：使用<keep-alive>内封装的include和exclude两种方法

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>
 
<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>
 
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>
 
<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

方法二：动态配置路由，在router里面的index.js设置

然后在然后在app.vue文件下修改一下keep-alive组件的用法

知识点6：activated方法和deactivated生命周期钩子（activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发）

keep-alive会缓存组件，是的每次切换路由的时候，页面都不会重新请求ajax，而是直接用缓存里面的数据，如果这时候我们的数据发送变化需要重新请求ajax的时候，就需要用到keep-alive提供的activated函数（页面重新显示的时候会被执行，可利用前后两次的数据是否变化来判断是否重新执行ajax）

activated：keep-alive 组件激活时调用（页面进入或显示时失效被执行）

deactivated：keep-alive 组件停用时调用（页面离开或隐藏时失效被执行）

注意一点：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在 ！！！

 知识点7：打包编译

知识点1：打包编译上线，cnpm   run build 命令编译，然后提交dist 文件里面的index跟static文件。到服务端。然后就可以直接用localhost/的后端方式来打开！！！

知识点改变提交给服务端的路径，这时候需要修改config里面的配置，例如project文件里面

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/project',    //把路径修改为需要更改的路径

然后重新执行命令cnpm run  build然后在生成的dist文件修改问project！

 这时候就可以通过localhost/project来访问网站！！！

知识点8、异步组件调用提高网站加载速度从而提高性能

当路由中是调用组件名时，页面在加载的时候会默认一次性把所有的组件页面都加载出来，导致在打开首页的时候，其它所有页面一起被加载出来，从而打开速度缓慢！

方法一：在router文件下index。js修改

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'  //@表示src目录下的文件
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },{

修改为//改为箭头函数异步加载组件

export default new Router({
routes: [
{
path: ‘/’,
name: ‘Home’,
component: () => import(‘@/pages/home/Home’)   //改为箭头函数异步加载组件
}

方法二：在引用组件的时候用箭头函数

components：{

header：（）=>import(‘./components/Header’)

}

文件打包编译后会生成下面三个文件，用后端网址打开时会有以下三个文件

异步组件调用拆分后，app.js被拆分成一个个js文件

注意：当app.js文件特别大的时候，使用异步组件，对app.js进行拆分，拆分后每次切换到前面没有加载过的页面都相当于是一次http请求（有加载过的话，有缓存不需要重新加载），所以当app.js不是很大的时候，不推荐进行异步组件拆分，直接在进首页的时候都加载！！！

知识点9、字体图标的使用

如何使用字体图标

首先打开iconfont官网，选择相应的图标添加购物车，然后加入我的项目，然后下载到本地。解压，然后选择如下文件放在自己的目录下，然后修改iconfont.css下面相应的路径。

然后在需要用到字体图标的地方使用

iconfont.css路径修改

调用文件

<span class="iconfont"></span>  //编码在iconfont我的项目对应图标那边复制

如何新增字体图标

把新增的字体图标添加到项目后，然后下载到本地，替换四个字体文件，样式文件不需要替换，但是必须修改下旧的iconfont.css里面的base64位路径修改为最新下载下来的iconfont.css里面的base64位图片位置！！

2.在vue中，如果某个函数需要用到ajax返回的data值，那这时候，不能通过在created或者mounted来获取数据然后调用函数，需要在请求成功时，直接调用传数据！

3.箭头函数的使用

在vue中使用cs6语法，直接使用箭头函数，那么函数所指的作用域直接指向最外层，不用通过_this=this来指向最外层！！！res是函数里面的参数即是返回的结果！！！

4.过滤器的使用

过滤器的使用中，如果没有带参数，只需要写函数名即可，默认第一个参数是val值。{{title | ratefilter}},要是用使用参数则需要用函数的形式来调用过滤器{{title | ratefilter（“元”） }}

 5.需要item中的item.check字段， vue中如何来判断一个ajax字段是否存在，如何给vue中设置需要的字段！！

使用typeof判断一个字段是否存在，使用vue.$set来为item.check增加字段，同时如果点击事件的时候要改变列表item中的某个值也需要使用this.$emit ！！！但是如果是在forEach()里面可以直接赋值！！

如果列表是用v-for循环出来的，那么在进行选中判断的时候，可以使用索引来控制元素有没有被选中！！其中列表中的每一项使用forEach来循环相应的值，如果不是循环出来的列表，可以通过控制变量来实现选中操作!!!!!

循环出来的列表，控制选中方式！！！

forEach（）循环

循环出来的列表样式控制

不是循环出来的列表选中方式控制

 6.@click事件里面可以直接使用简单表达式操作，但是在使用vue的过程中，如是在视图html命令上进行操作元素，不用使用this来指定作用域进行操作，因为在指令里面默认作用域就是当前元素，使用指令会导致出错！只有在vue实例函数里面，才能使用this进行作用域指定！！！

 7.vue中事件处理之事件修饰符@click.prevent.self和@click.self.prevent区别（事件执行的过程中，根据冒泡事件从最里层开始触发到最外层依次执行）！！！

@click.prevent事件表示，阻止默认事件例如a标签中<a href=”www.baidu.com”  @click.prevent  =”abc”> 这个时候a链接就不会跳转，而是会执行abc函数！！！！@click.prevent.self事件表示，会阻止所有的点击。

所以这两个的区别是@click.self.prevent只会阻止自身的点击事件，而不会阻止默认事件（跳转事件）。而@click.prevent.self都会阻止

@click.self.prevent事件表示只会阻止对元素自身的点击。就是只当在 event.target 即点击当前元素时触发处理函数，即如果事件不是自身元素触发时，而是内部元素点击冒泡触发时，改元素的点击事件不会被执行！！

实例1：@click.self.prevent

<div class="div1" @click="alertf(1)" style="background:#f00">我是第一个div
     <a class="div2" style="display: block;background:#ccc;80%;height:100px;" href="www.baidu.com" @click.self.prevent="alertf(2)">我是第一个div2
          <div class="div3" style="background:#F1C142;70%;height:50px;" @click="alertf(3)">我是第一个div3</div>
     </a>
</div>

上面的代码中，只有点击div2的时候alertf(2)才会被触发同时阻止默认跳转事件，触发完冒泡触发div1的点击事件alertf(1)，然后div3的点击事件alertf(3)不会被触发！！！

点击div3，会alert3,alert1,跳转到/#。只阻止了alert(2)。因为会先判断self，点击到div3，不是self（即div2自身的点击），所以不会执行click事件，就不会执行 阻止默认事件和alert(2) ，所以可以跳转！！！！

实例2：@click.prevent.self

<div class="div1" @click="alertf(1)" style="background:#f00">我是第一个div
     <a class="div2" style="display: block;background:#ccc;80%;height:100px;" href="www.baidu.com" @click.self.prevent="alertf(2)">我是第一个div2
          <div class="div3" style="background:#F1C142;70%;height:50px;" @click="alertf(3)">我是第一个div3</div>
     </a>
</div>

点击div3，会alert3,alert1。不但阻止了alert(2)，还阻止了a的默认跳转。

因为点击的时候会先prevent，阻止默认事件，阻止了跳转;然后判断是否是self，因为点击到的是div3，所以不是self，阻止了alert(2)。